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

Por , em Javascript

Recommended Posts

SinoP    0

SinoP
Postado

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 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.

Compartilhar este post

Link para o post
Compartilhar em outros sites

Juninho14    0

Juninho14
Postado

procura algum plugin de tooltip que resolverá seu problema (GOOGLE!)

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Javascript
×

Informação importante

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

  Aceito