Login | Register   
LinkedIn
Google+
Twitter
RSS Feed
Download our iPhone app
TODAY'S HEADLINES  |   ARTICLE ARCHIVE  |   FORUMS  |   TIP BANK
Browse DevX
Sign up for e-mail newsletters from DevX


Tip of the Day
Language: Web
Expertise: Intermediate
Jun 5, 2000

Speed Up MouseOver/Out Image Changes Using Pre-loaded Images

The fastest way to do mouseover/mouseout image changes for hyperlinks would be the following:

 
<a href="" MouseOver="imgHotLink.src=hotlinkOn"
MouseOut="imgHotLink.src=hotlinkOff">
<img src="HOTLINK_out.GIF" name="imgHotLink">
</a>

You can see that when your mouse goes over and off of the hyperlink, it changes the source image of the image tag with the name "imgHotLink". So what is the source pointing to:

 
<a href=""
MouseOver="imgHotLink.src=hotlinkOn" 
MouseOut="imgHotLink.src=hotlinkOff">

"hotlinkOn" and "hotlinkOff" are the names of preloaded images that you can set up to go into memory at the start of your client-side page. This is how you pre-load your images:
 
<script language="JavaScript">
	var hotlinkOn = new Image;
	hotlinkOn = "HOTLINK_over.gif";
	var hotlinkOff = new Image;
	hotlinkOff = "HOTLINK_out.gif";
</script>
Put this tag between the ending HEAD tag and the beginning BODY tag. Then, the images will load at the start of the client-side document. As soon as the "client" sees the page, the images will be completely available in client-side memory.

Warning: You can use animated GIFs, but different browsers respond to client-side pre-loaded animated GIFs differently. I recommend not using animated GIFs, but if you must, use non-terminating animated GIFs (i.e., ones that iterate through the animation more than once).

Stephen McDonald
 
Comment and Contribute

 

 

 

 

 


(Maximum characters: 1200). You have 1200 characters left.

 

 

Sitemap
Thanks for your registration, follow us on our social networks to keep up-to-date