50
rated 0 times
[
53]
[
3]
/ answers: 1 / hits: 32529
/ 12 Years ago, sun, november 4, 2012, 12:00:00
Ok, this is what I'm trying to do, it was too vague earlier so here's a better explanation, keep in mind I've only been programming pages for like 2 weeks now so any help is appreciated.
I need to create a HTML/JavaScript webpage that displays three images along with a caption (description) for each image. For each image I need to also create a button that changes the first image to a different image on the same subject (and change the caption too). Also need to have a button that restores all three images back to the original images.
I got the coding to work so that one image would change to another on button click but then when I added my 2nd and 3rd coding nothing would work anymore.
<html>
<head>
<script>
function changeImage()
{
var img = document.getElementById(image);
img.src=http://cdn.memegenerator.net/images/300x/159304.jpg;
return false;
}
</script>
</head>
<body>
<img id=image src=http://thechive.files.wordpress.com/2011/10/william-defoe.jpg />
<br><br><br>
<button id=clickme onclick=changeImage();>Click to change image!</button>
<script>
function changeImage()
{
var img = document.getElementById(image1);
img.src=http://playerperspective.com/wp-content/uploads/2011/05/mike-tyson-3.jpg;
return false;
}
</script>
<body>
<img id=image1 src=http://static.guim.co.uk/sys- images/Sport/Pix/pictures/2008/10/31/1225454147507/Mike-Tyson-001.jpg />
<button id=Click1 onclick=changeImage();>Click to change!</button>
</body>
<br>
<script>
function changeImage()
{
var img = document.getElementById(image2);
img.src=http://static.guim.co.uk/sys-images/Technology/Pix/pictures/2012/3/5/1330958259135/Halo-4-007.jpg;
return false;
}
</script>
<body>
<img id=image2 src=http://cdn.slashgear.com/wp-content/uploads/2012/04/halo-master- chief-1.jpg />
<button id=Click2 onclick=changeImage();>Click to change!</button>
</body>
<br>
</html>
More From » image
