DIV seguir Mouse ao passar sobre imagem
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()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")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)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 a fazer este código simples e agil funcionar.
Obs: Vi uns métodos com instalação de "lightbox" mas não achei interessante por ter de trabalhar com muitos JS e coisas que eu não entenderia, este código é de facil entendimento e se conseguir que ele faça o que pretendo, ficará muito simples, útil e prático (que na verdade é para que o serve a internet) facilitar nossas vidas.
Obrigado.
Discussão (1)
Carregando comentários...