Need Javascript Image Zoom Script

@atokatimApr 13.2009

I have been searching for quite awhile now and am trying to find a decent, simple image zoom script. When the user’s mouse is over the image, a small box will hover next too the cursor with the zoomed area. I did find the TJPzoom, but the user cannot click to change the zoom because the image is a HUGE image map. Any ideas on where to find something like this?

to post a comment

JavaScript

16 Comments(s) _↴

@atokatimauthorApr 13.2009 — #I just tested the TJPzoom and it throws off the mouse tracking function so it cannot be used ?

@atokatimauthorApr 16.2009 — #anyone know of a script that I could possibly use?

@Sterling_IsfineApr 17.2009 — #anyone know of a script that I could possibly use?[/QUOTE]What do you mean by 'click to change the zoom'?

Do you mean the degree of magnification or the size of the magnified area.

Could you give an exact specification of [I]all[/I] the functional requirements you have for such a script?

@spiresgateApr 17.2009 — #Have a look at this

http://stedwards.110mb.com/2A.htm

Hover over the faces and watch the top right panel.

Is this the sort of thing you want?

Feel free to use the code. It's a bit complicated so I will try to explain if you need help.

@atokatimauthorApr 17.2009 — #That is pretty cool. I will have to try and implement that into my page and see how it reacts to the mouse tracking script.

Here are the features I am looking for :

1. Mouse coordinate tracking kind of like a image map but every pixel has to be tagged. (This is working so far)

2. A box that hovers to the top right or left of mouse while inside the image area that shows a zoomed part of the image exactly where the tip of the mouse is. I am using a crosshair cursor for more precision. The center of the crosshair should be the center of the zoomed box.

3. Possibly use the up and down arrow keys to zoom in and zoom out. This is not needed, but it could help.

@atokatimauthorApr 17.2009 — #Yeah, that is a little confusing but I see it possibly being able to work. Here is the page that it is on :

http://www.Gothics-R-Us.com/world-map.php

@spiresgateApr 18.2009 — #Good to see it works for you.

As it was explained to me by someone on this forum when I was trying to develop it, there are actually two copies of the world map (form 2) loaded. One is the one you can see and the small panel is actually a cut out part of the screen. The second copy is the large version which is moved behind this cutout window in response to the movement of the cursor - which is why the code is apparently back to front, when the cursor is at 0,0 the big image is placed as far right and down as possible. This might help understand the code better.

I haven't tried it, but presumably you could change the magnification factor (ie the size of the big picture) on an event such as mouseclick or arrow press. For my purposes the fixed factor is acceptable.

@vwphillipsApr 18.2009 — #Draft

[CODE]<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 
 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
 
 <head>
 <title></title>
 <style type="text/css">
 /*<![CDATA[*/
 
 .frame {
 position:absolute;z-Index:2;width:100px;height:100px;border:solid black 1px;
 }
 
 /*]]>*/
 </style>
 
 <script type="text/javascript">
 /*<![CDATA[*/
 
 function zxcPanImage(id,cls,os){
 var oop=new zxcPanImageOOP(id,cls,os);
 }
 
 function zxcPanImageOOP(id,cls,os){
 this.obj=document.getElementById(id);
 this.frame=zxcES('DIV',{position:'absolute',visibility:'hidden',overflow:'hidden'},document.body);
 this.frame.className=cls;
 this.img=zxcES('IMG',{position:'absolute',left:'0px',top:'0px',width:800+'px',height:400+'px'},this.frame);
 this.img.src='http://www.vicsjavascripts.org.uk/StdImages/One.gif'
 this.img.src=this.obj.src;
 this.os=os||5;
 this.addevt(this.obj,'mousemove','msemove');
 this.addevt(this.obj,'mouseout','hide');
 }
 
 zxcPanImageOOP.prototype.msemove=function(e){
 var pos=this.pos(this.obj),mse=this.mse(e),fwh=[this.frame.offsetWidth,this.frame.offsetHeight],r=this.img.width/this.obj.width;
 zxcES(this.frame,{visibility:'visible',left:(mse[0]<pos[0]+this.obj.width-fwh[0]-this.os?mse[0]+this.os:mse[0]-fwh[0]-this.os)+'px',top:mse[1]+'px',top:(mse[1]>pos[1]+fwh[1]+this.os?mse[1]-fwh[1]-this.os:mse[1]+this.os)+'px'});
 zxcES(this.img,{left:Math.min((-mse[0]+pos[0])*r+fwh[0]/2,0)+'px',top:Math.max(Math.min((-mse[1]+pos[1])*r+fwh[1]/2,0),-(this.img.height-fwh[1]))+'px'});
 document.Show.Show0.value=[this.img.offsetTop,-(this.img.height-fwh[1])];
 
 }
 
 zxcPanImageOOP.prototype.hide=function(){
 zxcES(this.frame,{visibility:'hidden'});
 }
 
 zxcPanImageOOP.prototype.pos=function(obj){
 var rtn=[obj.offsetLeft,obj.offsetTop];
 while(obj.offsetParent!=null){
 var objp=obj.offsetParent;
 rtn[0]+=objp.offsetLeft-objp.scrollLeft;
 rtn[1]+=objp.offsetTop-objp.scrollTop;
 obj=objp;
 }
 return rtn;
 }
 
 
 zxcPanImageOOP.prototype.addevt=function(o,t,f,p){
 var oop=this;
 if (o.addEventListener) o.addEventListener(t,function(e){ return oop[f](e,p);}, false);
 else if (o.attachEvent) o.attachEvent('on'+t,function(e){ return oop[f](e,p); });
 else {
 var prev=o['on'+t];
 if (prev) o['on'+t]=function(e){ prev(e); oop[f](e,p); };
 else o['on'+t]=o[f];
 }
 }
 
 zxcPanImageOOP.prototype.mse=function(ev){
 if (document.all) return [ev.clientX+zxcDocS()[0],ev.clientY+zxcDocS()[1]];
 return [ev.pageX,ev.pageY];
 }
 
 function zxcDocS(){
 if (!document.body.scrollTop) return [document.documentElement.scrollLeft,document.documentElement.scrollTop];
 return [document.body.scrollLeft,document.body.scrollTop];
 }
 
 function zxcES(ele,style,par,txt){
 if (typeof(ele)=='string') ele=document.createElement(ele);
 for (key in style) ele.style[key]=style[key];
 if (par) par.appendChild(ele);
 if (txt) ele.appendChild(document.createTextNode(txt));
 return ele;
 }
 
 
 /*]]>*/
 </script>
 </head>
 
 <body onload="zxcPanImage('tst','frame');">
 <img id="tst" src="http://www.gothics-r-us.com/generatemap.php" width="700" height="350"
 style="position:relative;left:100px;"
 />
 
 <script> vic=0; </script>
 <form name=Show id=Show style="position:absolute;visibility:visible;top:420px;left:0px;" >
 <input size=100 name=Show0 >
 <input size=10 name=Show1 >
 <input size=10 name=Show2 >
 <input size=10 name=Show3 >
 <input size=10 name=Show4 >
 <input size=10 name=Show5 >
 <input size=10 name=Show6 >
 <input size=10 name=Show7 >
 <input size=10 name=Show8 >
 <input size=10 name=Show9 ><br>
 <textarea name=TA rows=1 cols=100 ></textarea>
 </form>
 </body>
 
 </html>[/CODE]

@atokatimauthorApr 18.2009 — #what is the code above supposed to do? I have been messing with my code and I can't seem to get the DIV to float right next to the mouse. It keeps wanting to move away from it ? The zoom area is not correct either.

@vwphillipsApr 18.2009 — #I have tested the Code with IE and Firefox

[CODE]<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 
 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
 
 <head>
 <title></title>
 <style type="text/css">
 /*<![CDATA[*/
 
 .frame {
 position:absolute;z-Index:2;width:100px;height:100px;border:solid black 1px;
 }
 
 .menu {
 position:absolute;visibility:hidden;z-Index:3;width:100px;height:92px;border:solid black 1px;background-Color:#FFFFCC;
 font-Size:12px;text-Align:center;cursor:pointer;
 }
 
 /*]]>*/
 </style>
 
 <script type="text/javascript">
 /*<![CDATA[*/
 // Image Pan (18-April-2009) Draft
 // by Vic Phillips http://www.vicsjavascripts.org.uk
 
 
 // Mousover an image and a frame displaying an enlarged version of the image will be displated
 // in a 'frame' adjacent to the mouse position.
 // The framed imageg will be centered in the 'frame' at the mouse position.
 // An option allows a menu to be displayed on double click to expand or contract the 'frame' or framed image size.
 //
 // There may be as many applications as required on a page.
 
 // The script is initialised by a BODY or window event call assign the instance of the script to a variable.
 
 // **** The HTML and CSS Code.
 //
 // The Image must be assigned a unique id name.
 // The 'frame' size and border nust be defined by a CSS class.
 // If a menu is required an element must be defined inthe HTML code
 // and  must be assigned a unique id name consisting of the image id+'menu'.
 // The outline of the menu must be defined by CSS or inline style.
 // Note:
 // The frame and menu must not have a style display of 'none'.
 //
 
 // **** Initalising the Script.
 //
 // The script is initialised by a BODY or window event call assign the instance of the script to a variable.
 // e.g.
 //  var oop=new zxcImagePan('tst','frame',5,2);
 // where:
 //  parameter 0 = the unique ID name of the image.                               (string)
 //  parameter 1 = the class name of the 'frame'.                                 (string)
 //  parameter 2 = (optional) the offset of the 'frame' from the mouse position'. (digits, default = 5)
 //  parameter 3 = (optional) the initial magnification of the framed image.      (digits, default = 5)
 //  parameter 4 = (optional) the src of the framed image.                        (string, default = the src of the main image)
 //
 
 
 // ****** Functional Code(4.02K) - NO NEED to Change.
 
 
 function zxcImagePan(id,cls,os,mag,src){
 mag=mag||1;
 this.os=os||5;
 this.obj=document.getElementById(id);
 this.frame=this.es('DIV',{position:'absolute',visibility:'hidden',overflow:'hidden'},document.body);
 this.frame.className=cls;
 this.img=this.es('IMG',{position:'absolute'},this.frame);
 this.img.src=src||this.obj.src;
 this.es(this.img,{width:(!src?this.obj.width:this.img.width)*mag+'px',height:(!src?this.obj.height:this.img.height)*mag+'px'});
 this.addevt(document,'mousemove','msemove');
 this.menu=document.getElementById(id+'menu');
 if (this.menu){
 this.es(this.menu,{position:'absolute',visibility:'hidden',overflow:'hidden'});
 this.addevt(this.obj,'dblclick','menuopen');
 var items=['Close','Imgage +ve','Imgage -ve','Frame +ve','Frame -ve']
 for (var item,z0=0;z0<items.length;z0++){
 item=this.es('DIV',{height:this.menu.offsetHeight/5+'px',borderBottom:'solid black 1px'},this.menu,items[z0]);
 this.addevt(item,'click','menuselect',z0);
 }
 this.es(this.menu,{height:item.offsetTop+item.offsetHeight+'px'});
 this.fmin=[this.frame.offsetWidth,this.frame.offsetHeight];
 this.imin=[this.img.width,this.img.height];
 }
 }
 
 zxcImagePan.prototype.msemove=function(e){
 this.es(this.frame,{visibility:'hidden'});
 var pos=this.pos(this.obj),mse=this.mse(e),owh=[this.obj.width,this.obj.height];
 if (mse[0]>pos[0]-this.os&&mse[0]<pos[0]+owh[0]+this.os&&mse[1]>pos[1]-this.os&&mse[1]<pos[1]+owh[1]+this.os){
 var fwh=[this.frame.offsetWidth,this.frame.offsetHeight],r=this.img.width/owh[0];
 this.es(this.frame,{visibility:'visible',left:(mse[0]<pos[0]+owh[0]-fwh[0]-this.os?mse[0]+this.os:mse[0]-fwh[0]-this.os)+'px',top:mse[1]+'px',top:(mse[1]>pos[1]+fwh[1]+this.os?mse[1]-fwh[1]-this.os:mse[1]+this.os)+'px'});
 this.es(this.img,{left:Math.max(Math.min((-mse[0]+pos[0])*r+fwh[0]/2,0),-(this.img.width-fwh[0]))+'px',top:Math.max(Math.min((-mse[1]+pos[1])*r+fwh[1]/2,0),-(this.img.height-fwh[1]))+'px'});
 }
 }
 
 zxcImagePan.prototype.menuopen=function(e){
 var mse=this.mse(e)
 this.es(this.menu,{visibility:'visible',left:mse[0]-this.menu.offsetWidth/2+'px',top:mse[1]-this.menu.offsetHeight/2+'px'});
 return false;
 }
 
 zxcImagePan.prototype.menuselect=function(e,nu){
 var iwh=[this.img.width,this.img.height],fwh=[this.frame.offsetWidth,this.frame.offsetHeight];
 if (nu==0) this.es(this.menu,{visibility:'hidden'});
 if (nu==1) this.es(this.img,{width:iwh[0]*1.1+'px',height:iwh[1]*1.1+'px'});
 if (nu==2) this.es(this.img,{width:Math.max(iwh[0]/1.1,this.imin[0])+'px',height:Math.max(iwh[1]/1.1,this.imin[1])+'px'});
 if (nu==3) this.es(this.frame,{width:fwh[0]*1.1+'px',height:fwh[1]*1.1+'px'});
 if (nu==4) this.es(this.frame,{width:Math.max(fwh[0]/1.1,this.fmin[0])+'px',height:Math.max(fwh[1]/1.1,this.fmin[1])+'px'});
 this.msemove(e);
 }
 
 zxcImagePan.prototype.pos=function(obj){
 var rtn=[obj.offsetLeft,obj.offsetTop];
 while(obj.offsetParent!=null){
 var objp=obj.offsetParent;
 rtn[0]+=objp.offsetLeft-objp.scrollLeft;
 rtn[1]+=objp.offsetTop-objp.scrollTop;
 obj=objp;
 }
 return rtn;
 }
 
 
 zxcImagePan.prototype.addevt=function(o,t,f,p){
 var oop=this;
 if (o.addEventListener) o.addEventListener(t,function(e){ return oop[f](e,p);}, false);
 else if (o.attachEvent) o.attachEvent('on'+t,function(e){ return oop[f](e,p); });
 else {
 var prev=o['on'+t];
 if (prev) o['on'+t]=function(e){ prev(e); oop[f](e,p); };
 else o['on'+t]=o[f];
 }
 }
 
 zxcImagePan.prototype.mse=function(ev){
 if (document.all) return [ev.clientX+this.docs()[0],ev.clientY+this.docs()[1]];
 return [ev.pageX,ev.pageY];
 }
 
 zxcImagePan.prototype.docs=function(){
 if (!document.body.scrollTop) return [document.documentElement.scrollLeft,document.documentElement.scrollTop];
 return [document.body.scrollLeft,document.body.scrollTop];
 }
 
 zxcImagePan.prototype.es=function(ele,style,par,txt){
 if (typeof(ele)=='string') ele=document.createElement(ele);
 for (key in style) ele.style[key]=style[key];
 if (par) par.appendChild(ele);
 if (txt) ele.appendChild(document.createTextNode(txt));
 return ele;
 }
 
 
 /*]]>*/
 </script>
 <script  type="text/javascript">
 /*<![CDATA[*/
 function Init(){
 var oop=new zxcImagePan('tst','frame',5,2);
 }
 
 /*]]>*/
 </script>
 
 </head>
 
 <body onload="Init();">
 <img id="tst" src="http://www.gothics-r-us.com/generatemap.php" width="700" height="350" title="Double Click for Menu" alt="World"
 style="position:relative;left:100px;top:50px;"
 />
 <div id="tstmenu" class="menu" ></div>
 
 
 </body>
 
 </html>[/CODE]

@atokatimauthorApr 18.2009 — #it works pretty well but when I scroll the page, it throws everything off ? This was tested in FF.

@vwphillipsApr 18.2009 — #tested scrolling on

http://www.vicsjavascripts.org.uk/ImagePan/ImagePan.htm

works for me with IE and FF

post a link to your test page

@atokatimauthorApr 18.2009 — #Yeah, that would probably help :p

http://www.gothics-r-us.com/world-map.php

@vwphillipsApr 19.2009 — #change this function

[CODE]zxcImagePan.prototype.pos=function(obj){
 var rtn=[obj.offsetLeft,obj.offsetTop];
 while(obj.offsetParent!=null){
 var objp=obj.offsetParent;
 rtn[0]+=objp.offsetLeft;
 rtn[1]+=objp.offsetTop;
 obj=objp;
 }
 return rtn;
 }
 
 [/CODE]

@atokatimauthorApr 19.2009 — #is it my computer or is it something with the script? I can't seem to open :

http://www.gothics-r-us.com/world-map.php

in IE. It says "Internet Explorer cannot open the Internet Site ..... Operation Aborted". I have never seen this before. It works perfect in FF 3.0

@atokatimauthorApr 19.2009 — #ok, got that fixed. left out the window.onload.

Also in #JavaScript _↴

On Submit - Two Scripts to be verified external Javascript/PHP Randomizing a list of numbers

Success!

Help @atokatim spread the word by sharing this article on Twitter...

Tweet This

Need Javascript Image Zoom Script

16 Comments(s) _↴

Also in #JavaScript _↴

Success!

Social

Version

Need Javascript Image Zoom Script

16 Comments(s) ↴

Also in #JavaScript ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

16 Comments(s) _↴

Also in #JavaScript _↴