I am trying to have an image, once clicked move on to image 2, then once image 2 is clicked it moves on to image 3, then image 4 and so on, but I am struggling to find a way to have more than 2 images? So far I have tried various different ways such as repeating the code I already have, using multiple if statements and switch statement but I just cannot seem to be able to use more than 2 images. I am only a beginner coder so it is difficult to see where I am going wrong. So far the code that I have that's working is:
and i have been able to get the same results by doing:
function change() {
var image = document.getElementById('image');
image.src = "image1.jpg"
}
</script>
</head>
<body>
<img src="image.jpg" alt="text" id="image" onclick="change();">
but i just cant seem to get more than 2 images? any advice would be really helpful
HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Social Media</title>
<link rel="stylesheet" type="text/css" href="css/styles.css">
<script type="text/javascript">
var mysrc = "image1.jpg";
function changeImage() {
if (mysrc == "image1.jpg") {
document.images["pic"].src = "image1.jpg";
document.images["pic"].alt = "image1";
mysrc = "image.jpg";
}
else {
document.images["pic"].src = "image.jpg";
document.images["pic"].alt = "image";
mysrc = "image1.jpg";
}
}
</script>
</head>
<body>
<img src="image.jpg"
alt="image" id="pic" class="portrait"
onclick="changeImage()"
width="1000px" height="500px"
style="cursor:pointer">
</body>
</html>
and i have been able to get the same results by doing:
function change() {
var image = document.getElementById('image');
image.src = "image1.jpg"
}
</script>
</head>
<body>
<img src="image.jpg" alt="text" id="image" onclick="change();">
but i just cant seem to get more than 2 images? any advice would be really helpful
Last edited by a moderator: