...

View Full Version : Zoom in/out function on JPGS?



Jemdt
05-21-2012, 11:25 PM
Hi,

I recently uploaded an interactive map which, for the most part, I'm happy with. However, I would like to add a zoom in/out function to the map; for example, when the mouse is scrolled the jpg zooms out.


What exactly would be the code for that? Thanks


Map can be viewed BY CLICKING HERE. (http://pastehtml.com/view/byur0l5ld.html)

Philip M
05-22-2012, 11:48 AM
http://www.javascriptkit.com/script/script2/imagezoom.shtml

http://www.vicsjavascripts.org.uk/ImageZoom/ImageZoom.htm?1337680202408



All advice is supplied packaged by intellectual weight, and not by volume. Contents may settle slightly in transit.

vwphillips
05-22-2012, 04:34 PM
<!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[*/

.box {
position:relative;overflow:hidden;width:635px;height:503px;border:solid red 1px;
}

/*]]>*/
</style>
<script type="text/javascript">
/*<![CDATA[*/
// Pan Zoonm (22-May-2012)
// by Vic Phillips http://www.vicsjavascripts.org.uk/

var zxcPanZoom={

init:function(o){
var id=o.ID,img=document.getElementById(id),p=img.parentNode,obj;
img.style.position='absolute';
img.style.left=-o.startX+'px';
img.style.top=-o.startY+'px';
this[id]=obj={
oop:this,
id:id,
img:img,
pw:p.offsetWidth,
ph:p.offsetHeight,
xcord:document.getElementById(o.xcord),
ycord:document.getElementById(o.ycord),
mag:1,
inc:typeof(o.zoomincrement)=='number'?o.zoomincrement:.1,
zoommax:typeof(o.zoommax)=='number'?o.zoommax:2,
drag:false
}
this.addevt(img,'mousedown','down',obj);
this.addevt(img,'mousemove','move',obj);
this.addevt(document,'mouseup','up',obj);
this.addevt(p,'mouseover','wheel',obj);
this.addevt(p,'mouseout','wheel',obj);
},

down:function(e,o){
o.mse=[e.clientX,e.clientY];
o.drag=true;
this.wheel(e,o);
this.rtn(e);
},

move:function(e,o){
if (o.drag){
var mse=[e.clientX,e.clientY],lft=parseInt(o.img.style.left),top=parseInt(o.img.style.top);
o.img.style.left=Math.max(Math.min(lft+mse[0]-o.mse[0],0),-o.img.width+o.pw)+'px'
o.img.style.top=Math.max(Math.min(top+mse[1]-o.mse[1],0),-o.img.height+o.ph)+'px'
o.mse=mse;
this.input(o);
}
this.rtn(e);
},

up:function(e,o){
o.drag=false;
},

input:function(o){
if (o.xcord&&o.ycord){
o.xcord.value=parseInt(o.img.style.left);
o.ycord.value=parseInt(o.img.style.top);
}
},

Zoom:function(id,ud){
var o=this[id]
if (o&&typeof(ud)=='number'){
var mag=Math.min(Math.max(o.mag+o.inc*(ud<0?-1:1),1),o.zoommax),w=o.img.width,h=o.img.height;
o.img.style.left=(parseInt(o.img.style.left)-o.pw/2)/o.mag*mag+o.pw/2+'px';
o.img.style.top=(parseInt(o.img.style.top)-o.ph/2)/o.mag*mag+o.ph/2+'px';
o.img.style.width=w/o.mag*mag+'px'
o.img.style.height=h/o.mag*mag+'px'
o.mag=mag;
this.input(o);
}
},

GoTo:function(id,sel){
var o=this[id],si=sel.options[sel.selectedIndex],lft=si.getAttribute('data-x'),top=si.getAttribute('data-y');
if (o){
if (isFinite(lft)&&isFinite(top)){
o.img.style.left=lft*o.mag+'px';
o.img.style.top=top*o.mag+'px';
this.input(o);
}
}
},

wheel:function(e,o){
if (window['zxcWheel']){
zxcWheel.oop=e.type=='mouseout'?false:o;
}
},

rtn:function(e){
if(e.stopPropagation){
e.stopPropagation();
}
if (!window.event){
e.preventDefault();
}
e.cancelBubble=true;
e.cancel=true;
e.returnValue=false;
return false;
},

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); });
}

}


// Optional Mouse Wheel Code.
function zxcWheel(e){
e=e?e:window.event;
if (zxcWheel.oop){
var oop=zxcWheel.oop,ud=e.detail?e.detail>0?-1:1:e.wheelDelta/40>0?1:-1;
oop.oop.Zoom(oop.id,ud);
if(e.stopPropagation){
e.stopPropagation();
}
if (!window.event){
e.preventDefault();
}
e.cancelBubble=true;
e.cancel=true;
e.returnValue=false;
return false;
}
}

if(document.addEventListener) {
document.addEventListener('DOMMouseScroll',zxcWheel,false);
document.addEventListener('DOMMouseScroll',zxcWheel,false);
document.addEventListener('mousewheel',zxcWheel,false);
document.addEventListener('mousewheel',zxcWheel,false);
}
else if(document.attachEvent){
document.attachEvent('onmousewheel',zxcWheel);
document.attachEvent('onmousewheel',zxcWheel);
}


window.onload=function(){
zxcPanZoom.init({
ID:'worldMap',
startX: 1820,
startY: 1174,
zoommax:4,
zoomincrement:.1,
xcord:'xcord',
ycord:'ycord'
});
}

/*]]>*/
</script></head>

<body>
<form>
X: <input type="text" id="xcord" readonly="readonly" /> Y: <input type="text" id="ycord" readonly="readonly" />
<select id="movecoords" onchange="zxcPanZoom.GoTo('worldMap',this);">
<option value="Location Home">Choose a Location...</option>
<option value="Al Kharid" data-x="-1963" data-y="-1385">Al Kharid</option>
<option value="Ape Atoll" data-x="-957" data-y="-2097">Ape Atoll</option>
<option value="Barbarian Outpost" data-x="-401" data-y="-531">Barbarian Outpost</option>
<option value="Barbarian Village" data-x="-1544" data-y="-858">Barbarian Village</option>
</select>
<input type="button" name="" value="Zoom +ve" onmouseup="zxcPanZoom.Zoom('worldMap',1);"/>
<input type="button" name="" value="Zoom -ve" onmouseup="zxcPanZoom.Zoom('worldMap',-1);"/>
</form>
<div class="box" >
<img id="worldMap" src="http://testingwebsite1.net23.net/rmap.jpg" alt="WorldMap">
</div>




</body>

</html>

rnd me
05-23-2012, 04:18 AM
//on http://pastehtml.com/raw/byur0l5ld.html:

document.getElementById("worldMap").onmouseover=function(){
var h=parseInt(this.height),
w=parseInt(this.width),
l=parseInt(this.style.left),
t=parseInt(this.style.top);

this.style.height=parseInt(h/2)+"px";
this.style.width=parseInt(w/2)+"px";
this.style.left=parseInt(l/2)+"px";
this.style.top=parseInt(t/2)+"px";
}


document.getElementById("worldMap").onmouseout=function(){
var h=parseInt(this.height),
w=parseInt(this.width),
l=parseInt(this.style.left),
t=parseInt(this.style.top);

this.style.height=parseInt(h/0.5)+"px";
this.style.width=parseInt(w/0.5)+"px";
this.style.left=parseInt(l/0.5)+"px";
this.style.top=parseInt(t/0.5)+"px";
}

beatrizsena
06-25-2012, 02:09 PM
I have a question like that, but in my case, I would like to zoom in and zoom out worked with a click and zoom that not only leave the center of the image but the location clicked by the user.
Could anyone help me? :(

thanks. :thumbsup:



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum