Adding an Activate/Deactive Button to a Javascript Function

[dominic.martin]

Hi,

I'm no javascript programmer but I found a really good piece of
javascript at http://www.isdntek.com/tagbot/zipzoom.htm that magnifies
areas of an image. It's just what I want but their example only allows
for a button in the HTML body to turn the magnifier on:

<input type="button" onclick="initMagnifier()" value="Use Magnifier">

I would like two buttons; one to activate the magnifier and one to
deactivate the magnifier. How would I do that? I can see in the code
that there is a variable called `magthis' which is either true or
false. So I'm guessing that's what the buttons have to control.

Any help would be appreciated. I've included a copy of the code so that
you don't need to go to the website.

Thank you.

Dominic

******script follows*******

<script language="javascript1.2">
<!--
//-----------------------------
// Do not remove this header.
// Place this script near the top of your page.
//-------------------------------
// Image Magnifier code by
// ShipScript copyright 2006 ISDN*tek
// http://www.isdntek.com/etools.htm
// This code has been tested in
// Internet Explorer 6, FireFox 1,
// Netscape 7, and eBay
//-----------------------------
// you may change these two values
//-----------------------------
var magnification=3 ; //-- magnification ratio is 3X enlargement
var magviewersize=.5 ; //-- magnification viewer is 50% of the image
width
//-----------------------------
// the following javascript code
// must remain as one long sentence
// to function correctly.
//-----------------------------
// -->
</script>
<div style="font-size:1px; display:none;">zipzoom</div>
<script language="javascript1.2">
<!--
var quot="'"; var Magnifico=new Array(); var magnify=false; var
magStartX=0; var magStartY=0; function initMagnifier(){ for (im=0;
im<document.images.length; im++){ var magthis=false;
if(document.images[im].parentNode.className.indexOf("magnify_this")>=0){magthis=true};
if(document.images[im].parentNode.href) { if
(document.images[im].parentNode.href.indexOf("initMagnifier")>=0){magthis=true}
} if( document.images[im].id.indexOf("Magnifier")>=0 ||
document.images[im].id.indexOf("Magtile")>=0 ){magthis=false};
if(magthis==true){ nextImage=document.images[im]; var
thisImageCode=nextImage.parentNode.innerHTML.substr(0,nextImage.parentNode.innerHTML.indexOf(">"))+
' id="bgbaseimg'+im+'" galleryimg="false" oncontextmenu="return false;"
'+ ' onmouseover ="setMagnifier('+im+');" '+ ' onmouseout
="hideMagnifier('+im+'); return false" >'; if
(nextImage.style.cssFloat){var alignment=nextImage.style.cssFloat} else
if (nextImage.align) {var alignment=nextImage.align} else {var
alignment='none'} nextImage.parentNode.innerHTML= '<div
id="placeholder'+im+'" style="position:relative; left:0px; top:0px;
float:'+alignment+';'+ ' width:'+nextImage.offsetWidth+';
height:'+nextImage.offsetHeight+';"'+ ' onclick="return false">'+ '<div
id="imgholder'+im+'" style="position:absolute; left:0px; top:0px;
border:0px solid blue; overflow:hidden">'+ thisImageCode+ '<div
id=Magnifier'+im+' style="position:absolute; left:0px; top:0px; '+ '
width:'+(nextImage.offsetWidth*magviewersize)+'px;
height:'+(nextImage.offsetHeight*magviewersize)+'px; '+ ' border:1px
solid gray; visibility:hidden; overflow:hidden; '+ ' cursor:move;
background-color:gray; " title="Move magnifier to see details"'+ '
ondrag="return false" '+ ' onmouseover ="setMagnifier('+im+'); " '+ '
onmousedown="showMagnifier('+im+',event.clientX,event.clientY); return
false" '+ ' onmousemove="if (magnify==true)
{moveMagnifier('+im+',event.clientX,event.clientY)}" '+ ' onmouseup
="magnify=false; return false" '+ '><img id="Magtile'+im+'"
src="'+nextImage.src+'" style="position:absolute; '+ ' left:0px;
top:0px; width:'+nextImage.offsetWidth*magnification+';" '+ '
onmouseover="this.galleryimg='+quot+'no'+quot+'" oncontextmenu="return
false;">'+ '</div></div></div>';
Magnifico[im]=document.getElementById('Magnifier'+im);
document.getElementById('bgbaseimg'+im).style.cssFloat='none';
Magnifico[im].style.left=(document.getElementById('imgholder'+im).offsetWidth/2)-(Magnifico[im].offsetWidth/2);
Magnifico[im].style.top=(document.getElementById('imgholder'+im).offsetHeight/2)-(Magnifico[im].offsetHeight/2);
setMagtile(im); } } } function setMagnifier(idm){
Magnifico[idm].style.visibility='visible'; } function setMagtile(idm){
MagImg=document.getElementById('Magtile'+idm);
xx=(MagImg.offsetWidth-Magnifico[idm].offsetWidth)/
(document.getElementById('imgholder'+idm).offsetWidth-Magnifico[idm].offsetWidth);
yy=(MagImg.offsetHeight-Magnifico[idm].offsetHeight)/(document.getElementById('imgholder'+idm).offsetHeight-Magnifico[idm].offsetHeight);
MagImg.style.left=0-(parseInt(Magnifico[idm].style.left))*xx ;
MagImg.style.top=0-(parseInt(Magnifico[idm].style.top))*yy ; } function
showMagnifier(idm,X,Y){ magnify=true; magStartX=X; magStartY=Y; }
function moveMagnifier(idm,X,Y){
Magnifico[idm].style.left=parseInt(Magnifico[idm].style.left)+X-magStartX;
Magnifico[idm].style.top =parseInt(Magnifico[idm].style.top)
+Y-magStartY; magStartX=X; magStartY=Y; if
(Magnifico[idm].offsetLeft<=0
){magStartX=magStartX-Magnifico[idm].offsetLeft;
Magnifico[idm].style.left=0 } if (Magnifico[idm].offsetTop<=0 )
{magStartY=magStartY-Magnifico[idm].offsetTop;
Magnifico[idm].style.top=0 } var
rtlimit=document.getElementById('imgholder'+idm).offsetWidth-Magnifico[idm].offsetWidth;
var
btlimit=document.getElementById('imgholder'+idm).offsetHeight-Magnifico[idm].offsetHeight;
if (Magnifico[idm].offsetLeft>=rtlimit )
{magStartX=magStartX-(Magnifico[idm].offsetLeft-rtlimit);Magnifico[idm].style.left=rtlimit
} if (Magnifico[idm].offsetTop>=btlimit )
{magStartY=magStartY-(Magnifico[idm].offsetTop-btlimit);Magnifico[idm].style.top=btlimit
} setMagtile(idm); } function hideMagnifier(idm){
Magnifico[idm].style.visibility="hidden"; magnify=false; }
// -->
</script>

 

[Thomas 'PointedEars' Lahn]

I'm no javascript programmer but I found a really good piece of

^^^^^^^^^^^^^^^^^^^^^^^^ ^^^^^^^^^^^^^^^^^^^^^^

javascript at http://www.isdntek.com/tagbot/zipzoom.htm [...]

^^^^^^^^^^

How would you even know? Those facts are antivalent, and the junk code you
have posted definitely proves that. I will skip proving to you why it is
junk, it is just not worth that much amount of free time. Read the FAQ
instead: <URL:http://jibbering.com/faq/>.


PointedEars

 

[Dr John Stockton]

JRS: In article <[email protected]>, dated Fri, 26 May
2006 03:33:25 remote, seen in Thomas

PointedEars
--
In the First World War, 13 million people were killed. In the Second
World War, 40 million people were killed. I think that if a third war
takes place, nothing is going to be left on the face of earth.
-- Shakira, 2003-02-05 @ MTV.com

Really, if you are going to use that quotation in your non-standards-
respecting "signature", you ought to moderate your dictatorial behaviour
in order not to give the impression that the present generation of
Germans are as obnoxious as so many of their nominal ancestors of
various previous generations. Remember Doorn.