www.webdeveloper.com
Results 1 to 15 of 15

Thread: mouse over links - show images

Hybrid View

  1. #1
    Join Date
    Jan 2012
    Location
    Manassas, VA
    Posts
    5

    mouse over links - show images

    Hi, I am sick of my cheap looking website, but since I don't have money to pay someone, I am going to use html code to build it myself. So far, I've got my home page set up the way I like it, complete with a few anchor tags/links that (when hovered over) turn bold, increase font size, and change color. Really cool looking! They are bundled together and I have four "classes", each "class" changes it's own color or font when moused over.

    I want people to be able to hover over my links, without loseing their properties, and for each link hovered, I would like to have an image display (and then not display when the mouse is not hovering), and I would need to adjust the image dimentions and place it in a specific area as well.

    I found a code that (kind of) works, but it removes my link properties, so I won't be using it. I'm starting to get a head ache.

    Does anyone know a way to mouse over links (and I have a few to hover over) and show images (specific image for each link)and still keep my links.

    Any advice (or a post I didn't find) will be greatly appreciated.

  2. #2
    Join Date
    Dec 2011
    Posts
    163
    maybe something simply along the lines of this...

    HTML Code:
    <a href="#" onmouseover="displayImage();" onmouseout="nodisplayImage();"><img src="image.jpg" /></a>
    with some simple javascript calling a function that just displays the image and then another script that takes the image off.

    I am sure there is a simpler way of doing this, though...

  3. #3
    Join Date
    Jan 2012
    Location
    United States
    Posts
    15
    Here's a complete page that does something like you want, I think:
    Code:
    <!DOCTYPE html>
    <html>
    <head>
    <title>Test Page</title>
    
    <script>
    
    var img;
    
    window.onload = function ()
       {
       img = document.getElementById ("img");
       }
    
    </script>
    
    </head>
    <body>
    <h2>Test Page</h2>
    
    <p>
       <img style="visibility:hidden;" id="img" src="earth.jpg">
    </p>
    <p>
       <a href="target1" onmouseover="img.style.visibility='visible'; img.src='earth.jpg';" onmouseout="img.style.visibility='hidden';">link 1</a>
    </p>
    
    </body>
    </html>

  4. #4
    Join Date
    Jan 2012
    Location
    Manassas, VA
    Posts
    5
    Thank you so much!
    I looked at the examples submitted, and went with this one - I tinkered with it and came up with something I can use -----YAYYY, it does what I want it to do!!!.
    NOW (since I'm not real good at this), would you be so kind to clean it up if it needs to be? ....and Thanks!



    Code:
     <!DOCTYPE html>
    <html>
    <head>
    <title>Test Page</title>
    
    <script>
    
    var img;
    
    window.onload = function ()
       {
       img = document.getElementById ("img");
       }
    
    </script>
    
    </head>
    <body>
    <h2>Test Page</h2>
    
    <p>
       <img style= "position:absolute;TOP:35px; LEFT:900px;visibility:hidden;" id="img" src="http://www.grand.canyon.national-park.com/images/grac.jpg" width="200" height="200" alt="my dog"/>
       <img style="visibility:hidden;" id="img" src="http://upload.wikimedia.org/wikipedia/commons/thumb/9/90/Grand_Canyon,_from_about_Mohawk_to_Whitmore_Canyons,_below_the_Uinkaret_Volcanic_Field.jpg/220px-Grand_Canyon,_from_about_Mohawk_to_Whitmore_Canyons,_below_the_Uinkaret_Volcanic_Field.jpg">
    
     <img style= "position:absolute;TOP:35px; LEFT:900px;visibility:hidden;" id="img" src="http://www.grand.canyon.national-park.com/images/grac.jpg" width="200" height="200" alt="my dog"/>
       <img style="visibility:hidden;" id="img" src="http://upload.wikimedia.org/wikipedia/commons/thumb/9/90/Grand_Canyon,_from_about_Mohawk_to_Whitmore_Canyons,_below_the_Uinkaret_Volcanic_Field.jpg/220px-Grand_Canyon,_from_about_Mohawk_to_Whitmore_Canyons,_below_the_Uinkaret_Volcanic_Field.jpg">
    
    
    </p>
    <p>
    <a href="target1" onmouseover="img.style.visibility='visible'; img.src=' http://www.lawnservicema.com/tree.jpg'" onmouseout="img.style.visibility='hidden';">Tree</a>
    
    <a href="target2" onmouseover="img.style.visibility='visible'; img.src=' http://images.nationalgeographic.com/wpf/media-live/photos/000/005/cache/grizzly-bear_566_600x450.jpg';" onmouseout="img.style.visibility='hidden';">Bear</a>
    
    <a href="target3" class="two"onmouseover="img.style.visibility='visible'; img.src=' http://www.redbudfarms.com/wp-content/uploads/2011/01/cone-flowers-preview.jpg'" onmouseout="img.style.visibility='hidden';">Flowers</a>
    
    <a href="target4"class="one" onmouseover="img.style.visibility='visible'; img.src=' http://upload.wikimedia.org/wikipedia/commons/thumb/9/90/Grand_Canyon,_from_about_Mohawk_to_Whitmore_Canyons,_below_the_Uinkaret_Volcanic_Field.jpg/220px-Grand_Canyon,_from_about_Mohawk_to_Whitmore_Canyons,_below_the_Uinkaret_Volcanic_Field.jpgpg';" onmouseout="img.style.visibility='hidden';">Canyon</a>
    
    
    <style type="text/css"> 
    #Style { 
    position:absolute;TOP:35px; LEFT:900px; WIDTH:50px; HEIGHT:50px;visibility:hidden; 
    border:solid 1px #CCC; 
    padding:5px; 
    } 
    
    
    A.one:link { font-size:15pt; COLOR: red; TEXT-DECORATION: none; font-size: }
    A.one:visited { COLOR: black; TEXT-DECORATION: none; font-weight: normal }
    A.one:active { COLOR: black; TEXT-DECORATION: none }
    A.one:hover { color: blue; text-decoration: underline; background: #33FFFF;font-size:19pt }
    
    A.two:link { font-size:15pt; COLOR: green; TEXT-DECORATION: none; font-size: }
    A.two:visited { COLOR: black; TEXT-DECORATION: none; font-weight: normal }
    A.two:active { COLOR: black; TEXT-DECORATION: none }
    A.two:hover { color: black; text-decoration: underline; background: yellow;font-size:19pt }
    
    
    
    </A>
    
    </style> 
    
    
    
    </p>
    
    </body>
    </html>

  5. #5
    Join Date
    Nov 2012
    Posts
    2
    Hi dude, this coding is not working for me in google chorme... so i need solution for it as early as possible...

  6. #6
    Join Date
    Dec 2011
    Posts
    163
    You cannot have multiple ID's on the same page, use a class.

  7. #7
    Join Date
    Jan 2012
    Location
    United States
    Posts
    15
    Hi Mikethepainter,
    Looks like you're getting there! Just a few comments. First, you seem to have some extraneous code, such as the duplicated image (same ID and everything -- just delete one of them) plus a block of styles with the #Style selector, which aren't applied to anything.
    Also, the first time you rollover the links there is a big delay as the images load. To prevent this, you can preload them in a script somewhere in the <head>. For each image, just create an <img> element and set its 'src' property, as follows
    Code:
    document.createElement ("img").src = [here put the URL of the image];
    You don't need to save the element node that's returned by createElement(). Simply creating it preloads the image and that's all you want.

  8. #8
    Join Date
    Jan 2012
    Location
    Manassas, VA
    Posts
    5
    Quote Originally Posted by mjy View Post
    Hi Mikethepainter,
    Looks like you're getting there! Just a few comments. First, you seem to have some extraneous code, such as the duplicated image (same ID and everything -- just delete one of them) plus a block of styles with the #Style selector, which aren't applied to anything.
    Also, the first time you rollover the links there is a big delay as the images load. To prevent this, you can preload them in a script somewhere in the <head>. For each image, just create an <img> element and set its 'src' property, as follows
    Code:
    document.createElement ("img").src = [here put the URL of the image];
    You don't need to save the element node that's returned by createElement(). Simply creating it preloads the image and that's all you want.
    Yes, I found the duplicates while building onto it, and deleted some other coding that didn't appear to be doing anything anyways. (Keep in mind, I have no idea what I'm doing), but I am thrilled that the coding I have is still working. I am using a real time html edit web page and watching what happens to my work as it is done. It's fun, but it's not as easy as it looks. - Thanks for the response!

  9. #9
    Join Date
    Jan 2012
    Location
    United States
    Posts
    15
    Don't forget to preload the images. Once you've shown the images in your own browser, they'll be cached and will display fast, so it's easy to forget that the first time other users hover over a link there might be a long delay before the image appears.
    Author of the Kindle book JavaScript : Just the Basics - A Primer for the Complete Beginner. Learn JavaScript for the price of a fancy coffee drink.

  10. #10
    Join Date
    Jan 2012
    Location
    Manassas, VA
    Posts
    5
    Code:
    <script>  
    <!-- - -------<<<<<<<<<<<<<<<<<<<<<<<<<<<<<< I don't know what this  "Var img" procedure is, but when deleted, nothing works -->
    var img;
    
    window.onload = function ()
       {
       img = document.getElementById ("img");
       }
    
    </script>
    
    <h2></h2>
    <!-- <<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<This next line is important. I need all images to show up at these coordinates, and in this size, 
    HOWEVER, I don't need the the Grand Canyon stuff, and I can actually see it load when I hover - then it's gone....do I need the "alt = " " for future use? -->
    
     <img style= "position:absolute;TOP:85px; LEFT:785px;visibility:hidden;" id="img" src="http://www.grand.canyon.national-park.com/images/grac.jpg" width="500" height="350" alt="my dog"/>
       <img style="visibility:hidden;" id="img"  
    
    </A>
    
    </style> 
    
    <style type="text/css"> <!--- -----<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<This formats my links that I hover over -->
    A.one:link { COLOR: #0B0B61; TEXT-DECORATION: none; font-size: }
    A.one:visited { COLOR: #0B0B61; TEXT-DECORATION: none; font-weight: normal }
    A.one:active { COLOR: black; TEXT-DECORATION: none }
    A.one:hover { color: white; text-decoration: underline; background: #990000 ;font-size:13pt }</style></font>
    
    
    
    <!--- -----------------------------------------------<<<<<<<<<<<<<<<<<<<<<This next part is the stuff that's supposed to load when I hover, I filled in "Target1, Target2, ...but not sure why. I think I might need it, but not sure how it works.
     -->
    <a href="target1" class="one"onmouseover="img.style.visibility='visible'; img.src=' http://0.tqn.com/d/goafrica/1/0/Y/Q/IMG_1592.JPG'" onmouseout="img.style.visibility='hidden';">Elephant,</a>
    
    <a href="target2"class="one" onmouseover="img.style.visibility='visible'; img.src=' http://static.ddmcdn.com/gif/willow/hummingbird-info0.gif'" onmouseout="img.style.visibility='hidden';">humming bird,</a>

  11. #11
    Join Date
    Jan 2012
    Location
    United States
    Posts
    15
    The "var img; ... window.onload..." code is where the global variable 'img' gets declared and initialized. You can see 'img' used later in the 'onmouseover' and 'onmouseout' code.

    I got in the habit of including alt="" so that the page will validate at W3C. It's not necessary. 'alt' is intended to provide alternative text if the browser can't display the image (for example, it can't find it).

    Target1 and Target2 should be filled in with the URLs of the link targets.
    Last edited by mjy; 01-24-2012 at 08:16 PM.
    Author of the Kindle book JavaScript : Just the Basics - A Primer for the Complete Beginner. Learn JavaScript for the price of a fancy coffee drink.

  12. #12
    Join Date
    Jan 2012
    Location
    Manassas, VA
    Posts
    5
    Thanks for your input, where exactly would the preload image code go?

  13. #13
    Join Date
    Jan 2012
    Location
    United States
    Posts
    15
    Quote Originally Posted by Mikethepainter View Post
    Thanks for your input, where exactly would the preload image code go?
    Just put it in a <script> element in the HEAD. BTW, an alternative way to preload an image that you'll see a lot is to use the Image() constructor, so the following two lines of JavaScript are equivalent:
    Code:
    <head>
    <script>
    
    // use this:
    document.createElement("img").src = "image_URL";
    
    // OR this:
    (new Image()).src = "image_URL";
    
    </script>
    </head>
    Author of the Kindle book JavaScript : Just the Basics - A Primer for the Complete Beginner. Learn JavaScript for the price of a fancy coffee drink.

  14. #14
    Join Date
    Apr 2012
    Posts
    1
    Hi, it seems that this code is not working on Chrome, anyone know why?

  15. #15
    Join Date
    Nov 2012
    Posts
    2
    for me too not working..did you find d solution??
    If so mail to sriram.santhas@gmail.com

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