User:Stewbasic/map.js

$(document).ready(function{ var x=2600; var y=1600; // start on lumbridge  var cw=800; var ch=400; // canvas width and height in pixels; make these parameters later  var mx=4307-cw; var my=3208-ch;  var imageloaded=false;

function findPos(obj){ // taken from http://www.quirksmode.org/js/findpos.html var ox=oy=0; if(obj.offsetParent) do{ ox+=obj.offsetLeft; oy+=obj.offsetTop; }while(obj=obj.offsetParent); return [ox,oy]; } function mapdown(event){ mdx=event.pageX-mapx; mdy=event.pageY-mapy; } function mapup(event){ var mux=event.pageX-mapx; var muy=event.pageY-mapy; //   alert("Drag: ("+mdx+","+mdy+") -> ("+mux+","+muy+")"); if(mux==mdx&&muy==mdy){ // click }else{ // drag movep(mdx-mux,mdy-muy); draw; } }  function movec(dx,dy){movep(dx*cw/2,dy*ch/2);} function movep(dx,dy){ x+=dx; y+=dy; if(x<0) x=0; if(x>mx) x=mx; if(y<0) y=0; if(y>my) y=my; draw; } function draw{ if(map.getContext){ var ctx=map.getContext("2d"); if(imageloaded){ ctx.drawImage(mapimg,x,y,cw,ch,0,0,cw,ch); }else{ ctx.clearRect(0,0,cw,ch); //       loading image text }   }  } //  initialise stuff function mapinit{ [mapx,mapy]=findPos(map); map.style.width=cw; map.style.height=ch; mapimg=new Image; mapimg.onload=function{imageloaded=true; draw; mapstatus.innerHTML="";} mapimg.src='rsmap.jpg'; mapstatus.innerHTML="Please wait... loading image."; } }}