Click here to Skip to main content
Click here to Skip to main content

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.

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. <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;
    }
  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");
          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. 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. <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)

Share

About the Author

ASPDev200
Founder Tejsoft Pty Ltd
Australia Australia
No Biography provided

Comments and Discussions

 
GeneralMy vote of 1 PinmemberMember 111647192-Nov-14 20:36 
QuestionGood Pinmemberengmebeed3-Oct-12 22:46 
QuestionFollowing on from JavaScript Image Popup PinmemberMartin Goodrich23-Sep-12 1:21 
SuggestionRe: Following on from JavaScript Image Popup PinmemberASPDev20025-Sep-12 14:02 
GeneralMy vote of 5 PinmemberNana Nurhayanto17-Oct-10 21:58 
GeneralCalculating position PinmemberAlex.Shnaider2-Feb-09 21:01 
JokeWow! PinmemberSmirkinGherkin29-Jan-09 0:48 
GeneralRe: Wow! Pinmemberemiaj29-Jan-09 13:04 
GeneralRe: Wow! PinmemberMember 378218930-Jan-09 3:04 

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

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

| Advertise | Privacy | Terms of Use | Mobile
Web03 | 2.8.141220.1 | Last Updated 28 Jan 2009
Article Copyright 2009 by ASPDev200
Everything else Copyright © CodeProject, 1999-2014
Layout: fixed | fluid