SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    Bananas contain Zinc fonzerelli_79's Avatar
    Join Date
    Oct 2001
    Location
    Scotland
    Posts
    816
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Little error with image rollover

    Im not sure why this isnt working - i think its a case of cant see the woods for the trees

    anyhoo heres what im getting problems with

    the javascript is linked to by

    Code:
    <SCRIPT SRC="js/menu_rollover.js" LANGUAGE="JAVASCRIPT" TYPE="TEXT/JAVASCRIPT"></SCRIPT>
    heres the javascript

    Code:
    <!-------Hide script from old browsers
    
    if (document.images)  {
    
    home_off = new Image
    home_on = new Image
    forums_off = new Image
    forums_on = new Image
    reviews_off = new Image
    reviews_on = new Image
    articles_off = new Image
    articles_on = new Image
    links_off = new Image
    links_on = new Image
    
    
    home_off.src = "images/home.gif"
    home_on.src = "images/home_roll.gif"
    forums_off.src = "images/forums.gif"
    forums_on.src = "images/forums_roll.gif"
    reviews_off.src = "images/reviews.gif"
    reviews_on.src = "images/reviews_roll.gif"
    articles_off.src = "images/articles.gif"
    articles_on.src = "images/articles_roll.gif"
    links_off.src = "images/links.gif"
    links_on.src = "images/links_roll.gif"
    
    }
    
    else {
    
    home_off=""
    home_on=""
    forums_off=""
    forums_on=""
    reviews_off=""
    reviews_on=""
    articles_off=""
    articles_on=""
    links_off=""
    links_on=""
    
    document.roll=""
    
    }
    
    // End hiding script from old browsers --->
    and in the body of my page ive used

    Code:
    <center><a href="index.php" onMouseover="document.home-roll.src=home_on.src" onMouseout="document.home-roll.src=home_off.src"><img src="images/home.gif" name="home-roll" width="80" height="50" alt="Visit the Home page" border="0"><br><font color="#000000">Home</font></a></center>
    any help with this would be greatly appreciated and a pot of gold to the man that finds out that this is a silly error

  2. #2
    SitePoint Zealot
    Join Date
    Jul 2002
    Posts
    168
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    In the script, this is correct syntax:

    home_off = new Image();
    home_on = new Image();

    In html, try this:
    Code:
    <center><a href="index.php" onMouseover="document.images.home_off.src='images/home_roll.gif'" onMouseout="document.images.home_off.src='images/home.gif'"><img src="images/home.gif" name="home_off" width="80" height="50" alt="Visit the Home page" border="0"><br><font color="#000000">Home</font></a></center>
    (Ps: If you'r using an external javascript, you don't need to "hide from old browsers", only if the script is in the html file.)

  3. #3
    Bananas contain Zinc fonzerelli_79's Avatar
    Join Date
    Oct 2001
    Location
    Scotland
    Posts
    816
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    thanks but for some reason it still doesnt work

    i dont think that i have to link to images/home_roll.gif in the body of the text as the whole point of the javascript is to pre load the image

    any other ideas what it could be??


  4. #4
    SitePoint Zealot
    Join Date
    Jul 2002
    Posts
    168
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I tested the suggested changes before posting and they worked for me...
    Nevertheless, on closer inspection it seems like the only problem was the naming of "home-roll".
    So try this:
    Code:
    <center><a href="index.php" onMouseover="document.home_roll.src=home_on.src" onMouseout="document.home_roll.src=home_off.src"><img src="images/home.gif" name="home_roll" width="80" height="50" alt="Visit the Home page" border="0"><br><font color="#000000">Home</font></a></center>
    Here's an example using the above line,
    but for simplicities sake only used one link,
    put the javascript inside the html and got rid of the directory's.
    So home.gif and home_roll.gif need to be in the same directory as the html file.
    The script's only function here is to preload the images.
    Code:
    <HTML>
    <HEAD>
    <SCRIPT>
    var home_off = new Image();
        home_off.src = "home.gif";
    var home_on = new Image();
        home_on.src = "home_roll.gif";
    </SCRIPT>
    </HEAD>
    <BODY>
    <center><a href="index.php" onMouseover="document.home_roll.src=home_on.src" onMouseout="document.home_roll.src=home_off.src"><img src="home.gif" name="home_roll" width="80" height="50" alt="Visit the Home page" border="0"><br><font color="#000000">Home</font></a></center>
    </BODY>
    </HTML>
    Of course there are different ways for doing a rollover.
    If you don't want to set the source in the anchor tag use functions, for example:
    Code:
    <HTML>
    <HEAD>
    <SCRIPT>
    var home_off = new Image();
        home_off.src = "home.gif";
    var home_on = new Image();
        home_on.src = "home_roll.gif";
    function swap1(){document.images.home_roll.src = home_on.src}
    function swap2(){document.images.home_roll.src = home_off.src}
    </SCRIPT>
    </HEAD>
    <BODY>
    <center><a href="index.php" onMouseover="swap1()" onMouseout="swap2()"><img src="home.gif" name="home_roll" width="80" height="50" alt="Visit the Home page" border="0"><br><font color="#000000">Home</font></a></center>
    </BODY>
    </HTML>

  5. #5
    Bananas contain Zinc fonzerelli_79's Avatar
    Join Date
    Oct 2001
    Location
    Scotland
    Posts
    816
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    thanks a bunch mate

    out of the three points in the last post i tried the - to the _ and it worked - js is a funny thing

    oh well

    its working fine now - thanks again for all your help


Bookmarks

Posting Permissions

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