Animation

[Jarod_C]

[resolved] I cheated using imageready How would I get the other images to work without gaps, also, how would I repeat the script without it messing up? I think I can repeat the code in the html just fine, but I don't know how to repeat the script properly.Note:If you try it the second images just have a 2 after it. IE left, and left 2.

<script type="text/javascript">function mouseOver(){document.b1.src ="http://i190.photobucket.com/albums/z179/jarod_c/left2.gif"}function mouseOut(){document.b1.src ="http://i190.photobucket.com/albums/z179/jarod_c/left.gif"}</script><table border="0" width="792"><tr><td><a href="http://www.scape.110mb.com" target="_blank"><img border="0" alt="Fan Scape Home" src="http://i190.photobucket.com/albums/z179/jarod_c/homebar.gif" name="b1" onmouseover="mouseOver()" onmouseout="mouseOut()" /></a><img src="http://i190.photobucket.com/albums/z179/jarod_c/forumbar.gif"><img src="http://i190.photobucket.com/albums/z179/jarod_c/questsbar.gif"><img src="http://i190.photobucket.com/albums/z179/jarod_c/itemsbar.gif"><img src="http://i190.photobucket.com/albums/z179/jarod_c/monstersbar.gif"><img src="http://i190.photobucket.com/albums/z179/jarod_c/smileboxbar.gif"></td></tr></table>

P.S. If you're from the United States, Happy Thanksgiving. Go Packers!

[Shonumi]

So basically, you are looking at a way to make this code more flexible, so that the functions replace any image you want from anywhere correct? You want a way to get away from hard coding it to just change left2.gif and left? Hmm... try something like this then.

function mouse_event(source_ref, image_ref){document.getElementById(source_ref).src = image_ref;}/*You can consolidate the function to serve for both onmouseover and onmouseout */

<img border="0" alt="Fan Scape Home" src="http://i190.photobucket.com/albums/z179/jarod_c/homebar.gif" id="b1" onmouseover="mouse_event('b1', 'http://i190.photobucket.com/albums/z179/jarod_c/left2.gif')" onmouseout="mouse_event('b1', 'http://i190.photobucket.com/albums/z179/jarod_c/left.gif')" />

It looks prettier if you have the images stored locally so you wouldn't have to use the full url. Anyway, the code basically takes in the parameters and acts on them. soure_ref is the id that identities the image element, and image_ref is the new url. Since the function goes about just switching image sources, it can be used for both onmouseover and onmouseout.

[Jarod_C]

Thanks, I store them there because it doesn't cut down on my bandwidth. I know, that's cheating.

[Shonumi]

Naw, I understand. For a smaller site that I once had, I wanted to use imageshack as well, for bandwidth and file size upload restraints (500KB, surely you are mad and jest!). But the pesky urls made my code look so ugly. Bleh, so I stuck to local. But I see where you're coming from.