popup image onMouseOver

[Andreig]

HI can somebody explain (with sample of code) how to enlarge an image using popup when mouse is over a small image + close the popup when mouse is out

Thanks for help

[acoder]

By popup, I assume you mean a div containing the image.

Just use a div tag and keep it hidden:
[code=html]<div id="largeImgCon tainer" style="visibili ty:hidden">
<img id="largeImg">
</div>[/code]Then when you mouseover an image, display it:
[code=html]<img src="pic.gif" onmouseover="sh owImage(this.sr c)" onmouseout="hid eImg();">[/code]
[code=javascript]function showImage(src) {
document.getEle mentById("large Img").src = src;
document.getEle mentById("large ImgContainer"). visibility = "visible";
}[/code]

[Andreig]

Thanks Acoder
the onlyn poblem with it the large image opens on the lace of the small one and becoase of that it is not displayed. How to set a position of the large image?

Thanks again

[acoder]

To set the position, use the left and top properties and you may want to position it absolutely rather than relatively, so set the position to "absolute":
[html]<div style="position :absolute; left:100px; top:100px;...">[/html]