show full size image on mouseover

[joekoo]

Hello

I was looking for a javascript code to show an image in full size on moueover, I use this script on the site

function ShowPicture(id,Source) { 
if (Source=="1"){ 
if (document.layers) document.layers[''+id+''].visibility = "show" 
else if (document.all) document.all[''+id+''].style.visibility = "visible" 
else if (document.getElementById) document.getElementById(''+id+'').style.visibility = "visible" 
} 
else 
if (Source=="0"){ 
if (document.layers) document.layers[''+id+''].visibility = "hide" 
else if (document.all) document.all[''+id+''].style.visibility = "hidden" 
else if (document.getElementById) document.getElementById(''+id+'').style.visibility = "hidden" 
} 
}

CSS code i use:

<style type="text/css"> 
#Style { 
position:absolute; 
visibility:hidden; 
border:solid 1px #CCC; 
padding:5px; 

} 
</style>

On the site to to body I put this html code:

<a href="#" onMouseOver="ShowPicture('Style',1)" onMouseOut="ShowPicture('Style',0)">Click Here To Show Image</a> 
<div id="Style"><img src="/sites/default/files/peroulades.jpg"></div>

When Im hovering over the link image is shown full size,

Problem: if you take a look: http://www.online-dovolenka.sk/dovolenka_korfu

if hover over both links "Click Here To Show Image" you will see same image, but I put two different images? where is the problem? any ideas?

<a href="#" onMouseOver="ShowPicture('Style',1)" onMouseOut="ShowPicture('Style',0)">Click Here To Show Image</a> 
<div id="Style"><img src="/sites/default/files/peroulades.jpg"></div> 
 
<a href="#" onMouseOver="ShowPicture('Style',1)" onMouseOut="ShowPicture('Style',0)">Click Here To Show Image</a> 
<div id="Style"><img src="/sites/default/files/pantokrator.jpg"></div>

[rtrethewey]

Your code was a bit long for me to play with just at the moment, but I do have a suggestion. In your top example, your code checks 'document.layers'. 'document.layers' was exclusive to Netscape 4, which was replaced by Netscape 6 in 2000 and no longer exists. Similarly, 'document.all' being available but not 'document.getElementById' was exclusive to Internet Explorer 4, which also no longer exists. Your code could be simplified to only checking:

document.getElementById(xx).style.visibility

for all browsers in use today and might help you find the problem. Good luck!