2 ondblclick handlers to zoom-in/zoom-out images

benreynolds4 · May 23rd, 2008, 02:01 PM

hello everyone -

i am having difficulty with this one.
I want to enlarge/reduce (zoom-in/zoom-out) an image, but i don't want the classic ondblclick=enlarge and onclick=reduce i would like two instances of ondblclick=enlarge so ::::

ondblclick=enlarge
ondblclick=reduce
!!

is it even possible and what is the function script for it.
below is my code now.

Code:

<SCRIPT LANGUAGE="JavaScript">
function enlargeImage1(){image1.height="600"} function dropImage1()
</script>



<img src="03_pictures/image.jpg" height="200" name="image1" onDblClick="enlargeImage1()" onClick="dropImage1()">

the reason i want this is because i am trying to make my images dragable with the onclick, englarging/reducing with the dblclick and captions with the mouseover - crazy!!!

hope you can help!

ben

CloudedVision · May 23rd, 2008, 02:55 PM

try something like this:

Code:

var enlarged = false;
function switcheroo() {
   if(enlarged) {
      reduce();
      enlarged = false;
   } else {
      enlarge();
      enlarged = false;
   }
}

Then just run the switcheroo function (or whatever you decide to name it) in ondblclick. You'll have to edit it to work with your code, however. Oh, and this won't work with more than one image.

benreynolds4 · May 23rd, 2008, 03:01 PM

hmm.m... well it would be great if this could work with individual image (more than one)....

hmm... shame.... well i will keep trying...if you have any other ideas, let me know..

ben

CloudedVision · May 23rd, 2008, 03:15 PM

If you want it to be done with multiple images use this:

Code:

var enlarged = new Array();
function switcheroo(src) {
   if(enlarged[src]) {
      reduce();
      enlarged[src] = false;
   } else {
      enlarge();
      enlarged[src] = true;
   }
}

then just do this: ondblclick="switcheroo(this.src);"

Again, you'll have to edit it to work with your code.

benreynolds4 · May 23rd, 2008, 03:39 PM

oh great thanks...

so i am not so sure how it should be

here's a base

--------------------------------------------------------

Code:

<!--  ORIGINAL ENLARGE IMAGE-THUMBNAILS SCRIPT -->
<SCRIPT LANGUAGE="JavaScript">
function enlargeImage1(){image1.height="600"} 
function dropImage1(){image1.height="200"}

//then with your addition
var enlarged = new Array();
function switcheroo(src) {
   if(enlarged[src]) {
      reduce();
      enlarged[src] = false;
   } else {
      enlarge();
      enlarged[src] = true;
   }
}</script>

THEN IN THE BODY..

.....

Code:

<img src="03_pictures/image.jpg" height="200" name="image1" onDblClick="enlargeImage1()" ondblclick="switcheroo()">

--------------------------------------------------------
am i on the right track!?!?

thanks
ben