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 3 of 3
  1. #1
    New Coder
    Join Date
    Apr 2006
    Posts
    44
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Rollovers working in all browsers but IE

    Hi,
    My navigation buttons have rollovers and are working fine in FF, Safari, Netscape, Camino but not in IE.
    Not only that but there are some weird dashes appearing between some of the buttons. I do notice that the dashes disappear when I hover the cursor over some of the buttons. Can't figure it out. I'm a fledgling javascript programmer, extremely fledling...

    http://www.potomitan.net

    code:

    <a href="index.html" onmouseover="document.home.src='images/navbuttons/homehover.gif';" onmouseout="document.home.src='images/navbuttons/homeorig.gif';">
    <img class="redbuttons" src="images/navbuttons/homeorig.gif" id="home" alt="home button">
    </a>
    <a href="story.html" onmouseover="document.story.src='images/navbuttons/storyhover.gif';" onmouseout="document.story.src='images/navbuttons/storyorig.gif';">
    <img class="redbuttons" src="images/navbuttons/storyorig.gif" id="story" alt="story button">
    </a>
    <a href="background.html" onmouseover="document.background.src='images/navbuttons/backgroundhover.gif';" onmouseout="document.background.src='images/navbuttons/backgroundorig.gif';">
    <img class="redbuttons" src="images/navbuttons/backgroundorig.gif" id="background" alt="background button">
    </a>
    <a href="filmmakers.html" onmouseover="document.filmmakers.src='images/navbuttons/filmmakershover.gif';" onmouseout="document.filmmakers.src='images/navbuttons/filmmakersorig.gif';">
    <img class="redbuttons" src="images/navbuttons/filmmakersorig.gif" id="filmmakers" alt="filmmakers button">
    </a>
    <img src="images/maroonspacer.png" height="35" width="93" >
    <a href="takeaction.html" onmouseover="document.takeaction.src='images/navbuttons/takeactionhover.gif';" onmouseout="document.takeaction.src='images/navbuttons/takeactionorig.gif';">
    <img class="redbuttons" src="images/navbuttons/takeactionorig.gif" id="takeaction" alt="take action button">
    </a>

    </div>
    <div id="navbargreen">

    <a href="trailer.html" onmouseover="document.trailer.src='images/navbuttons/trailerhover.gif';" onmouseout="document.trailer.src='images/navbuttons/trailerorig.gif';">

    <img src="images/navbuttons/trailerorig.gif" id="trailer" alt="trailer button">
    </a>
    <a href="screenings.html" onmouseover="document.screenings.src='images/navbuttons/screeningshover.gif';" onmouseout="document.screenings.src='images/navbuttons/screeningsorig.gif';">

    <img src="images/navbuttons/screeningsorig.gif" id="screenings" alt="screenings button">
    </a>
    <a href="press.html" onmouseover="document.press.src='images/navbuttons/presshover.gif';" onmouseout="document.press.src='images/navbuttons/pressorig.gif';">

    <img src="images/navbuttons/pressorig.gif" id="press" alt="press button"></a>
    <a href="contact.html" onmouseover="document.contact.src='images/navbuttons/contacthover.gif';" onmouseout="document.contact.src='images/navbuttons/contactorig.gif';">

    <img src="images/navbuttons/contactorig.gif" id="contact" alt="contact button"> </a>





    Thanks,
    Alicia

  • #2
    Banned
    Join Date
    May 2006
    Location
    England
    Posts
    664
    Thanks
    0
    Thanked 84 Times in 84 Posts
    Quote Originally Posted by laughhearty
    Hi,
    My navigation buttons have rollovers and are working fine in FF, Safari, Netscape, Camino but not in IE.
    Not only that but there are some weird dashes appearing between some of the buttons. I do notice that the dashes disappear when I hover the cursor over some of the buttons. Can't figure it out. I'm a fledgling javascript programmer, extremely fledling...

    http://www.potomitan.net
    I'm surprised that they work anywhere with that syntax. Ideally you need to change two things. First, images are best referenced via the document.images collection, so as an example your first link should read:
    Code:
    <a href="index.html" onmouseover="document.images.home.src='images/navbuttons/homehover.gif';" onmouseout="document.images.home.src='images/navbuttons/homeorig.gif';">
    For this to work, you must change "id=" to "name=" in all the <img> tags. That is the simplest fix to get the rollovers working in all browsers, however without using preloading techniques, they may be slow to respond when viewed on slow connections.

  • #3
    Senior Coder
    Join Date
    Feb 2006
    Location
    USA
    Posts
    1,013
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Learn CSS. | SSI | PHP includes | X/HTML Validator | CSS validator | Dynamic Site Solutions
    Java != JavaScript && JScript != JavaScript
    Design/program for Firefox (and/or Opera), apply fixes for IE, not the other way around.


  •  

    Posting Permissions

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