1. Computer problem? Tech Support Guy is completely free -- paid for by advertisers and donations. Click here to join today! If you're new to Tech Support Guy, we highly recommend that you visit our Guide for New Members.

javascript rollover problem

Discussion in 'Software Development' started by ggordie, Aug 24, 2005.

Thread Status:
Not open for further replies.
Advertisement
  1. ggordie

    ggordie Thread Starter

    Joined:
    Jul 16, 2005
    Messages:
    143
    i don't know what i'm missing. someone please hep!!

    Code:
    <img src="http://www.geocities.com/havoc_magazine/images/logo_hm.PNG" alt="Havoc Mag - Main Logo." name="logo_hm">
    <br>
    
    <a href="http://www.geocities.com/havoc_magazine/index1.html" onMouseOver="window.document.logo_hm.src='ihada2.GIF';"
    onMouseOut="window.document.logo_hm.src='http://www.geocities.com/havoc_magazine/images/logo_hm.PNG';"><img src="http://www.geocities.com/havoc_magazine/images/button_home.PNG"></a><br>
    <br>
    
    <a href="http://www.geocities.com/havoc_magazine/subscribe.html" onMouseOver="window.document.logo_hm.src='ihada2.GIF';"
    onMouseOut="window.document.logo_hm.src='http://www.geocities.com/havoc_magazine/images/logo_hm.PNG';"><img src="http://www.geocities.com/havoc_magazine/images/button_subscribe.png"></a><br>
     
  2. DrP

    DrP

    Joined:
    Jul 23, 2005
    Messages:
    739
    Dont' you need the top line (img src...) within the link tags?
    C
     
  3. ggordie

    ggordie Thread Starter

    Joined:
    Jul 16, 2005
    Messages:
    143
    <a href="http://www.geocities.com/havoc_magazine/index1.html" onMouseOver="window.document.logo_hm.src='ihada2.GIF';"
    onMouseOut="window.document.logo_hm.src='http://www.geocities.com/havoc_magazine/images/logo_hm.PNG';">

    if thats not what you mean then i'm lost.. thx.
     
  4. DrP

    DrP

    Joined:
    Jul 23, 2005
    Messages:
    739
    Here's one of mine:
    <td><a href="index.html"
    onmouseover="document.images.home.src='images/home_roll.gif';"
    onmouseout="document.images.home.src='images/home.gif'">
    <img src="images/home.gif" alt="home" title="Return to the homepage"
    width="71" height="43" id="home"/></a></td>
     
  5. ggordie

    ggordie Thread Starter

    Joined:
    Jul 16, 2005
    Messages:
    143
    2 differences... you used id as opposed to name. also, your code flips the picture that your mouse touches, mine flips the picture at the top of the page instead when the mouse goes over a picture at the middle of the page.
     
  6. DrP

    DrP

    Joined:
    Jul 23, 2005
    Messages:
    739
    Give an id="topPictureID" to the image at the top of your window.
    Where I have 'document.images.home.src' in the mouseout and mouseover tags change that to 'document.images.topPictureID.src' and remove the id tag from the picture in the middle of the page. That's about my limit I reckon. Hope it helps, soz if it doesn't.
    The 'id' tag is supposed to have replaced the 'name' tag, I think.
     
  7. Shadow2531

    Shadow2531

    Joined:
    Apr 30, 2001
    Messages:
    2,636
    @ggordie

    From you orginal post, it looks like you want to flip to the same picture for both links. If so, here's an example.

    HTML:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" lang="en-us" xml:lang="en-us">
        <head>
            <title>mouseover image change</title>
            <meta http-equiv="content-type" content="text/html;charset=utf-8" />
            <style type="text/css">
                html {
                    background: #fff;
                    color: #000;
                    font-size: 1em;
                }
                body {
                    margin: 0;
                    padding: 8px;
                }
                img {
                    border: 0;
                }
                img#top {
                    width: 383px;
                    height: 74px;
                }
                ul#links {
                    list-style: none;
                    padding: 0;
                    margin: 10px 0 0 0;
                }
                ul#links li {
                    padding: 0;
                    margin: 0;
                }
            </style>
            <script type="text/javascript">
                //<![CDATA[
                window.onload = function() {
                    var tp = document.getElementById("top");
                    var a = document.getElementById("links").getElementsByTagName("a");
                    for (var i = 0; i < a.length; i++) {
                        a[i].onmouseover = function() {
                            tp.src = "http://www.google.com/intl/en/images/logo.gif";
                        };
                        a[i].onmouseout = function() {
                            tp.src = "http://www.geocities.com/havoc_magazine/images/logo_hm.PNG";
                        };
                    }
                };
                //]]>
            </script>
        </head>
        <body>
            <div><img id="top" src="http://www.geocities.com/havoc_magazine/images/logo_hm.PNG" alt="Havoc Mag - Main Logo." /></div>
            <ul id="links">
                <li><a href="http://www.geocities.com/havoc_magazine/index1.html"><img src="http://www.geocities.com/havoc_magazine/images/button_home.PNG" alt=""/></a></li>
                <li><a href="http://www.geocities.com/havoc_magazine/subscribe.html"><img src="http://www.geocities.com/havoc_magazine/images/button_subscribe.png" alt="" /></a></li>
            </ul>
        </body>
    </html>
    
    
    (I used oldschool events for poor IE's sake.)
     
  8. Sponsor

As Seen On
As Seen On...

Welcome to Tech Support Guy!

Are you looking for the solution to your computer problem? Join our site today to ask your question. This site is completely free -- paid for by advertisers and donations.

If you're not already familiar with forums, watch our Welcome Guide to get started.

Join over 733,556 other people just like you!

Loading...
Thread Status:
Not open for further replies.

Short URL to this thread: https://techguy.org/393309