...

View Full Version : Change Image on Click



qwertyy
06-20-2012, 04:14 PM
Hi all,
I'm trying to add a small section on my blog where the picture changes when you click on it. I have about 6 pictures I would like to cycle through, and stop on the 6th.
I have a basic code right now, but it only goes through two pictures, image 1 and image 2. How do I get it to go from image 1 to image 2, image 2 to image 3, etc. on click?

Here's what I have:


<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
cc=0;
function changeimage()
{
if (cc==0)
{
cc=1;
document.getElementById('myimage').src="image2.gif";
}
else
{
cc=0;
document.getElementById('myimage').src="image1.gif";
}
}
</script>
</head>

<body>

<img id="myimage" onclick="changeimage()" border="0" src="image1.gif"/>


</body>
</html>

Thanks!

nicholagi
06-20-2012, 08:24 PM
Code:

<script type="text/javascript"> imgs=Array("img1.jpg","pic2.jpg","another.jpg","whee.gif","whatever.png"); var x=0; function change() { document.getElementById("bob").src=imgs[++x]; if (x==5) { x=0; } } </script> <img src="img1.jpg" id="bob" alt="" onmousedown="change()">

Try that.

qwertyy
06-21-2012, 01:38 AM
Code:

<script type="text/javascript"> imgs=Array("img1.jpg","pic2.jpg","another.jpg","whee.gif","whatever.png"); var x=0; function change() { document.getElementById("bob").src=imgs[++x]; if (x==5) { x=0; } } </script> <img src="img1.jpg" id="bob" alt="" onmousedown="change()">

Try that.

Tried it, and for some reason, none of my images show up. I don't have them saved anywhere, I'm just using imageshack to host them, so maybe that's the problem? Do they have to be saved somewhere or can I use the link? I'm a total amateur with this stuff.

Lerura
06-21-2012, 02:27 AM
Code:

<script type="text/javascript"> imgs=Array("img1.jpg","pic2.jpg","another.jpg","whee.gif","whatever.png"); var x=0; function change() { document.getElementById("bob").src=imgs[++x]; if (x==5) { x=0; } } </script> <img src="img1.jpg" id="bob" alt="" onmousedown="change()">

Try that.

A few errors:

defining arrays is done by either:
imgs=["","",""];
or:
imgs=new Array("","","");

And in order to make the script support any length of the the array of images

if (x==5) { x=0; } }should be

if (x==imgs.length) { x=0; } }

so:
<script type="text/javascript">
imgs=["img1.jpg","pic2.jpg","another.jpg","whee.gif","whatever.png"];
var x=0;
function change(){
document.getElementById("bob").src=imgs[++x];
if (x==imgs.length){
x=0;
}
}
</script>

<img src="img1.jpg" id="bob" alt="" onmousedown="change()">

jmrker
06-21-2012, 03:23 AM
Alternative solution, stopping at 6th image displayed.


<html>
<head>
<title> Limit image display </title>
<script type="text/javascript">
// From: http://www.codingforums.com/showthread.php?t=265733

// var imgs = ["img1.jpg","pic2.jpg","another.jpg","whee.gif","whatever.png"];
// var baseURL = '';
var imgs =['11.jpg','12.jpg','13.jpg','14.jpg','15.jpg','21.jpg'];
var baseURL = 'http://www.nova.edu/hpd/otm/pics/4fun/';

var x=imgs.length;
function change(){
if (x>0) { document.getElementById("bob").src=baseURL+imgs[--x]; }
}
window.onload = function() { change(); }
</script>

<style type="text/css">

</style>
</head>
<body>
<img src="" id="bob" alt="" onmousedown="change()">

</body>
</html>

qwertyy
06-21-2012, 04:41 AM
Ahh thank you iBall and jmrker! Worked perfectly, thanks so much.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum