Ir para conteúdo
Fórum Script Brasil
  • 0

Imagem - Onmouseover = Explicação


hsimberg

Pergunta

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

Link para o comentário
Compartilhar em outros sites

4 respostass a esta questão

Posts Recomendados

  • 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

Link para o comentário
Compartilhar em outros 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

Link para o comentário
Compartilhar em outros sites

Participe da discussão

Você pode postar agora e se registrar depois. Se você já tem uma conta, acesse agora para postar com sua conta.

Visitante
Responder esta pergunta...

×   Você colou conteúdo com formatação.   Remover formatação

  Apenas 75 emoticons são permitidos.

×   Seu link foi incorporado automaticamente.   Exibir como um link em vez disso

×   Seu conteúdo anterior foi restaurado.   Limpar Editor

×   Você não pode colar imagens diretamente. Carregar ou inserir imagens do URL.



  • Estatísticas dos Fóruns

    • Tópicos
      152k
    • Posts
      651,8k
×
×
  • Criar Novo...