Browse DevX
Sign up for e-mail newsletters from DevX

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



Building the Right Environment to Support AI, Machine Learning and Deep Learning

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"
<img src="HOTLINK_out.GIF" name="imgHotLink">

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=""

"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";
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.



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