dcsimg
www.webdeveloper.com
Results 1 to 12 of 12

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

Hybrid View

  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 12:36 PM.

  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 01: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
    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/

  7. #7
    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>

  8. #8
    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>

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

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 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