Advertisement

There's no such thing as a stupid question, but they're the easiest to answer.
Login
Search

Advertisement

Software Development Software Development
Search Search
Search for:
Tech Support Guy > > >

javascript rollover problem


(!)

ggordie's Avatar
ggordie ggordie is offline
Member with 143 posts.
THREAD STARTER
 
Join Date: Jul 2005
Location: palm harbor
Experience: Intermediate
24-Aug-2005, 07:34 PM #1
Angry javascript rollover problem
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's Avatar
DrP DrP is offline DrP has a Profile Picture
Computer Specs
Member with 734 posts.
 
Join Date: Jul 2005
Location: Norwich, UK
25-Aug-2005, 02:06 AM #2
Dont' you need the top line (img src...) within the link tags?
C
ggordie's Avatar
ggordie ggordie is offline
Member with 143 posts.
THREAD STARTER
 
Join Date: Jul 2005
Location: palm harbor
Experience: Intermediate
25-Aug-2005, 05: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's Avatar
DrP DrP is offline DrP has a Profile Picture
Computer Specs
Member with 734 posts.
 
Join Date: Jul 2005
Location: Norwich, UK
26-Aug-2005, 09: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's Avatar
ggordie ggordie is offline
Member with 143 posts.
THREAD STARTER
 
Join Date: Jul 2005
Location: palm harbor
Experience: Intermediate
26-Aug-2005, 01: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's Avatar
DrP DrP is offline DrP has a Profile Picture
Computer Specs
Member with 734 posts.
 
Join Date: Jul 2005
Location: Norwich, UK
26-Aug-2005, 02: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's Avatar
Senior Member with 2,636 posts.
 
Join Date: Apr 2001
27-Aug-2005, 05: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.)
As Seen On

BBC, Reader's Digest, PC Magazine, Today Show, Money Magazine
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.


(clock)
THIS THREAD HAS EXPIRED.
Are you having the same problem? We have volunteers ready to answer your question, but first you'll have to join for free. Need help getting started? Check out our Welcome Guide.

Search Tech Support Guy

Find the solution to your
computer problem!




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


WELCOME
You Are Using: Server ID
Trusted Website Back to the Top ↑

Content Relevant URLs by vBSEO 3.3.2