Good karma for help with changing an image

[Eponymouse]

All --

I’m a java programmer but a javascript newbie… Any help appreciated.

I’m putting together a quick site, currently at:

http://www.findmytribe.com/ManiWheel

See the image in the middle of the page (a “mani wheel”)? When the wheel image is clicked on, I would like to do two things:
1. Replace the static wheel gif with an animated gif
2. call a java servlet

To do this, I have one solution that works in firefox, and another one that works in IE, but nothing that works in both. Here is the relevant code:

function spin() {
document.getElementById('staticwheel').src='mwspinning.gif';
document.getElementById('spuntext').style.visibility='hidden';
document.getElementById('totaltext').style.visibility='hidden';
SpinForm.submit();
}

which is called from this form:

<div Class=wheel>
<FORM NAME="SpinForm" ACTION="/ManiWheel" METHOD="POST">
<INPUT TYPE="hidden" NAME="spun" VALUE=true>
</FORM>
<img id="staticwheel" href="#" src="mwstatic2.gif" onclick="javascript:spin()"></img>
</div>

The above solution works for me in firefox, but not in IE. With this solution in IE, I don’t get the static image replaced with the animated one when it is clicked on.

Thinking that the problem might involve IE re-using a cached image rather than getting a modified one, I added a randomized parameter to the image link. This changes the javascript to:
function spin() {
document.getElementById('staticwheel').src='mwspinning.gif?spins=23232';
document.getElementById('spuntext').style.visibility='hidden';
document.getElementById('totaltext').style.visibility='hidden';
}

That change makes it work in IE, but makes it fail in firefox. Under this solution, the behavior changes in firefox so that you actually have to double-click on the image to make it spin, rather than single-click. This is sufficiently bizarre that I am appealing to you all for help.

Does anyone know how to do an onclick replace of a static image with an animated one, in a way that works in both IE and firefox?

Thanks,

Eponymouse

 

[tsuji]

I would anticipate this working ie/moz. Can you re-confirm not working?
[tt] document.getElementById('staticwheel').src='mwspinning.gif?spins='+Math.floor(10000*Math.random());[/tt]

 

[Eponymouse]

Unfortunately, it's still not working. The image is replaced correctly in IE with one click, but in mozilla (firefox) a double-click is required. A single click in firefox calls the javascript function correctly, but the new image source just doesn't take effect, even when the image reference is followed by a ?spins=<random number>.

 

[tsuji]

I did not visited the site. (I don't visit all the sites cited.) I believe if there is a problem, the problem should be shown in the thread concisely.

Back to the problem description, I think there is no problem for the proper random query string attachment. Only, that what you've shown in the first post posts an enigma. Why the ie part does not have a submit(). Furthermore, SpinForm.submit() appeals to much to imagination of the script engine.

This should be how it appears with anticipation of cross-browser proper behaviour.
[tt]
function spin() {
document.getElementById('staticwheel').src='mwspinning.gif?'+Math.floor(10000*Math.random());
document.getElementById('spuntext').style.visibility='hidden';
document.getElementById('totaltext').style.visibility='hidden';
[red]document.[/red]SpinForm.submit();
}
[/tt]

 

[tsuji]

Further notes
Upon re-reading, your submit seems strangely incompatible with the purpose of switching image. If you submit to a "serverlet", in order not to interfere with the current page showing, perhaps what you have in mind is to return in a new window? In that case, just further set the target. Like this.
[tt]
function spin() {
document.getElementById('staticwheel').src='mwspinning.gif?'+Math.floor(10000*Math.random());
document.getElementById('spuntext').style.visibility='hidden';
document.getElementById('totaltext').style.visibility='hidden';
[blue]document.SpinForm.target="_blank";[/blue]
document.SpinForm.submit();
}
[/tt]