PDA

View Full Version : Changing Image size multiple times…

Eternity Angel
07-16-2002, 06:47 AM
I KNOW how to change image sizes, BUT...

I have a page of images, they are 80 pixels in height each (thumbnail), when you click on them once, they enlarge to normal size, when you click again, they go to 2 times the size, click again, and they go back to thumbnail.

All of this is done with variables, when you click on a certain image, it adds one to the variable (first click = 1, second = 2, third turns the variable back to 0).

Now, the problem is, I have over 50 images, and have to assign a new variable per image! This just seems too long for me, but if I can't do it another way, I will do it the way I am now.

Any suggestions?
premshree
07-16-2002, 07:34 AM
You don't need to use 50 variables. You can create a function which takes the image "id" as an argument. Now the function will increment/decrement your counter variable for that id. When you click on another image, the "id' will be different so you can reset the counter variable depending on the "size" of the image.
Eternity Angel
07-16-2002, 07:39 AM
I........... sadly didn't understand that.

Care to give me an example?
premshree
07-16-2002, 08:24 AM
Here's the code :


<html>
<head>
<title>Zoom Image</title>
<script language="JavaScript">
function zoomImage(imgId)
{
var sizeArrw = new Array(40, 80, 120) // The Image width
var sizeArr = new Array(40, 80, 120); // The image Height
var countz;
for(var i=0; i<3; i++)
{
if(imgId.height==sizeArr[i])
{
countz=i;
break;
}
}
if(countz<2)
{
imgId.height=sizeArr[countz+1];
imgId.width=sizeArrw[countz+1];
countz+=1;
}
else
{
imgId.height=sizeArr[0]
imgId.width=sizeArrw[0];
countz=1;
}
}
</script>
</head>

<body bgcolor="#FFFFFF">
<img src="x.gif" width="40" height="40" onClick="zoomImage(this)">
<br>
<img src="y.gif" width="40" height="40" onClick="zoomImage(this)">
<br>
<img src="z.gif" width="40" height="40" onClick="zoomImage(this)">
</body>
</html>


Make modifications in the 2 arrays according to the zoom image width and height

:thumbsup:
Eternity Angel
07-16-2002, 09:39 AM
Well, it WORKED, but when I clicked on another image, using the same function, the image's height would be one size too less...

Anyways, thank you for the ATTEMPT, but I was actually able to do this myself after all, with this function:


function zoom(id)
{
if (id.height == 80){
id.height = 480;
} else {
if (id.height == 480){
id.height = 640;
} else {
if (id.height == 640){
id.height = 720;
} else {
if (id.height == 720){
id.height = 80;
}
}
}
}
}
glenngv
07-16-2002, 10:18 AM
you could have simplify your nested if's like this:

function zoom(id)
{
if (id.height == 80){
id.height = 480;
}
else if (id.height == 480){
id.height = 640;
}
else if (id.height == 640){
id.height = 720;
}
else if (id.height == 720){
id.height = 80;
}
}


Originally posted by Eternity Angel
Well, it WORKED, but when I clicked on another image, using the same function, the image's height would be one size too less...

Anyways, thank you for the ATTEMPT, but I was actually able to do this myself after all, with this function:


function zoom(id)
{
if (id.height == 80){
id.height = 480;
} else {
if (id.height == 480){
id.height = 640;
} else {
if (id.height == 640){
id.height = 720;
} else {
if (id.height == 720){
id.height = 80;
}
}
}
}
}
Eternity Angel
07-16-2002, 10:24 AM
Well, I'll be a monkeys uncle!

I didn't know HOW exactly that worked, so, I just went with what I knew.

I sort of started scripting with PHP, and it uses "elseif", which didn't work for me with JS...