Printable View
I have a little button that says "next" below a big image, let´s call it "image1", when I press the button I want to swap the big image to "image2". And then if I press it again I want it to swap to "image3" and the next time to "image4" and so on.
I´m not so good at javascripts but I found a script that can make the button swap "image1" to "image2" when I click it, but the problem comes when I want the same button to swap "image2" to "image3" etc...
Does anyone have a tip?
thanks
Post the code your using and we could probably alter it, but otherwise...
You'd need a counter for 1-4 etc, and then just do something like,
document.GetElementByID("MyID").src = "./image" + mycounter + ".gif";
mycounter++;
Something like that... I dunno if its .src or not
right now I´ve tried to use a variable, but I could only make it switch between three images and want more...
Is their a way to alter this code and make it work with more images
<HTML>
<HEAD>
<TITLE></TITLE>
<script language="javascript">
<!--
var imageSrc = 'image2.jpg'
function change(currImage){
document.getElementById('image').src = currImage;
}
//-->
</script>
</HEAD>
<BODY>
<img id="image" src="image1.jpg">
<INPUT type="button" value="Button" ID=Button1 onclick="chang(imageSrc); imageSrc = 'image3.jpg';">
</BODY>
</HTML>
thanks for your help!
^^oops missed the first "e" on change(imageSrc)
HTML Code:<style>
img {
width:100px;
height:100px;
}
</style>
<script>
var counter = 1;
function nextImage() {
if (counter == 4)
counter = 0;
counter++;
document.getElementById("topImage").src = "images/image" + (counter.toString()) + ".jpg";
}
</script>
<body>
<img id="topImage" src="images/image1.jpg"/><br/><br/>
<input type="button" value=">>" onclick="nextImage();"/>
</body>