I need to write a javascript program that shows a map (.png image) on the web, and when the mouse moves over the map, it zooms the area around the pointer. (the zoomed part comes from a high resolution large image which actually should be cropped in order not to be larger than certain size.)
I am a newbie in javascipt, and I have learned some, but still I have no idea how to create a such script. Do I need something extra like CSS, JQuery? I have no experience in web programming, so any help would be much appreciated.
<!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[*/
.tstparent {
position:relative;overflow:hidden;left:100px;top:100px;width:400px;height:300px;border:solid red 1px;
}
#tst {
position:relative;left:0px;top:0px;width:400px;height:300px;
}
.window {
width:100px;height:75px;border:solid red 1px;
}
/*]]>*/
</style>
<script type="text/javascript">
/*<![CDATA[*/
// Zoom Image (28-August-2011)
// by Vic Phillips http://www.vicsjavascripts.org.uk/
function zxcZoomImage(o){
var img=document.getElementById(o.ID),obj=img.parentNode,window=document.createElement('DIV'),zimg=document.createElement('IMG'),src=o.ZoomSRC,zoom=o.Zoom,zoom=typeof(zoom)=='number'?zoom:2,os=o.ZoomWindowOffset;
window.style.position='absolute';
window.style.overflow='hidden';
window.style.visibility='hidden';
window.style.zIndex='2';
window.className=o.WindowClassName;
zimg.style.position='absolute';
zimg.style.width=img.width*zoom+'px';
zimg.style.height=img.height*zoom+'px';
zimg.src=typeof(src)=='string'?src:img.src;
window.appendChild(zimg);
obj.appendChild(window);
this.window=window;
this.zimg=zimg;
this.wh=[obj.offsetWidth,obj.offsetHeight];
this.zoom=zoom;
this.os=typeof(os)=='object'&&os.constructor==Array&&typeof(os[0])=='number'&&typeof(os[1])=='number'?os:[-window.offsetWidth/2,-window.offsetHeight/2];
this.wos=[-window.offsetWidth/2,-window.offsetHeight/2];
this.addevt(document,'mousemove','imgzoom',obj);
}
zxcZoomImage.prototype={
imgzoom:function(e,obj){
var mse=this.mse(e),pos=this.pos(obj),x=mse[0]-pos[0],y=mse[1]-pos[1],wh=this.wh,os=this.os,wos=this.wos,window=this.window,zimg=this.zimg,zoom=this.zoom;
if (x>0&&x<wh[0]&&y>0&&y<wh[1]){
x+=os[0];
y+=os[1];
window.style.left=x+'px';
window.style.top=y+'px';
zimg.style.left=-x*zoom+wos[0]+'px';
zimg.style.top=-y*zoom+wos[0]+'px';
window.style.visibility='visible';
}
else {
window.style.visibility='hidden';
}
},
mse:function(e){
if (window.event){
var docs=[document.body.scrollLeft,document.body.scrollTop];
if (!document.body.scrollTop){
docs=[document.documentElement.scrollLeft,document.documentElement.scrollTop];
}
return [e.clientX+docs[0],e.clientY+docs[1]];
}
return [e.pageX,e.pageY];
},
pos:function(obj){
var rtn=[0,0];
while(obj){
rtn[0]+=obj.offsetLeft;
rtn[1]+=obj.offsetTop;
obj=obj.offsetParent;
}
return rtn;
},
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); });
}
}
/*]]>*/
</script>
<script type="text/javascript">
/*<![CDATA[*/
function Init(){
new zxcZoomImage({
ID:'tst', // the unique ID name of the image to zoom. (string)
WindowClassName:'window', // the class name of the zoom window DIV element. (string)
Zoom:2, //(optional) the zoom factor. (number, default = 2)
ZoomSRC:'http://www.vicsjavascripts.org.uk/StdImages/Egypt5.jpg', //(optional) the file path and name of the zoom image. (string, defaule = the src of the image to zoom)
ZoomWindowOffset:[0,-75] //(optional) the zoom window x and y offsets from the mouse position. (array, default = centered on the mouse position)
});
}
if (window.addEventListener){
window.addEventListener('load',Init, false);
}
else if (window.attachEvent){
window.attachEvent('onload',Init);
}
/*]]>*/
</script>
</head>
<body>
<div class="tstparent" >
<img id="tst" src="http://www.vicsjavascripts.org.uk/StdImages/Egypt5.jpg" alt="img" />
</div>
</body>
</html>
Before you post, read our: 
