PDA

Click to See Complete Forum and Search --> : Multiple funtions when using ondblclick

edje01
09-25-2003, 07:25 AM
When I use dblclick on pic1, it enlarges. When I use ondblclick on pic 2, I want the other pics to resize (height=100) while pic enlarges.... If you want to see what I mean: Check my site and see the picturepage of you youngest son (Colin)...

go.to/slingerland

Thanks ED$
pyro
09-25-2003, 07:57 AM
First of all, I'm fairly certain that ondblclick is IE only, so you might want to use onclick instead. Anyway, you can run multiple functions by separating them with a semi-colon, like this:

<a href="#" onclick="functionOne(); functionTwo(); return false;">link</a>
edje01
09-25-2003, 09:01 AM
I know I can put multiple functions in the ondblclick function, but...

I got one page with 16 picture on it, can you imaging what the script will look like!

I am looking for a neat way togo about this; ie. can I use a while-wend loop?

EDJE
pyro
09-25-2003, 10:24 AM
You can use one function to control all the images, and just pass the image name as an argument to the function.
edje01
09-25-2003, 01:26 PM
:confused: Can you help me out with some pointers?

I am not a complete newby, but I am not that good either...

EDJE
pyro
09-25-2003, 02:26 PM
I made up a little demo for you. This will resize the pictures when you click the the first time, and when you click them again, it will resize them back to their original size. What you do is pass the new width and height to the function (it will remember the old width and height, for resizing later), something like this:

onclick="resizeimg(this.href,'100','50');"

Which will resize it to 100 px wide by 50 px high.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Example</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<style type="text/css">
img {
border: 0;
}
</style>

<script type="text/javascript">
ary = new Array(); //will be an array of images that are currently enlarged.
function resizeImg(imgname,imgwidth,imgheight) {
img = document.images[imgname];
x=0;
for (i=0; i<ary.length; i++) {
if (ary[i].split("|")[0] == imgname) {
x = 1;
}
}
if (x == 0) {
ary[ary.length] = imgname+"|"+img.width+"|"+img.height;
img.width = imgwidth;
img.height = imgheight;
}
else {
for (i=0; i<ary.length; i++) {
if (ary[i].split("|")[0] == imgname) {
img.width = ary[i].split("|")[1];
img.height = ary[i].split("|")[2];
ary.splice(i,1);
}
}
}
}
</script>

</head>

<body>

<p><img src="small.gif" alt="small" width="100" height="100" name="small" onclick="resizeImg(this.name,'200','200');">
<br>
<img src="medium.gif" alt="medium" width="200" height="200" name="medium" onclick="resizeImg(this.name,'400','400');">
<br>
<img src="large.gif" alt="large" width="300" height="300" name="large" onclick="resizeImg(this.name,'600','600');"></p>

</body>
</html>