...

View Full Version : show full size image on mouseover



joeko
03-21-2012, 01:11 PM
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>

webdev1958
03-21-2012, 01:32 PM
Did you write that code? because document.all and document.layers are virtually obsolete or did you get that old code from somewhere and are now trying to make it work.

Plus you have more than 1 element with id="Style" which is a huge no-no, especially with javascript.

And you don't need javascript for this at all. Another non-javascript option is to just put a :hover pseudo class on the img to control the display of the enlargement.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum