• 0
Sign in to follow this  
hsimberg

Imagem - Onmouseover = Explicação

Question

Olá....

Precisava de uma referencia...

Gostaria de fazer ...

Quando passasse o mouse em cima de uma imagem uma especie de janelinha com detalhes....

Quem tem orkut sabe do que eu to falando.....como na screenshot

temp.jpg

Imagino que seja uma função para isso...mas tentei "roubar" os codigos do orkut mas como não entendo muito de js não a encontrei...

É facil fazer isso...viavel? Ou algo parecido....algum exemplo ? biggrin.gif

Valeu povo

Abraço

A screenshot não funfo...

ta aqui a imagem

http://www.schoenstattyouth.com/site/temp.jpg

Share this post


Link to post
Share on other sites

4 answers to this question

Recommended Posts

  • 0

procura por hint aqui no fórum de JavaScript.. tem um tópico da Andreia que vai resolver seu problema!!!

abraços

Share this post


Link to post
Share on other sites
  • 0

Aow cara....valeu era isso mesmo...mas ainda to com umas duvidas

No exemplo abaixo que eu fiz...

Funciona no FIREFOX mas no IE dá erro de script, aquele icone amarelo no canto inferior esquerdo...

E as 'divs' se repetem....

o resultado da minha query é esse

2 3 5

e se passar o mouse em cima do 2 aparece 2, se passar no 3 tb aparece 2 e no 5 tb

não sei o que pode ser , porque o div ta dentro do loop. então deveria ir mudando....né?

Um abraço e obrigado

<script language="JavaScript" type="text/JavaScript">

//verifica o navegador
sAgent = navigator.userAgent;
bIsIE = sAgent.indexOf("MSIE") > -1;
bIsNav = sAgent.indexOf("Mozilla") > -1 && !bIsIE;

//setando as variaveis de controle de eventos do mouse
var xmouse = 0;
var ymouse = 0;
document.onmousemove = MouseMove;

//funcoes de controle de eventos do mouse:
function MouseMove(e){
if (e) { MousePos(e); } else { MousePos();}
}

function MousePos(e) {
if (bIsNav){
 xmouse = e.pageX;
 ymouse = e.pageY;
}
if (bIsIE) {
 xmouse = document.body.scrollLeft + event.x;
 ymouse = document.body.scrollTop + event.y;
}
}

//funcao que mostra e esconde o hint
function Hint(objNome, action){
//action = 1 -> Esconder
//action = 2 -> Mover

if (bIsIE) {
 objHint = document.all[objNome];
}
if (bIsNav) {
 objHint = document.getElementById(objNome);
 event = objHint;
}

switch (action){
 case 1: //Esconder
  objHint.style.visibility = "hidden";
  break;
 case 2: //Mover
  objHint.style.visibility = "visible";
  objHint.style.left = xmouse + 15;
  objHint.style.top = ymouse + 15;
  break;
}

}

</script>

<? require "login_db.php";
$a = mysql_query("SELECT * FROM gb");
while($b = mysql_fetch_array($a)){
?>
<div id="link" style="position:absolute; z-index:1; visibility: hidden; background-color: #9900FF; layer-background-color: #FFFFCC; border: 1px none #000000; left: 52px; top: 16px;"><font size="1" face="Verdana" color="#FFFFFF"><? echo $b["id"]; ?></font></div>
<a href="#" onMouseMove="Hint('link',2)" onMouseOut="Hint('link',1)"><? echo $b["id"]; ?></a>
<? } ?>

E coloquei esse arquivo aqui

http://www.schoenstattyouth.com/site/div.php

Share this post


Link to post
Share on other sites
  • 0

Essa função do orkut é complicadinha hein, é diferente do Hint. Se eu achar algo parecido te passo

então...é que eu tenho um guestboook e queria que quando passasse o mouse em cima de um envelope mostrasse a mensagem

e title e alt não da para mostrar muitos caracttees, pular linha etc...ai pensei nisso

se tiver interesse clique aqui para ver

Alguma idea semelhante?

Gracias!

NandoOoOoOOo

Share this post


Link to post
Share on other sites
  • 0

dae galera

so novo aki.....

to por fora das coisas ainda mais me acostumo daqui pra frente

quem tem enterese me mande msg

e isso falou

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Sign in to follow this