Fast Loading rollover buttons?

Discussion in 'HTML & Website Design' started by itsall3, Jun 29, 2006.

  1. #1
    Does anyone know how to make nice fast rollover buttons?


    Look how quickly these buttons load:

    http://www.microsoft.com/windowsvista/experiences/default.mspx

    these buttons:

    http://www.newgrounds.com/

    Both work stright away, as soon as you hover, theres no loading.

    Now checkout mine:

    http://www.itsall3.com/test <-- the buttons are soooo slow to load

    the only way i can get it to work is how i do it on my current design, and that is have the rollover buttons in flash:

    http://www.itsall3.com/

    but i'd prefer not to do it like that.

    Any tips would be great.

    Regards.
     
    itsall3, Jun 29, 2006 IP
  2. intrinzik

    intrinzik Peon

    Messages:
    360
    Likes Received:
    11
    Best Answers:
    0
    Trophy Points:
    0
    #2
    They look just fine to me...?
     
    intrinzik, Jun 29, 2006 IP
  3. sarahk

    sarahk iTamer Staff

    Messages:
    28,811
    Likes Received:
    4,535
    Best Answers:
    123
    Trophy Points:
    665
    #3
    That is scary stuff. Go straight to www.alistapart.com and learn how to do it the css way.
     
    sarahk, Jun 29, 2006 IP
  4. xeno

    xeno Peon

    Messages:
    788
    Likes Received:
    22
    Best Answers:
    0
    Trophy Points:
    0
    #4
    Seem ok to me too. It's all about the javascript code that is used. CSS is way faster.
     
    xeno, Jun 29, 2006 IP
  5. brian394

    brian394 Well-Known Member

    Messages:
    226
    Likes Received:
    15
    Best Answers:
    0
    Trophy Points:
    108
    #5
    The reason they appear slow is because you're not pre-loading your images. In other words, the mouse over ("light up") images are only being downloaded at the exact moment your mouse is moving over them. That is what causes the appearance of being "slow". If the images were already pre-loaded in the browser's memory you wouldn't see that slight flicker effect, the images would load up immeadiately. But you might be thinking, "I'm using CSS, I don't need to worry about pre-loading, right?". Well, sort of. You don't have to worry about pre-loading if the "mouse over" class name ("butVid1" for instance) was used somewhere in your document. But, in your case, it's not. If it was used somewhere in the document, your browser would download that background-image ("videos2.gif") immediately. The problem is, your browser doesn't see any element on the page which uses that class and so it doesn't download that image. Only when you explicity set the class name (using the className attribute), does your browser actually download the image. That is what causes the "delayed reaction", so to speak. There are two solutions.

    1.) You can either add an element to the page and set it's display property to none (display: none) and also set it's background-image property to the url of the image you want to pre-load.

    or

    2.) You can also do it using Javascript. Here is some code I've written that shows you how to pre-load images using the Javascript method...

    Demo: http://home.earthlink.net/~duhomax/images/mouse_over_test.html

    
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <HTML>
    <HEAD>
    <META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=iso-8859-1">
    <META HTTP-EQUIV="Content-Style-Type" CONTENT="text/css">
    <META HTTP-EQUIV="Content-Script-Type" CONTENT="text/javascript">
    <TITLE>Untitled Document</TITLE>
    <SCRIPT LANGUAGE="JavaScript" TYPE="text/javascript">
    <!--
    var pics_array = new Array();
    function preloadImages() {
     if (document.images) {
      for(i = 0; i < preloadImages.arguments.length; i++) {
       pics_array[i] = new Image();
       pics_array[i].src = preloadImages.arguments[i];
      }
     }
    }
    function replaceImage(image_name, new_image_src) {
     if (document.images) {
      document.images[image_name].src = new_image_src;
     }
    }
    //-->
    </SCRIPT>
    </HEAD>
    <BODY onLoad="preloadImages('image1_down.gif','image1_over.gif','image2_down.gif','image2_over.gif')">
    <table border="0" cellpadding="0" cellspacing="0">
    <tr>
    <td><a href="javascript:void(0)" target="_top" onMouseDown="replaceImage('image1','image1_down.gif')" onMouseOver="replaceImage('image1','image1_over.gif')" onMouseOut="replaceImage('image1', 'image1.gif')" onMouseUp="replaceImage('image1', 'image1_over.gif')"><img src="image1.gif" alt="Image 1" name="image1" width="125" height="32" border="0"></a></td>
    <td><a href="javascript:void(0)" target="_top" onMouseDown="replaceImage('image2','image2_down.gif')" onMouseOver="replaceImage('image2','image2_over.gif')" onMouseOut="replaceImage('image2', 'image2.gif')" onMouseUp="replaceImage('image2', 'image2_over.gif')"><img src="image2.gif" alt="Image 2" name="image2" width="125" height="32" border="0"></a></td>
    </tr>
    </table>
    
    </BODY>
    </HTML>
    
    Code (markup):
    You can download the images used in the example above from here...

    http://home.earthlink.net/~duhomax/images/mouse_over_images.zip

    It's also very important that you assign a name attribute to your images so that you can refer to them.

    Hope this helps :D
     
    brian394, Jul 1, 2006 IP
    itsall3 likes this.
  6. itsall3

    itsall3 Active Member

    Messages:
    505
    Likes Received:
    12
    Best Answers:
    0
    Trophy Points:
    58
    #6
    wow, thats great advice man, thanks brian394 :)

    I've never had such an indepth explanation before!

    Thanks to everyone else aswell for taking the time to help.

    Regards.

    (p.s brian394 -- love your paypal fees calc. ;) )
     
    itsall3, Jul 1, 2006 IP
  7. randomlande

    randomlande Peon

    Messages:
    118
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    0
    #7
    You may also try optimizing the images to make them smaller.
     
    randomlande, Jul 1, 2006 IP