Login | Register   
RSS Feed
Download our iPhone app
Browse DevX
Sign up for e-mail newsletters from DevX

By submitting your information, you agree that devx.com may send you DevX offers via email, phone and text message, as well as email offers about other products and services that DevX believes may be of interest to you. DevX will process your information in accordance with the Quinstreet Privacy Policy.

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