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.
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
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. )