show full size image on mouseover

Hello

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

[CODE]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”
}
} [/CODE]

CSS code i use:

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

}
</style>[/CODE]

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

[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>[/CODE]

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

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

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?

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

<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> [/CODE]

Also in #JavaScript _↴