Have I done these rollovers correctly?

[Lorne Cameron]

I've put together a rough copy of what will be my site's menu bar, but
I'm not sure if I've done the rollovers correctly (I got the code from
HTMLcodetutorial.com I think). Check the look and code out here -
http://www.sportsunion.strath.ac.uk/snowsports/new_menu_test/index.html

When I roll my mouse over an image, it changes as expected, but in
Mozilla, when I take the mouse away, there is a slight delay before the
image reverts to its original state, which I haven't experienced
elsewhere (looks great in IE though, which 90% of my site's visitors
will be running, no doubt).

Thanks in advance for any input.
LC.

 

[Evertjan.]

Lorne Cameron wrote on 10 aug 2003 in comp.lang.javascript:

I've put together a rough copy of what will be my site's menu bar, but
I'm not sure if I've done the rollovers correctly (I got the code from
HTMLcodetutorial.com I think). Check the look and code out here -
http://www.sportsunion.strath.ac.uk/snowsports/new_menu_test/index.html

your code:

<A HREF="" ONMOUSEOVER="image1.src='1_over.gif';"
ONMOUSEOUT="image1.src='1.gif';"><IMG NAME="image1" SRC="1.gif"
BORDER="0">

================
The over/out codes are better off in the img declaration
and then can be shorter using "this":

<A HREF="">
<IMG SRC="1.gif" BORDER="0"
ONMOUSEOVER="this.src='1_over.gif';"
ONMOUSEOUT="this.src='1.gif';"

</A>

================
you could also use the preloaded var name:

<A HREF="">
<IMG SRC="1.gif" BORDER="0"
ONMOUSEOVER="this.src=image1.src;"
ONMOUSEOUT="this.src='1.gif';"

</A>

================
or use functions:

<script>
function imgover(x){
x.save=x.src
x.src=x.id.substr(3)+"_over.gif"
}
function imgout(x){
x.src=x.save
}
</script>

<A HREF="">
<IMG SRC="1.gif" BORDER="0" id="gif1"
ONMOUSEOVER="imgover(this)"
ONMOUSEOUT="imgout(this)"

</A>

not tested