ToolTip com 3 eventos

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>