Forum Moderators: open
Thanks for providing such a great resource. I have learned a lot by lurking and reading, but now I need some help.
I am using JavaScript to swap from a regular gif, to an animated gif, when the user clicks. The site also uses PHP, and there is some additional processing that takes place when the user clicks, aside from the change in gif.
The regular gif is an icon that indicates the selection is ‘not marked’. When the user clicks the gif, it calls a JavaScript function named ‘mark(eid)’. mark(eid) does some processing, and then swaps the gifs. The animated gif then grows dark, to indicate the selection is ‘marked’.
This feature works in Netscape 7.1, Netscape 6.0, and FireFox 1.0, but it does not work in IE 6.0. The image is being swapped, but the animated gif won’t run. Since the first panel of the animated gif is identical to the regular gif, there is no visual change on the screen, even though the animated gif was correctly swapped.
I have tried a variety of methods of preloading the gifs, and calling the swapping function. I can’t get the animated gif to run with IE, but all the methods work with the other browsers.
Can anyone offer advice? I have posted the relevant code excerpts below. You can probably ignore the first 2 functions, which are not related to the image swapping, and are executed consistantly.
Thanks!
<head>
mark_off = new Image();
mark_off.src = '/images/mark.gif?'+ Math.random();
mark_on = new Image();
mark_on.src = '/images/mark-on.gif?'+ Math.random();
</head><body>
<SCRIPT LANGAUGE="javascript">
function remove_member(item, arr) {
var found = false;
for(x=0; x<arr.length-1; x++)
if (arr[x] == item ¦¦ found == true) {
found = true;
arr[x] = arr[x+1];
}
if (found == true ¦¦ arr[arr.length-1] == item) arr.length--;
return arr;
}
function member(item, arr) {
for(x=0; x<arr.length; x++)
if(arr[x] == item)
return true;
return false;
}
function mark(eid) {
var img_name = 'mark' + eid;
eids = document.marker.eids.value.split(",");
if (member(eid, eids)) {
eids = remove_member(eid, eids);
document.marker.eids.value = eids.join(",");
document[img_name].src = eval("mark_off.src");
} else {
eids[eids.length] = eid;
document.marker.eids.value = eids.join(",");
document[img_name].src = eval("mark_on.src");
}
}
</SCRIPT>
<A HREF="javascript: mark(<?= $ecur->eid;?>)" >
<IMG SRC="/images/mark.gif" NAME="mark<?= $ecur->eid;?>"></A>
[/PHP]
Don't use the javascript protocol in an href to call your function. This confuses IE into thinking the location is changing and so turn off animation - and it's not necessary. Use a normal onclick event listener. If, for whatever reason, you still want to use a link, do this:
<a href="#" onclick="mark(<?= $ecur->eid;?>);return false;">.... P.S.
[blue]eval("mark_on.src")[/blue][blue]mark_on.src[/blue]
