Click here to Skip to main content
65,938 articles
CodeProject is changing. Read more.
Articles / web / XHTML

JavaScript Image Popup

4.89/5 (15 votes)
28 Jan 2009CPOL1 min read 218.3K   5.9K  
A simple way to show a pop up image on mouse over of a smaller image.

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

    The CSS element:

    CSS
    #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;
    }
  3. Here is the JavaScript code to show the popup image:
    1. Get the left and top positions of the thumbnail image:
    2. JavaScript
      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. JavaScript
      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';
      }
    5. Hide the DIV at mouse out.
    6. JavaScript
      function Out()
      {
          document.getElementById("imgbox").style.visibility='hidden';
      }
  4. Add a OnMouseOver client-side event call for the thumbnail images to show the popup image on mouse-over.
  5. HTML
    <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.

License

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