[thelist] JS rollover display glitch

.jeff jeff at members.evolt.org
Fri Jan 17 15:13:00 CST 2003


tom,

><><><><><><><><><><><><><><><><><><><><><><><><><><><><><
> From: Tom Dell'Aringa
>
> <a href="contact.php"
> ><img src="contact_tab.gif"
>   width="100"
>   height="36"
>   alt=""
>   border="0"
>   align="absbottom"
>   onmouseover="rollover(this.name, 'contact_tab_on.gif');"
>   onmouseout="rollover(this.name, 'contact_tab.gif');"
>   name="contact"
> /></a>
><><><><><><><><><><><><><><><><><><><><><><><><><><><><><

you realize the onmouseover and onmouseout event handlers should really be
on the <a> tag, right?  by placing them on the <img> tag you're
unnecessarily reducing the number of browsers that show your rollovers.

><><><><><><><><><><><><><><><><><><><><><><><><><><><><><
> function rollover(img_name,img_src)
> {
>   document[img_name].src = img_src;
> }
><><><><><><><><><><><><><><><><><><><><><><><><><><><><><

by passing the path as an argument to the function and using that in the
swap, you're not really taking advantage of the image caching.  by using the
path, some browsers will not use the copy that's been preloaded and,
instead, try to fetch the image from the server.  you can avoid this by
passing a reference to the preloaded image object and it's src property
instead:

rollover(this.name, contact_on.src);

and finally, something that might help out with all this:

http://members.evolt.org/jeff/code/preload_n_rollover/index.cfm

good luck,

.jeff

http://evolt.org/
jeff at members.evolt.org
http://members.evolt.org/jeff/




More information about the thelist mailing list