Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

SinoP

DIV seguir Mouse ao passar sobre imagem

Recommended Posts

Salve galera!

 

Estou precisando da ajuda de vocês, estou aprendendo um pouco de JS, (UM POUCO)!

Preciso fazer com que ao passar o mouse sobre uma imagem apareça a DIV coorrespondente à imagem e siga o mouse até o mouse sair de cima da imagem.

 

Com apenas uma imagem eu consegui.

Porém quando tento inserir varias imagens e varias DIV's o negócio num funfa!

 

<html>
<head>
<title>DIV SEGUE MOUSE</title>
<script type="text/javascript">
var w=1
var h=1

if (document.getElementById || document.all)

function gettrailobj()
{
if (document.getElementById) return document.getElementById("nomedadiv").style
else if (document.all) return document.all.nomedadiv.style
}

function truebody()
{
return (!window.opera && document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body
}

function hidetrail()
{
document.onmousemove=""
gettrailobj().visibility="hidden"
gettrailobj().left=-1000
gettrailobj().top=0
}


function showtrail()
{
if(navigator.userAgent.toLowerCase().indexOf('opera') == -1)
{
// followmouse()

document.onmousemove=followmouse
gettrailobj().visibility="visible"


}
}


function followmouse(e)
{

if(navigator.userAgent.toLowerCase().indexOf('opera') == -1)
{

var xcoord=20
var ycoord=20

if (typeof e != "undefined")
{
xcoord+=e.pageX
ycoord+=e.pageY
}
else if (typeof window.event !="undefined")
{
xcoord+=truebody().scrollLeft+event.clientX
ycoord+=truebody().scrollTop+event.clientY
}

var docwidth=document.all? truebody().scrollLeft+truebody().clientWidth : pageXOffset+window.innerWidth-15
var docheight=document.all? Math.max(truebody().scrollHeight, truebody().clientHeight) : Math.max(document.body.offsetHeight, window.innerHeight)

if (xcoord+w+3>docwidth)
xcoord=xcoord-w-(20*2)

if (ycoord-truebody().scrollTop+h>truebody().clientHeight)
ycoord=ycoord-h-20;

gettrailobj().left=xcoord+"px"
gettrailobj().top=ycoord+"px"

}

}
</script>
</head>

<body>

<div id="nomedadiv" style="position:absolute; visibility:hidden; left:0px; top:-1000px; width:250px; height:150px; border:1px solid #888888; background:#DDDDDD;">OPA... Funcionou!!!</div>
<div style="width:90px; height:55px; margin:2px; float:left; overflow:hidden; border:1px #CCC solid; text-align:center;">
<a href="javascript:void(0);" onmouseover="showtrail();" onmouseout="hidetrail();">
<img src="imagemquequiser.jpg" height="55" width="90" border="0" />
</a>
</div>
</body>
</html>

Já tentei passar um parametro para a função saber de qual imagem e div se trata, porém não consegui um resultado.

 

Como disse estou aprendendo e ficarei muito grato se puderem me ajudar.

Obrigado.

Compartilhar este post


Link para o post
Compartilhar em outros sites

Conforme o aviso existente no fórum de origem deste post, não é permitida a postagem de dúvidas nesta área, motivo pelo qual este tópico será movido para o fórum principal deste assunto.

 

Tópico Movido

 

Origem: Laboratório de scripts (Javascript / DHTML) http://forum.imasters.com.br/public/style_emoticons/default/seta.gif Destino:

 

Javascript / DHTML

Compartilhar este post


Link para o post
Compartilhar em outros sites

×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.