Reputation: 6967
Simple request, but I don't know how to do it. I've got a series of 10 images (image0.gif, image1.gif image2.gif etc...) that need to change to the next image in the sequence (cycling around after 9) when another image is pressed. This is what I have so far...
<html>
<head></head>
<body bgcolor="#808080">
<script type="text/javascript">
var c = 0;
function preload(img) {
var a = new Image();
a.src = img;
return a;
}
if (needed) {
time0 = preload("image0.gif");
time1 = preload("image1.gif");
time2 = preload("image2.gif");
time3 = preload("image3.gif");
time4 = preload("image4.gif");
time5 = preload("image5.gif");
time6 = preload("image6.gif");
time7 = preload("image7.gif");
time8 = preload("image8.gif");
time9 = preload("image9.gif");
}
function clickme() {
// update image
c += 1;
// alert(c)
}
</script>
<div align="center">
<center>
<img src="images/image0.gif" width="20" height="55" name="time0"> <a href="#" onMouseDown="return clickme()">
<img src="images/button.gif" border="0" width="96" height="55">
</a>
</td>
</tr>
</table>
</center>
</div>
</body>
</html>
Upvotes: 0
Views: 117
Reputation: 53358
First, you can and should take advantage of the fact, that only thing diferrent in the each umage name is number. So, you can store number and create any image name:
function getImage(id) {
return "image"+id+".gif";
}
Then, you should have a way to acces the image that you want to change. Like adding id
to he element:
<img id="changing" src="image0.png" />
There should be onclick
used, not onmousedown
. User may change his mind and hower the mouse away - that is not click:
<a href="#" onclick="clickme()" />
Finally, changing the image element:
var c=0;
var max = 9;
function clickme() {
c++;
if(c>max)
c=0; //looping back to zero
docment.getElementById("changing").src = getImage(c); //getImage is defined above
}
Upvotes: 2
Reputation: 191829
Put an id on the image (the-image
, for instance).
function clicme() {
c += 1;
document.getElementById('the-image')
.setAttribute('src', 'image' + (c % 10) + '.gif');
}
Also there is no href
element. I think you meant to type <a href
.
Upvotes: 1