Click here to Skip to main content
12,759,567 members (31,998 online)
Click here to Skip to main content
Add your own
alternative version


47 bookmarked
Posted 28 Jan 2009

JavaScript Image Popup

, 28 Jan 2009 CPOL
Rate this:
Please Sign up or sign in to vote.
A simple way to show a pop up image on mouse over of a smaller image.


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:
  2. <div id="imgbox"></div>

    The CSS element:

        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;
  3. Here is the JavaScript code to show the popup image:
    1. Get the left and top positions of the thumbnail image:
    2. 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;
    3. 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.
    4. function Large(obj)
          var imgbox=document.getElementById("imgbox");
          var img = document.createElement("img");
          } else {
 + 'px';
    5. Hide the DIV at mouse out.
    6. function Out()
  4. Add a OnMouseOver client-side event call for the thumbnail images to show the popup image on mouse-over.
  5. <img id='img1' src='images/Sample.jpg' onmouseover="Large(this)" />


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.


This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


About the Author

Founder Tejsoft Pty Ltd
Australia Australia
No Biography provided

You may also be interested in...

Comments and Discussions

QuestionHow images can be shown? Pin
Member 1169671317-May-15 0:37
memberMember 1169671317-May-15 0:37 
GeneralMy vote of 1 Pin
Member 111647192-Nov-14 20:36
memberMember 111647192-Nov-14 20:36 
QuestionGood Pin
engmebeed3-Oct-12 22:46
memberengmebeed3-Oct-12 22:46 
QuestionFollowing on from JavaScript Image Popup Pin
Martin Goodrich23-Sep-12 1:21
memberMartin Goodrich23-Sep-12 1:21 
SuggestionRe: Following on from JavaScript Image Popup Pin
ASPDev20025-Sep-12 14:02
memberASPDev20025-Sep-12 14:02 
GeneralMy vote of 5 Pin
Nana Nurhayanto17-Oct-10 21:58
memberNana Nurhayanto17-Oct-10 21:58 
GeneralCalculating position Pin
Alex.Shnaider2-Feb-09 21:01
memberAlex.Shnaider2-Feb-09 21:01 
JokeWow! Pin
SmirkinGherkin29-Jan-09 0:48
memberSmirkinGherkin29-Jan-09 0:48 
GeneralRe: Wow! Pin
emiaj29-Jan-09 13:04
memberemiaj29-Jan-09 13:04 
GeneralRe: Wow! Pin
Member 378218930-Jan-09 3:04
memberMember 378218930-Jan-09 3:04 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

Permalink | Advertise | Privacy | Terms of Use | Mobile
Web02 | 2.8.170217.1 | Last Updated 28 Jan 2009
Article Copyright 2009 by ASPDev200
Everything else Copyright © CodeProject, 1999-2017
Layout: fixed | fluid