SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Addict
    Join Date
    May 2003
    Location
    nyc
    Posts
    363
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    optimizing rollovers script

    hello all,

    i have the following javascript code:

    <!-- hide from browsers that dont support js
    if(document.images)
    {
    about_over = new Image
    about_over.src = "images/btn_about_r.gif"
    about_out = new Image
    about_out.src = "images/btn_about.gif"

    success_over = new Image
    success_over.src = "images/btn_success_r.gif"
    success_out = new Image
    success_out.src = "images/btn_success.gif"
    }
    // -->

    and i am using it from within the html code in a standard way:

    <a href="about.php" onMouseOver="document.about.src='images/btn_about_r.gif'" onMouseOut="document.about.src='images/btn_about.gif'"><img src="images/btn_about.gif" name="about" width="56" height="23" alt=""></a></td>

    question: i don't know much about javascript. i know that the script above preloads the images but i don't understand why the images reference names ( "about_over", "about_out", etc) do not get utilized within html code. it seems to me that they should be used.

    if you can help me optimize this code or assure me that it's good, that would be great.feel free to show me a completely different but better way of doing the rollovers.

    thanks,
    james

  2. #2
    SitePoint Addict
    Join Date
    Aug 2001
    Location
    Los Angeles, CA
    Posts
    346
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Here you go (this script is much simpler/faster):

    Code:
    <HTML>
    <HEAD>
    <Script language="JavaScript">
    function changeImage(imgID, imgName)
    {
    var PreLoadImg = new Image();
    PreLoadImg.src = "images/"+imgName+".jpg";
    var imgObj = document.getElementById(imgID);
    imgObj.src = "images/"+imgName+".jpg";
    }
    </script>
    </HEAD>
    <BODY>
    <a href="page.html" OnMouseOut="changeImage('swap1','mouse_out')" OnMouseOver="changeImage('swap1','mouse_over')"> 
    <img src="images/mouse_out.jpg" id="swap1" border="0"></a>
    </BODY>
    </HTML>

  3. #3
    SitePoint Wizard silver trophy
    Join Date
    May 2003
    Posts
    1,843
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Good point! Many rollover scripts use the variable name of the preload object in the rollover code itself, usually involving tacking on 'over' and 'out' ('on', 'off') to the base image name. There's nothing functionally wrong with the code you posted - it works - but it creates multiple preload objects unnecessarily - since it's just using them to generate server requests, one could be used over and over - and it ignores the image url already stored in the new Image.src property and recodes it in the HTML.
    Code:
    {
    var about_over = new Image();
    about_over.src = "images/btn_about_r.gif";
    var about_out = new Image();
    about_out.src = "images/btn_about.gif";
    
    var success_over = new Image();
    success_over.src = "images/btn_success_r.gif";
    var success_out = new Image();
    success_out.src = "images/btn_success.gif";
    }
    
    function rollem(which, over) {
    document[which].src = window[which + (over) ? '_over' : '_out'].src;
    }
    .............................................................................
    <a href="about.php" onMouseOver="rollem('about',true)" onMouseOut="rollem('about')"><img src="images/btn_about.gif" name="about" width="56" height="23" alt=""></a></td>
    The function evaluates to:

    document['about'] // the image object in the page
    .src = // we're setting its .src property
    window[ // allows you to reference global variables as strings
    'about' + (over) ? '_over' : '_out' // append the first if 'over' is true, otherwise the second
    ].src // ...and get the preload object's src string

    Other ways, of course, as well....

  4. #4
    SitePoint Addict
    Join Date
    May 2003
    Location
    nyc
    Posts
    363
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    great,

    thanks a lot guys. *very* helpful

    all the best,
    james


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
  •