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

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 (markup):

CSS code i use:

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


} 
</style>

Code (markup):

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>

Code (markup):

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


Problem:


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> 

Code (markup):

 

You need to name your id's differently too. Try this:

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

Code (markup):