I have three images of an animated spider. The first image is a simple gif with transparency (spider.gif - which is the state of the rollover when the page loads) and two other gif files. One is an animation of the spider turning counterclockwise (spider_f.gif) a bit, and the other is a reverse animation that returns it to the starting position(spider_r.gif).
I'm trying to get the code to activate on a mouseover and use a) spider.gif_f.gif if the image is in the start position or the spider_r.gif position. If moused over again it would then activate the spider_r.gif, and so forth.
The animation works fine on the first mouseover, but not on subsequent mouseover events. Here is what I have currently:
Expand|Select|Wrap|Line Numbers
- <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
- "http://www.w3.org/TR/html4/loose.dtd">
- <HTML>
- <HEAD>
- <TITLE>Test Title</TITLE>
- <script language="javascript">
- <!--
- function roll2(img_name2)
- {
- if (document[img_name2].src = "images/spider/spider_f.gif")
- {document[img_name2].src = "images/spider/spider_r.gif";}
- else
- {document[img_name2].src = "images/spider/spider_f.gif";}
- }
- //-->
- </script>
- </HEAD>
- <BODY>
- <IMG SRC="images/spider/spider.gif" width="90" height="104" border="0"
- ALT="Jumping Spider" name="spider2" onmouseover="roll2('spider2')">
- </BODY>
- </HTML>
Thanks!!