javascript rollover problem

ggordie · 24-Aug-2005, 08:34 PM #1

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>

DrP · 25-Aug-2005, 03:06 AM #2

Dont' you need the top line (img src...) within the link tags?
C

ggordie · 25-Aug-2005, 06:11 PM #3

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

DrP · 26-Aug-2005, 10:29 AM #4

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>

ggordie · 26-Aug-2005, 02:48 PM #5

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.

DrP · 26-Aug-2005, 03:35 PM #6

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.

Shadow2531 · 27-Aug-2005, 06:34 AM #7

@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 Code:

<!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">
            //<!&#91;CDATA&#91;
            window.onload = function() {
                var tp = document.getElementById("top");
                var a = document.getElementById("links").getElementsByTagName("a");
                for (var i = 0; i < a.length; i++) {
                    a&#91;i&#93;.onmouseover = function() {
                        tp.src = "http://www.google.com/intl/en/images/logo.gif";
                    };
                    a&#91;i&#93;.onmouseout = function() {
                        tp.src = "http://www.geocities.com/havoc_magazine/images/logo_hm.PNG";
                    };
                }
            };
            //&#93;&#93;>
        </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.)

Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)

Search
Search for:

javascript rollover problem

Find the solution to your computer problem!

Find the solution to your
computer problem!