JavaScript Image Popup

• Download source code - 17.6 KB

Introduction

Many a times, developers require to show larger popup images when users hover their mouse pointer over a thumbnail image. I will explain here a very simple JavaScript that can be used to show a popup image. The script is tested, and works fine in IE 7.0 and Mozilla Firefox 3.0.

Steps for the implementation

1. Create a DIV named "imgbox" on the HTML page on which your thumbnail images will be shown. The DIV and the CSS element ID associated with the DIV is shown below:

<div id="imgbox"></div>

The CSS element:

#imgbox { vertical-align : middle; position : absolute; border: 1px solid #999; background : #FFFFFF; filter: Alpha(Opacity=100); visibility : hidden; height : 200px; width : 200px; z-index : 50; overflow : hidden; text-align : center; }

2. Here is the JavaScript code to show the popup image:
1. Get the left and top positions of the thumbnail image:

function getElementLeft(elm) { var x = 0; //set x to elm’s offsetLeft x = elm.offsetLeft; //set elm to its offsetParent elm = elm.offsetParent; //use while loop to check if elm is null // if not then add current elm’s offsetLeft to x //offsetTop to y and set elm to its offsetParent while(elm != null) { x = parseInt(x) + parseInt(elm.offsetLeft); elm = elm.offsetParent; } return x; } function getElementTop(elm) { var y = 0; //set x to elm’s offsetLeft y = elm.offsetTop; //set elm to its offsetParent elm = elm.offsetParent; //use while loop to check if elm is null // if not then add current elm’s offsetLeft to x //offsetTop to y and set elm to its offsetParent while(elm != null) { y = parseInt(y) + parseInt(elm.offsetTop); elm = elm.offsetParent; } return y; }

2. Get the thumbnail image source, make the DIV visible, increase the height and width to the required size, and attach the image to the DIV.

function Large(obj) { var imgbox=document.getElementById("imgbox"); imgbox.style.visibility='visible'; var img = document.createElement("img"); img.src=obj.src; img.style.width='200px'; img.style.height='200px'; if(img.addEventListener){ img.addEventListener('mouseout',Out,false); } else { img.attachEvent('onmouseout',Out); } imgbox.innerHTML=''; imgbox.appendChild(img); imgbox.style.left=(getElementLeft(obj)-50) +'px'; imgbox.style.top=(getElementTop(obj)-50) + 'px'; }

3. Hide the DIV at mouse out.

function Out() { document.getElementById("imgbox").style.visibility='hidden'; }

3. Add a OnMouseOver client-side event call for the thumbnail images to show the popup image on mouse-over.

<img id='img1' src='images/Sample.jpg' onmouseover="Large(this)" />

Comments

Hope this JavaScript would solve your popup image requirement. If you have implemented a popup image feature in some other way, or developed a feature-rich script, please put a link to your CodeProject article so that others can refer it too.