Mouse over image to show larger pop-up image

helpneeded22 · 01-12-2013, 10:13 PM

I am creating a website that will have a gallery of images and info under each of them. The image will be quite small, and I would like the ability to just mouse over an image and then show that image in a larger scale in a separate pop-up or window.

I am very experienced with basic HTML, but JS and CCS are quite new to me. I have tried a few tutorials, but I feel the best way for me to learn is with an actual project in mind.

I know that I will need need 2 image files (the small one and the large one).

Is there already code that exists somewhere that I could just copy and paste? By doing this, I can then piece it apart to better understand it, and modify it for my needs.

Thanks.

helpneeded22 · 01-14-2013, 02:03 AM

Is is possible to do what I have indicated above in JS? I know it can be done if I have an area of the page set aside to display a big image, but in this case I just want the big image to appear on mouse over. I have seen others sites do this, but perhaps this was not done with JS?

linek98 · 01-14-2013, 03:31 AM

One of those should be good http://www.jquery4u.com/windows/10-j...lider-plugins/

Old Pedant · 01-14-2013, 09:39 PM

I didn't see any of those suggested by LineK98 that did what HelpNeeded said he wanted.

Here's a pretty simple implementation. It's a variation of something my wife uses on her site:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
          "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<title>Clearview Arts -- Dogs</title>

<style type="text/css">
*    { margin: 0px; color: #79311C; 
       font-family: Fletcher-Gothic, "Fletcher Gothic", Papyrus, Verdana, Arial, Sans-Serif;
	   font-size: small;
	   font-weight: bold;
     }
body { background-color: #79311C; }
div#BOX  { position: relative; width: 750px; height: 800px; text-align: left;
           border-left: solid #79311C 3px; border-right: solid #79311C 3px;
           background-color: #E5BC9D;
         }
div#HEAD { position: relative; width: 100%; height: 200px;
           border-bottom: solid #79311C 3px;
         }
div#MAIN { position: relative; text-align: center;
         }

div#MAIN img { border: solid #79311C 5px; border-top: solid #C0482A 5px; border-left: solid #C0482A 5px; }
div#MAIN a img { border: none; }

img#LOGO { position: absolute; top: 0px; right: 0px; height: 200px; }
img#NAME { position: absolute; top: 30px; left: 20px; }
img#PAGE { position: absolute; top: 130px; left: 100px; } 

table#GALLERY td
{
   width: 230px; 
   vertical-align: middle; text-align: center; 
   padding-bottom: 20px;
}
div#OVERLAY 
{
    position: absolute; top: 0px; left: 0px;
    width: 100%; height: 800px; 
    background-color: black;
    -moz-opacity: 0.60; 
    opacity: 0.60; 
    filter: alpha(opacity=60); 
    z-index: 10;
    display: none;
}
div#BIGPIC
{
    position: absolute; top: 0px; left: 0px;
    width: 100%;  
    background-color: transparent;
    text-align: center;
    z-index: 15;
    display: none;
}
div#BIGPIC span
{
    padding-left: 100px; padding-right: 100px;
    color: #E5BC9D;
    background-color: black;
}
img#BIGIMG
{
    border: solid black 4px;
}    
</style>

</head>
<body onload="Setup()">
<div id="OVERLAY"></div>
<div id="BIGPIC">
   <span>Click on image to close</span>
   <br />
   <img id="BIGIMG" alt="Larger image"/>
   <br />
   <span>Click on image to close</span>
</div>
<center>
<div id="BOX">
  <div id="HEAD">
    <img id="LOGO" src="http://www.clearviewarts.com/images/SignatureCalico-200h.gif" alt="My signature image: a calico cat" />
    <img id="NAME" src="http://www.clearviewarts.com/images/ClearviewArtsText.gif" alt="Clearview Arts" />
    <img id="PAGE" src="http://www.clearviewarts.com/images/FineArtAndArtPrints.gif" alt="Fine Art and Art Prints" />
  </div>
  <div id="MAIN">
      <br />
      <table id="GALLERY">
      <tr>
          <td>
              <img src="http://www.clearviewarts.com/thumbnails/Puppy In Basket.jpg" alt="Dogs"/>          
          </td>
          <td>
              <img src="http://www.clearviewarts.com/thumbnails/BabyIndy.jpg" alt="Dogs"/>          
          </td>
          <td>
              <img src="http://www.clearviewarts.com/thumbnails/HarlequinDane.jpg" alt="Dogs"/>          
          </td>
      </tr>
      <tr>
          <td>
              <img src="http://www.clearviewarts.com/thumbnails/Pug.jpg" alt="Dogs"/>          
          </td>
          <td>
              <img src="http://www.clearviewarts.com/thumbnails/Wagner-edit1.jpg" alt="Dogs"/>          
          </td>
          <td>
              <img src="http://www.clearviewarts.com/thumbnails/CanusAngelicus.jpg" alt="Dogs"/>          
          </td>
      </tr>
      </table>
      <br />
  </div>
</div>
</center>

<script type="text/javascript">
function overon()
{
    document.getElementById("BIGIMG").src = this.src.replace(/thumbnails/,"websize");
}
function overshow()
{    
    var hold = document.getElementById("BIGPIC");
    hold.style.display = "block";
    var stop = parseInt(document.body.scrollTop);
    if ( isNaN(stop) ) stop = 0;
    if ( stop == 0 ) 
    {
        var stop = parseInt(document.documentElement.scrollTop);
        if ( isNaN(stop) ) stop = 0;
    }
    hold.style.top = stop + 100 + "px";
    document.getElementById("OVERLAY").style.display = "block";
}
function overoff()
{
    document.getElementById("OVERLAY").style.display = "none";
    document.getElementById("BIGPIC").style.display = "none";
}
var preloads = [];
function Setup()
{
    var big = document.getElementById("BIGIMG");
    big.onload = overshow;
    big.onclick = overoff;
    
    var galleryPix = document.getElementById("GALLERY").getElementsByTagName("img");
    for ( var g = 0; g < galleryPix.length; ++g )
    {
        var pic = galleryPix[g];
        pic.onmouseover = overon;
        pic.ommouseout = overoff;
        var image = new Image();
        image.src = galleryPix[g].src.replace(/thumbnails/,"websize");
        preloads.push(image);
    }
}
// start it all up
Setup();

</script>

</body>
</html>