Template:EorzeaMapView

 var doc=document,win=window var gElId='getElementById',gElsTN='getElementsByTagName',gAt='getAttribute',sAt='setAttribute',cEl='createElement',apCh='appendChild' var chN='childNodes',nVal='nodeValue',txt='innerHTML',stl='style',cName='className',len='length',shw='display',val='value'

maxwidth = 600; maxheight = 400; maxx = 3000; maxy = 1689; animationspeed = 50; animationstepping = 20; animationtarget = '';

function animatein(posx,stepx,posy,stepy,targetx,targety,zoomh,zoomw,steph,stepw){ if(animationtarget != targetx+'x'+targety){return;} if(!stepw){ stepw = Math.abs(Math.round((maxx - zoomw)/animationstepping)); steph = Math.abs(Math.round((maxy - zoomh)/animationstepping)); posx = 0; posy = 0; stepx = Math.abs(Math.round((targetx - posx)/animationstepping)); stepy = Math.abs(Math.round((targety - posy)/animationstepping)); }	posx = posx - stepx; posy = posy - stepy; zoomh = zoomh + steph; zoomw = zoomw + stepw; doc[gElId]('worldmap')[stl].left = posx+'px'; doc[gElId]('worldmap')[stl].top = posy+'px'; doc[gElId]('worldmapimg')[stl].width = zoomw+'px'; doc[gElId]('worldmapimg')[stl].height = zoomh+'px'; if(!(zoomh > (maxy - animationstepping)) && !(zoomw > (maxx - animationstepping))){ //if(!(posx > (targetx - animationstepping) && (posx < (targetx + animationstepping))) && !(posy > (targety - animationstepping) && (posy < (targety + animationstepping)))){ setTimeout('animatein('+posx+','+stepx+','+posy+','+stepy+','+targetx+','+targety+','+zoomh+','+zoomw+','+steph+','+stepw+')',animationspeed); }else{ doc[gElId]('worldmapimg')[stl].width = maxx+'px'; doc[gElId]('worldmapimg')[stl].height = maxy+'px'; } } function animateout(posx,stepx,posy,stepy,targetx,targety,zoomh,zoomw,steph,stepw){ if(animationtarget != targetx+'x'+targety){return;} if(!stepw){ stepw = Math.abs(Math.round((zoomw - maxwidth)/animationstepping)); steph = Math.abs(Math.round((zoomh - maxheight)/animationstepping)); stepx = Math.abs(Math.round((0 - posx)/animationstepping)); stepy = Math.abs(Math.round((0 - posy)/animationstepping)); }	posx = posx + stepx; posy = posy + stepy; zoomh = zoomh - steph; zoomw = zoomw - stepw; doc[gElId]('worldmap')[stl].left = posx+'px'; doc[gElId]('worldmap')[stl].top = posy+'px'; doc[gElId]('worldmapimg')[stl].width = zoomw+'px'; doc[gElId]('worldmapimg')[stl].height = zoomh+'px'; //if(!(posx > (0 - animationstepping) && (posx < (0 + animationstepping))) && !(posy > (0 - animationstepping) && (posy < (0 + animationstepping))) && !(zoomh > (maxy - animationstepping) && (zoomh < (maxy + animationstepping))) && !(zoomw > (maxx - animationstepping) && (zoomw < (maxx + animationstepping)))){ if(!(zoomh < (maxheight + animationstepping)) && !(zoomw < (maxwidth + animationstepping))){ setTimeout('animateout('+posx+','+stepx+','+posy+','+stepy+','+targetx+','+targety+','+zoomh+','+zoomw+','+steph+','+stepw+')',animationspeed); }else{ doc[gElId]('worldmapimg')[stl].width = maxwidth+'px'; doc[gElId]('worldmapimg')[stl].height = maxheight+'px'; doc[gElId]('worldmap')[stl].left = '0px'; doc[gElId]('worldmap')[stl].top = '0px'; if(animationtarget == '1x1'){return;} setTimeout('animatein('+posx+','+stepx+','+posy+','+stepy+','+targetx+','+targety+','+zoomh+','+zoomw+')',animationspeed); } }

function movepos(targetx,targety){ var posx,posx,stepx,stepy,zoomx,zoomy,zoomh,zoomw,steph,stepw; if(animationtarget == targetx+'x'+targety){return;} animationtarget = targetx+'x'+targety; posx = doc[gElId]('worldmap').offsetLeft; posy = doc[gElId]('worldmap').offsetTop; zoomh = doc[gElId]('worldmapimg').offsetHeight; zoomw = doc[gElId]('worldmapimg').offsetWidth; animateout(posx,stepx,posy,stepy,targetx,targety,zoomh,zoomw,steph,stepw); } 

      
 * 1) worldwrapper {width:600px;height:400px;overflow:hidden;border: 1px solid black;position:relative;left: 50%;margin-left: -300px;}
 * 2) worldmapwrapper {width:600px;height:400px;position:relative;overflow:hidden;float:left;}
 * 3) worldmap {position:relative;}