Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations Mike Lewis on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Building the Better MouseOver with preloaders

MouseOvers

Building the Better MouseOver with preloaders

by  carpeliam  Posted    (Edited  )
You might have noticed that on some pages with mouseOvers, it takes a little while for the graphic to download. I think that's ok for the first time, but when a request for the graphic is going back to the server every time I move my mouse, that's a problem. It's just downright annoying. What's the solution? "Preload" your graphics so they're already in cache when the visitor moves their mouse. That way, you avoid having to load it every single time. Here's a simple script for it:

[tt]<SCRIPT>
<!--
// declare new images
var yourImageNormal = new Image();
var yourImageOver = new Image();

// assign image values
yourImageNormal.src = "images/normal.gif";
yourImageOver.src = "images/special.gif";

function highlight (source) {
document [source].src = eval(source + "Over.src");
}

function dim (source) {
document [source].src = eval(source + "Normal.src");
}
//-->
</SCRIPT>
</HEAD>
<BODY>
<IMG SRC="images/normal.gif" NAME="yourImage" ALT="your image description" BORDER="0">
</BODY>[/tt]

Try that, see if it works. You'll probably see a lot of different mouseOver scripts floating around the web, but make sure yours is a preloading script.

Liam Morley
lmorley@wpi.edu
http://www.wpi.edu/~lmorley
Register to add this FAQ to your archive
Register to rate this FAQ  : BAD 1 2 3 4 5 6 7 8 9 10 GOOD
Please Note: 1 is Bad, 10 is Good :-)

Part and Inventory Search

Back
Top