www.webdeveloper.com
Results 1 to 12 of 12

Thread: how do I mouseover and display pictures in a display box?

  1. #1
    Join Date
    Sep 2006
    Posts
    150

    how do I mouseover and display pictures in a display box?

    Here is what I am trying to do and I am looking for some help with how to program it. I want to have a group of thumbnail images, and when you mouseover or click them, I want the picture that you mouseover or click to display in a bigger box beside all of the thumbnails. I hope that makes sense. Any help or links would be greatly appreciated!
    thanks
    Sean
    Last edited by tableforglasses; 10-08-2006 at 11:36 AM.

  2. #2
    Join Date
    Oct 2006
    Posts
    3

    me too!!

    I am trying to find a script that will do the same thing. Any ideas?

  3. #3
    Join Date
    Sep 2006
    Posts
    150
    I want the image to display on the same page, not in a pop up window. Would I do that with tables or something else?
    Sean

  4. #4
    Join Date
    Jan 2005
    Posts
    3,067

    Cool

    Below is the code for 3 different ways. Here is the link to some examples using these codes:

    Thumb Nail Display Examples

    To have the image displayed when moused over but then hide when not moused over:
    Code:
    <html>
    <head>
    <script type="text/javascript">
    function showIt(imgsrc)
    {
    document.getElementById('imageshow').src=imgsrc;
    document.getElementById('imageshow').style.display='block';
    }
    
    function hideIt()
    {
    document.getElementById('imageshow').style.display='none';
    }
    </script>
    </head>
    <body>
    <img src="image1.jpg" onmouseover="showIt(this.src)" onmouseout="hideIt()"><br>
    <img src="image2.jpg" onmouseover="showIt(this.src)" onmouseout="hideIt()">
    <br>
    <br>
    <br>
    <img src="" id="imageshow" style="display:none">
    </body>
    </html>
    To have it show a default image even when you aren't moused over an image, but then show an image if you are moused over it:

    Code:
    <html>
    <head>
    <script type="text/javascript">
    function showIt(imgsrc)
    {
    document.getElementById('imageshow').src=imgsrc;
    }
    
    function hideIt()
    {
    document.getElementById('imageshow').src="default.jpg";
    }
    </script>
    </head>
    <body>
    <img src="image1.jpg" onmouseover="showIt(this.src)" onmouseout="hideIt()"><br>
    <img src="image2.jpg" onmouseover="showIt(this.src)" onmouseout="hideIt()">
    <br>
    <br>
    <br>
    <img src="default.jpg" id="imageshow">
    </body>
    </html>
    To have it show an image when you mouseover it and then keep showing the last image even when you mouseout of it:


    Code:
    <html>
    <head>
    <script type="text/javascript">
    function showIt(imgsrc)
    {
    document.getElementById('imageshow').src=imgsrc;
    }
    </script>
    </head>
    <body>
    <img src="image1.jpg" onmouseover="showIt(this.src)"><br>
    <img src="image2.jpg" onmouseover="showIt(this.src)">
    <br>
    <br>
    <br>
    <img src="default.jpg" id="imageshow">
    </body>
    </html>
    Last edited by konithomimo; 10-08-2006 at 12:44 PM.

  5. #5
    Join Date
    Oct 2006
    Posts
    3

    Talking Thank you konithomimo

    thanks! I think that is exactly what I am looking for. I will play around with it and let you know if I have any questions.

    Thanks again!!!

  6. #6
    Join Date
    Jan 2005
    Posts
    3,067
    No problem.

  7. #7
    Join Date
    Sep 2006
    Posts
    9
    You can also do it using just CSS and no javascript.

    This page shows you how, with a working demo:

    http://www.dynamicdrive.com/style/cs...image-gallery/
    Miracle Internet - www.miracleinternet.com.au

  8. #8
    Join Date
    Sep 2006
    Posts
    150
    Hey konithomimo
    I tried the code and it works well, what I am wondering is I am using thumbnails to bigger images some are set up in portrait format and some landscape...how can I get the frame for the image that pops up when moused over to adjust to the various heights and widths, because when I do it now what ever image is moused over when it it pops up it is distorted unless it is the exact height and width of the main image I set the page to. i hope that makes sense. thanks for the help
    Sean

  9. #9
    Join Date
    Jan 2005
    Posts
    3,067
    Quote Originally Posted by tableforglasses
    Hey konithomimo
    I tried the code and it works well, what I am wondering is I am using thumbnails to bigger images some are set up in portrait format and some landscape...how can I get the frame for the image that pops up when moused over to adjust to the various heights and widths, because when I do it now what ever image is moused over when it it pops up it is distorted unless it is the exact height and width of the main image I set the page to. i hope that makes sense. thanks for the help
    Sean
    There are a few things that you can do. YOu can place it inside of an autosized div, or tao make things easier you can preload the image to show. To do so just add the lines:

    var newpic = new Image();
    newpic.src=imgsrc;

    now you can simply get the width and height of "newpic" and make that the width and height of the main image. For example, to change the last script that i provided above simply change it to this:

    Code:
    <html>
    <head>
    <script type="text/javascript">
    function showIt(imgsrc)
    {
    var holder = document.getElementById('imageshow');
    var newpic= new Image(); 
    newpic.src=imgsrc;
    holder.src=imgsrc;
    holder.width = newpic.width;
    holder.height=newpic.height;
    }
    </script>
    </head>
    <body>
    <img src="image1.jpg" onmouseover="showIt(this.src)"><br>
    <img src="image2.jpg" onmouseover="showIt(this.src)">
    <br>
    <br>
    <br>
    <img src="default.jpg" id="imageshow" width=50 height=50>
    </body>
    </html>

  10. #10
    Join Date
    Oct 2006
    Posts
    3

    Talking Nice!

    Well, konithomimo I got your script working with the pics that I am using and first let me say THANK YOU SO MUCH!!!!! It is exactly what I am looking for. It's light and easy to edit. And when I change the pics next year, all I have to do is change the file references... Brilliant!

    Now I do have a few questions for you which are probably beginner level CSS or whatever it is that uses the <div> AND #container tags.... How do I get rid of the space between two columns that I have created by duplicating the code for the first one, and how can I get the images to also lay out across the entire bottom of the page, in a row format, as opposed to a column?

    thanks for the help!

    bodhi

    UPDATE:

    here is the code I am using (admittedly I guessed at a lot of it...):

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 TRANSITIONAL//EN">
    <html>
    
    	<head>
    <script type="text/javascript">
    function showIt(imgsrc)
    {
    document.getElementById('imageshow').src=imgsrc;
    document.getElementById('imageshow').style.display='block';
    }
    
    function hideIt()
    {
    document.getElementById('imageshow').src="images/2007.tif";
    }
    </script>
    
    
    <style type="text/css">
    #container {
    width:100%;
    height:100%;
    }
    #left {
    float:left;
    width:15%;
    }
    #mid {
    width:25%;
    margin-left:0;
    margin-right:0;
    }
    #bottom {
    width:100%;
    float:bottom;
    margin-left:0;
    margin-right:0;
    }
    
    </style>
    </head>
    <div id="container">
    <div id="left">
    <img src="images/jan07.tif" border="1" alt="January 2007" title="January2007" align="middle" onmouseover="showIt(this.src)" onmouseout="hideIt()" width=100 height=100><br>
    <img src="images/mar07.tif" border="1" alt="March 2007" title="March2007" align="middle" onmouseover="showIt(this.src)" onmouseout="hideIt()" width=100 height=100><br>
    <img src="images/may07.tif" border="1" alt="May 2007" title="May2007" align="middle" onmouseover="showIt(this.src)" onmouseout="hideIt()" width=100 height=100><br>
    <img src="images/jul07.tif" border="1" alt="July 2007" title="July2007" align="middle" onmouseover="showIt(this.src)" onmouseout="hideIt()" width=100 height=100><br>
    </div>
    <div id="left">
    <img src="images/feb07.tif" border="1" alt="February 2007" title="February2007" align="middle" onmouseover="showIt(this.src)" onmouseout="hideIt()" width=100 height=100><br>
    <img src="images/apr07.tif" border="1" alt="April 2007" title="April2007" align="middle" onmouseover="showIt(this.src)" onmouseout="hideIt()" width=100 height=100><br>
    <img src="images/jun07.tif" border="1" alt="June 2007" title="June2007" align="middle" onmouseover="showIt(this.src)" onmouseout="hideIt()" width=100 height=100><br>
    <img src="images/aug07.tif" border="1" alt="August 2007" title="August2007" align="middle" onmouseover="showIt(this.src)" onmouseout="hideIt()" width=100 height=100><br>
    </div>
    <div id="left" align="left">
    <img src="images/2007.tif" id="imageshow" width=400 height=400><br>
    <br>
    <div id="bottom" align="top">
    <img src="images/sep07.tif" border="1" alt="September 2007" title="September2007" align="middle" onmouseover="showIt(this.src)" onmouseout="hideIt()" width=100 height=100>
    <img src="images/oct07.tif" border="1" alt="October 2007" title="October2007" align="middle" onmouseover="showIt(this.src)" onmouseout="hideIt()" width=100 height=100>
    <img src="images/nov07.tif" border="1" alt="November 2007" title="November2007" align="middle" onmouseover="showIt(this.src)" onmouseout="hideIt()" width=100 height=100>
    <img src="images/dec07.tif" border="1" alt="December 2007" title="December2007" align="middle" onmouseover="showIt(this.src)" onmouseout="hideIt()" width=100 height=100>
    </form>
    </div></div>
    </html>
    Last edited by gr8fulfred; 10-14-2006 at 04:28 PM.

  11. #11
    Join Date
    May 2014
    Posts
    2
    I just searching for some mouseover code and find this great one. But i just wondering is it possible to show image over image, like in code 2, but when is mouse over link and not over image.

    I know this is a old post, but could you respond. thank you in advance

    Quote Originally Posted by konithomimo View Post
    Below is the code for 3 different ways. Here is the link to some examples using these codes:

    Thumb Nail Display Examples


    To have it show a default image even when you aren't moused over an image, but then show an image if you are moused over it:

    Code:
    <html>
    <head>
    <script type="text/javascript">
    function showIt(imgsrc)
    {
    document.getElementById('imageshow').src=imgsrc;
    }
    
    function hideIt()
    {
    document.getElementById('imageshow').src="default.jpg";
    }
    </script>
    </head>
    <body>
    <img src="image1.jpg" onmouseover="showIt(this.src)" onmouseout="hideIt()"><br>
    <img src="image2.jpg" onmouseover="showIt(this.src)" onmouseout="hideIt()">
    <br>
    <br>
    <br>
    <img src="default.jpg" id="imageshow">
    </body>
    </html>

  12. #12
    Join Date
    May 2014
    Posts
    2

    Great

    I just searching fore some codes about showing image on mouse hover and find this great code. Could it be possible to hover works over link and showing image over image, not to hover image.

    Just to replace image1 and image2 with some links

    Quote Originally Posted by konithomimo View Post
    Below is the code for 3 different ways. Here is the link to some examples using these codes:

    Thumb Nail Display Examples


    To have it show a default image even when you aren't moused over an image, but then show an image if you are moused over it:

    Code:
    <html>
    <head>
    <script type="text/javascript">
    function showIt(imgsrc)
    {
    document.getElementById('imageshow').src=imgsrc;
    }
    
    function hideIt()
    {
    document.getElementById('imageshow').src="default.jpg";
    }
    </script>
    </head>
    <body>
    <img src="image1.jpg" onmouseover="showIt(this.src)" onmouseout="hideIt()"><br>
    <img src="image2.jpg" onmouseover="showIt(this.src)" onmouseout="hideIt()">
    <br>
    <br>
    <br>
    <img src="default.jpg" id="imageshow">
    </body>
    </html>

Thread Information

Users Browsing this Thread

There are currently 2 users browsing this thread. (0 members and 2 guests)

Posting Permissions

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



Recent Articles