ToolTip com 3 eventos

[juliano.ma 0]

Boa tarde senhores,

 

estou tentando fazer um tooltip que funciona da seguinte forma:

 

Ao passar o mouse em cima ele aparece, ao retirar o mouse ele desaparece e ao clicar nele ele aparece e fixa.

 

Veja o que eu tentei:

function show(id)
{
	if(document.getElementById(id).style.display == "block")
	document.getElementById(id).style.display = "none";
	else
	document.getElementById(id).style.display = "block";
}

Até ai tudo bem, o problema é no evento onmouseout, pois ele tira o que está fixo pelo onclick:

function over(id)
{
	document.getElementById(id).style.display = "block";
}

function out(id)
{
	document.getElementById(id).style.display = "none";
}

 

<div style ='position: relative;'>
<img id='100' style="z-index:100; top:100; left:100; position: absolute;" src='imagem100.jpg' width='300' height='300' />
<img id='200' style="z-index:200; top:120; left:120; position: absolute;" src='imagem200.jpg' width='300' height='300' />
<img id='300' style="z-index:300; top:130; left:130; position: absolute;" src='imagem300.jpg' width='300' height='300' />
</div>

 

<a onclick="show(100);" onmouseover="over(100);" onmouseout="out(100);" href="javascript:">Img 1</a>
<a onclick="show(200);" onmouseover="over(200);" onmouseout="out(200);" href="javascript:">Img 2</a>
<a onclick="show(300);" onmouseover="over(300);" onmouseout="out(300);" href="javascript:">Img 3</a>

[klonder 14]

Você pode tentar criar uma variável global para controle, que altera seu valor com o evento onclick, por exemplo para true.

 

Desse modo, o bloco do onmouseout só será executado se o evento não for "true":

 

Exemplo:

function out(id) {
if (trava != true) {
   document.getElementById(id).style.display = "none";
}
}