Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New Coder
    Join Date
    Sep 2012
    Location
    Calgary, Alberta, Canada
    Posts
    29
    Thanks
    4
    Thanked 0 Times in 0 Posts

    Mouse over image to show larger pop-up image

    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.

  • #2
    New Coder
    Join Date
    Sep 2012
    Location
    Calgary, Alberta, Canada
    Posts
    29
    Thanks
    4
    Thanked 0 Times in 0 Posts
    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?

  • #3
    New Coder
    Join Date
    Dec 2012
    Location
    England
    Posts
    20
    Thanks
    0
    Thanked 4 Times in 4 Posts

  • #4
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    27,151
    Thanks
    80
    Thanked 4,557 Times in 4,521 Posts
    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>
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •