...

View Full Version : image click change problem



tpeck
07-14-2004, 02:31 AM
Dear Forum,

I want to make some images change 3 times when they are clicked on... i.e. from 1.png to 2.png to 3.png and then back to 1.png.

I require more than one image to do this on the same page, so I have put the images in separate folders... i.e. folder_0, folder_1 etc.

Thus folder_0 will contain the three images to "play" in sequence when the first image is clicked upon; and folder_1 will contain the three images to "play" in sequence when the second image is clicked on.

Here is the code I am presently using:

*******************************

<html>
<head>
<SCRIPT language="JavaScript1.1">
var folder=new Array() , max=new Array() , index=0 , number=1;
function changeImage(index){
number++;
if(number>max[index])
number=1;
document.images[document.images.length-1].src=folder[index]+"/"+number+".png";
}

function setData(){
folder[0]="folder_0";
folder[1]="folder_1";
max[0]=3;
max[1]=3;
}
// End -->
</SCRIPT>
</head>

<body onLoad="setData();">
<center>
<a onClick="changeImage(0);">
<img src="folder_0/1.png" width="300" height="200"></a>
<a onClick="changeImage(1);">
<img src="folder_1/1.png" width="300" height="200"></a>
</center>
</body>
</html>

**************************

It kind of works but clicking on the first image makes the second image change instead of itself.

Clicking on the second image works OK.

How do I make the first image change itself only as planned?

Many thanks for your help.

Terry

jamescover
07-14-2004, 04:13 AM
It kind of works but clicking on the first image makes the second image change instead of itself.
Clicking on the second image works OK.
How do I make the first image change itself only as planned?

Do you want to change the image that is clicked on, or the other image? I can't quite tell from your description.

This will change the image that is clicked on:








<script>
<!--

myImg = new Array("image1.gif","image2.gif")
imgNum=0;
imgCt=myImg.length;
function swapImg(){
if(document.images){
if(document.swap.complete){
imgNum++;
if(imgNum==imgCt){
imgNum=0;
}
}
}
document.swap.src=myImg[imgNum];
}

//-->
</script>

<a href="javascript:swapImg();" onFocus="javascript:this.blur();">
<img name="swap" src="image1.gif" width="150" height="150" border=0 /></a>



-james

tpeck
07-14-2004, 04:42 AM
Hi James,

Thanks.

Your code is smarter than mine and works well.

Yes, it's the image itself which must change when clicked on.

So how can I have more than one instance of this going on on a page?

Like two or three square images that change to other images - bit like a fruit slot machine.

I tried your code with more than one image and nothing happens, but it works well with one image only.

Thanks,

Terry

Willy Duitt
07-14-2004, 05:12 AM
Here's another way using regular expressions....



<script type="text/javascript">
function changeImage(image){
var oldNumber = image.src.match(/(\d)(?=\.)/);
var newNumber = RegExp.$1*1+1;
if(newNumber > 3){ newNumber = 1 };
image.src = image.src.replace(/(\d)(?=\.)/,newNumber);
}
</script>
</head>

<body>
<img src="folder_0/1.png" width="300" height="200"
style="cursor:pointer" onclick="changeImage(this)">
<img src="folder_1/1.png" width="300" height="200"
style="cursor:pointer" onclick="changeImage(this)">


.....Willy

Edit: BTW, I do not really understand all the extra work in making seperate folders when the same thing can easily be done using one folder and commonly named but sequentially numbered images.

IE:
firstImage1.png; firstImage2.png; FirstImage3.png
secondImage1.png; secondImage2.png; secondImage3.png
ect....

tpeck
07-14-2004, 05:37 AM
Thanks Willy,

It looks like a neat solution but I can't get it to show all three images. My mistake no doubt.

Here is your code again having dispensed with the folders idea and with just three images 1.png, 2.png, and 3.png - trying to rotate.

********************************<html>
<head>
<script type="text/javascript">
function changeImage(image){
var oldNumber = image.src.match(/(\d)(?=\.)/);
var newNumber = RegExp.$1*1+1;
if(newNumber > 3){ newNumber = 1 };
image.src = image.src.replace(/(\d)(?=\.)/,newNumber);
}
</script>
</head>

<body>
<img src="1.png" width="300" height="200"
style="cursor:pointer" onclick="changeImage(this)">
</body>
</html>

**********************

It shows 1.png, then rotates, but doesn't show images 2.png and 3.png. Comes back to 1.png.

What could I be doing wrong? Not engaging brain obviously.

Terry

Willy Duitt
07-14-2004, 05:50 AM
Hmmm;

I don't know what to tell you....
Since I do not have the images to test with I added a onmouseover event handler to show the image source in the status bar and this indicates that the images are changing....



<head>
<script type="text/javascript">
function changeImage(image){
var oldNumber = image.src.match(/(\d)(?=\.)/);
var newNumber = RegExp.$1*1+1;
if(newNumber > 3){ newNumber = 1 };
image.src = image.src.replace(/(\d)(?=\.)/,newNumber);
}
</script>
</head>

<body>
<img src="1.png" width="300" height="200"
style="cursor:pointer" onclick="changeImage(this)"
onmouseover="status=this.src;return true" onmouseout="status='';return true">


If you can put a test page online and provide a link it would be easier to debug and find where the problem is, but at the moment I am inclined to believe that the images may not be where you think they are...

.....Willy

tpeck
07-14-2004, 09:23 AM
It's very strange.

The code works fine if placed in a file in another folder (referencing image files in the same folder), but in the particular folder I was working on, it wouldn't find two of the files - annd they are all there in the same folder.

Sometimes you just want to give up!

Now it works in the folder I am in only IF I reference the image files in a different folder - i.e. <img src="../../img/1.png" width="300" height="216"
style="cursor:pointer" onclick="changeImage(this)"

Bizarre.

Anyway, that works, so thank you so much for your time.

Best,

Terry



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum