473,385 Members | 1,780 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,385 software developers and data experts.

Adding an Activate/Deactive Button to a Javascript Function

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){magt his=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.subst r(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)+'p x; '+ ' 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,ev ent.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.cssF loat='none';
Magnifico[im].style.left=(document.getElementById('imgholder'+i m).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).offsetWi dth-Magnifico[idm].offsetWidth);
yy=(MagImg.offsetHeight-Magnifico[idm].offsetHeight)/(document.getElementById('imgholder'+idm).offsetHe ight-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).o ffsetWidth-Magnifico[idm].offsetWidth;
var
btlimit=document.getElementById('imgholder'+idm).o ffsetHeight-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>

May 24 '06 #1
2 4779
do************@dtrack.com wrote:
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
--
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
May 26 '06 #2
JRS: In article <17****************@PointedEars.de>, dated Fri, 26 May
2006 03:33:25 remote, seen in news:comp.lang.javascript, Thomas
'PointedEars' Lahn <Po*********@web.de> posted :


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.

--
© John Stockton, Surrey, UK. ??*@merlyn.demon.co.uk Turnpike v4.00 MIME. ©
Web <URL:http://www.merlyn.demon.co.uk/> - FAQish topics, acronyms, & links.

Food expiry ambiguities: <URL:http://www.merlyn.demon.co.uk/date2k-3.htm#Food>
May 27 '06 #3

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

2
by: Weston C | last post by:
I'm wondering if it's possible to add a method to the Node and/or Element objects (so they'd subsequently be available to any node/element). I'd assume you could just do something like: ...
3
by: daveland | last post by:
I am working on some JavaScript that dynamically adds rows to a table in response to a button click. A new row does appear on the screen when the button is clicked. However, that table to which a...
2
by: RobG | last post by:
I am trying to dynamically add an onclick to an element, however I just can't get the syntax right. consider the following function: function doClick (evt,x) { // do things with evt and x } ...
0
by: Sileesh | last post by:
Hi I have html table and a Button in an Aspx page. I am adding one row with some textboxes to Html table each time i click on the Button thru Javascript. Now problem is when when i try to...
0
by: John | last post by:
hey guys, i'm trying to make a simple web service(it returns a string that says "Hello World") and i can call it, have all the javascript i need for it that i am aware of, but the fist time i push...
9
by: Neo Geshel | last post by:
I have strip-mined, strip-searched, and completely exhausted the Internet (up to the 30th page on Google, with 100 results per page!!), all without finding an answer to my question AS TO WHY IT...
1
by: The Eclectic Electric | last post by:
I'd be very grateful if anyone could help me with this. From my limited knowledge of Javascript I don't think it is possible, but I'll punt anyway. I downloaded and very slightly adapted this...
0
by: wxscooter | last post by:
OK, I'm definitely a beginner at VB6, but nobody I've talked to can seem to help me with this... My program is using Webbroswer to automatically fill out a webpage. I'm down to just one simple...
4
by: Ed | last post by:
I'm writing a VBA macro in Word 2003 that finds and manipulates a web page (Win XP, IE6 sp2). I am having trouble with a checkbox. I can find the checkbox and make it checked, but I can't figure...
0
by: taylorcarr | last post by:
A Canon printer is a smart device known for being advanced, efficient, and reliable. It is designed for home, office, and hybrid workspace use and can also be used for a variety of purposes. However,...
0
by: aa123db | last post by:
Variable and constants Use var or let for variables and const fror constants. Var foo ='bar'; Let foo ='bar';const baz ='bar'; Functions function $name$ ($parameters$) { } ...
0
by: ryjfgjl | last post by:
If we have dozens or hundreds of excel to import into the database, if we use the excel import function provided by database editors such as navicat, it will be extremely tedious and time-consuming...
0
by: emmanuelkatto | last post by:
Hi All, I am Emmanuel katto from Uganda. I want to ask what challenges you've faced while migrating a website to cloud. Please let me know. Thanks! Emmanuel
1
by: Sonnysonu | last post by:
This is the data of csv file 1 2 3 1 2 3 1 2 3 1 2 3 2 3 2 3 3 the lengths should be different i have to store the data by column-wise with in the specific length. suppose the i have to...
0
marktang
by: marktang | last post by:
ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However,...
0
by: Hystou | last post by:
Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can...
0
Oralloy
by: Oralloy | last post by:
Hello folks, I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>". The problem is that using the GNU compilers,...
0
jinu1996
by: jinu1996 | last post by:
In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.