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 6 of 6
  1. #1
    New Coder
    Join Date
    Dec 2011
    Posts
    11
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Question How do I get a larger pic to show up on mouseover of a thumbnail?

    So, I am making a table of images for an online catalogue. I have tried googling mouseovers and rollovers. But I can't seem to find the exact answer to my question.
    Basically I want a larger box, probably medium size(640px) to show up with a larger picture when you mouseover the thumbnail in the table.
    I thought maybe I should use a map tag with a mouseover attribute, but I'm not exactly sure how to code that. Or if that is even the best way to do this.
    Any help is greatly appreciated.
    Thank you

    If it helps, this is the webpage with the skeleton of the table. http://krystlekleen.batcave.net/test...catalogue.html

  • #2
    Regular Coder Lerura's Avatar
    Join Date
    Aug 2005
    Location
    Denmark
    Posts
    881
    Thanks
    0
    Thanked 115 Times in 114 Posts
    Code:
    <script>
    function ChangeImg(Img){
    document.getElementById('LargeImage').src==Img;
    </script>
    
    <img src="th_image1.png" onmouseover="ChangeImg('Image1.png');">
    <img src="th_image2.png" onmouseover="ChangeImg('Image2.png');">
    <img src="th_image3.png" onmouseover="ChangeImg('Image3.png');">
    
    <img id="LargeImage" src="blank.gif">
    --- I don't know if you are aware of it, but your host is recognized as Malicious. - According to Norton
    Last edited by Lerura; 06-15-2012 at 05:19 PM.

  • #3
    New Coder
    Join Date
    Dec 2011
    Posts
    11
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Lerura,

    Thanks for your quick reply, let me show you my code now, and maybe you can tell me what i'm doing wrong?
    Also is that code just html? or is it something like jscript that I need to declare in the heading?
    Please excuse my nubbi-ness, I am still new to html and css.

    Code:
    <body>
          <div id="foreground">
          <ul><li><a href="http://krystlekleen.batcave.net/testpages/index.html">Home</a></li><li><a href="#contact">Contact Me</a></li></ul>
          <img src="logo.png"></div>
    
          <div id="scrlbx" style="width:800px;overflow:scroll; border:2px groove #6600CC" align:center;>
          <script>
    function ChangeImg(Img){
    document.getElementById('LargeImage').src==Img;
    </script>
    <table>
    <tr><td><img src="http://farm8.staticflickr.com/7230/7343927372_24e65d87ed_m.jpg" width="240px" height="180px"
     onmouseover="ChangeImg('http://farm8.staticflickr.com/7230/7343927372_24e65d87ed_z.jpg');"></td><td>Description and price here</td></tr>

  • #4
    Regular Coder Lerura's Avatar
    Join Date
    Aug 2005
    Location
    Denmark
    Posts
    881
    Thanks
    0
    Thanked 115 Times in 114 Posts
    you need to place <img id="LargeImage" src="blank.gif">

    This tag is the one that contains the large image.

    Where you place it is up to you!

    You can change blank.gif to what ever you want, as it is only a temporary, virtually invisible image.

  • #5
    New Coder
    Join Date
    Dec 2011
    Posts
    11
    Thanks
    2
    Thanked 0 Times in 0 Posts
    I see what you are saying, so than I am assuming that I need to make a seperate script tag for each picture I want to do this with and label them largeimg2 and so on. Am I right?

  • #6
    Regular Coder Lerura's Avatar
    Join Date
    Aug 2005
    Location
    Denmark
    Posts
    881
    Thanks
    0
    Thanked 115 Times in 114 Posts
    You only need 1 script tag.
    All the thumbnail tags use the same function, which makes #LargeImage change to the image defined in the passed value.

    No matter how many thumbnails you have, you will still only need 1 script/function and 1 tag for all the large images.

    In my example above: When you hover the first thumbnail, the function will be run with Image1.png as the passed value, hovering the second will pass Image2.png as the value, and so on.


  •  

    Posting Permissions

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