This is the javascript that manupulates the images. It is slightly modified from the IE version. I can get the map images to display, but can not get them positioned properly nor can I move the black rectangle.
Here is the code:
Expand|Select|Wrap|Line Numbers
- // CREDITS:
- // MapBlaster by Urs Dudli and Peter Gehrig
- // Copyright (c) 2001 Peter Gehrig and Urs Dudli. All rights reserved.
- // Permission given to use the script provided that this notice remains as is.
- // Additional scripts can be found at:
- // http://www.designerwiz.com/24fun/uti...apzoomer2.html
- // 03/07/2001
- // IMPORTANT:
- // If you add this script to a script-library or script-archive
- // you have to add a link to http://www.24fun.com on the webpage
- // where this script will be running.
- // CONFIGURATION:
- // Go to www.24fun.com, open category 'utility' and download
- // the full-version of this script as ZIP-file with
- // step-by-step instructions for non-programmers.
- var isNav, isIE, isFF;
- var offsetX, offsetY;
- var selectedObj;
- var largewidth = 0;
- var largeheight = 0;
- var thumbwidth = Math.floor(largewidth/shrinkfactor);
- var thumbheight = Math.floor(largeheight/shrinkfactor);
- var dragimgwidth = Math.floor(clipwidth/shrinkfactor);
- var dragimgheight = Math.floor(clipheight/shrinkfactor);
- var dragimgleft = thumbleft+3;
- var dragimgtop = thumbtop+3;
- var difleft= largeleft-thumbleft;
- var diftop= largetop-thumbtop;
- var clippoints;
- var cliptop=0;
- var clipbottom=cliptop+clipheight;
- var clipleft=0;
- var clipright=clipleft+clipwidth;
- if (parseInt(navigator.appVersion) >= 4) {
- if (navigator.appName == "Netscape") {
- isNav = true;
- } else {
- isIE = true;
- }
- }
- if (navigator.userAgent.indexOf("Opera")!=-1 && document.getElementById) type="OP"; //Opera
- else if (document.all) isNav = true; //Internet Explorer e.g. IE4 upwards
- else if (document.layers) type="NN"; //Netscape Communicator 4
- else if (!document.all && document.getElementById) isFF=true; //Mozila e.g. Netscape 6 upwards
- else isIE = true; //I assume it will not get here
- function setZIndex(obj, zOrder) {
- obj.zIndex = zOrder;
- }
- function shiftTo(obj, x, y) {
- if (document.layers) {
- if(x<=document.thumb.left) {x=document.thumb.left};
- if(x>=(document.thumb.left+thumbwidth-dragimgwidth-2)) {x=document.thumb.left+thumbwidth-dragimgwidth-2};
- if(y<=document.thumb.top) {y=document.thumb.top};
- if(y>=(document.thumb.top+thumbheight-dragimgheight-2)) {y=document.thumb.top+thumbheight-dragimgheight-2};
- obj.moveTo(x,y);
- } else {
- if(x<=document.getElementById("thumb").style.posLeft) {x=document.getElementById("thumb").style.posLeft};
- if(x>=(document.getElementById("thumb").style.posLeft+thumbwidth-dragimgwidth-2)) {x=document.getElementById("thumb").style.posLeft+thumbwidth-dragimgwidth-2};
- if(y<=document.getElementById("thumb").style.posTop) {y=document.getElementById("thumb").style.posTop};
- if(y>=(document.getElementById("thumb").style.posTop+thumbheight-dragimgheight-2)) {y=document.getElementById("thumb").style.posTop+thumbheight-dragimgheight-2};
- obj.pixelLeft = x;
- obj.pixelTop = y;
- }
- cliptop = (y-thumbtop)*shrinkfactor;
- clipbottom = cliptop+clipheight;
- clipleft = (x-thumbleft)*shrinkfactor;
- clipright = clipleft+clipwidth;
- if (document.all) {
- clippoints ="rect("+cliptop+" "+clipright+" "+clipbottom+" "+clipleft+")";
- document.all.large.style.posTop=largetop-cliptop;
- document.all.large.style.posLeft=largeleft-clipleft;
- document.all.large.style.clip=clippoints;
- }
- if (document.layers) {
- document.large.top=largetop-cliptop;
- document.large.left=largeleft-clipleft;
- document.large.clip.left = clipleft;
- document.large.clip.right = clipright;
- document.large.clip.top = cliptop;
- document.large.clip.bottom = clipbottom;
- }
- if (document.getElementById()) {
- clippoints ="rect("+cliptop+" "+clipright+" "+clipbottom+" "+clipleft+")";
- document.getElementById("large").style.posTop=largetop-cliptop;
- document.getElementById("large").style.posLeft=largeleft-clipleft;
- document.getElementById("large").style.clip=clippoints;
- }
- }
- function setSelectedElem(evt) {
- if (document.layers) {
- var testObj;
- var clickX = evt.pageX;
- var clickY = evt.pageY;
- for (var i = document.layers.length - 1; i >= 0; i--) {
- testObj = document.layers[i];
- if ((clickX > testObj.left) &&
- (clickX < testObj.left + testObj.clip.width) &&
- (clickY > testObj.top) &&
- (clickY < testObj.top + testObj.clip.height && document.layers[i].id=="dragimg")) {
- selectedObj = testObj;
- setZIndex(selectedObj, 100);
- return;
- }
- }
- } else {
- var imgObj = (evt.imgObj) ? evt.imgObj : evt.srcElement;
- if (imgObj.parentElement.id.indexOf("dragimg") != -1) {
- selectedObj = imgObj.parentElement.style;
- setZIndex(selectedObj,100);
- return;
- }
- }
- selectedObj = null;
- return;
- }
- function dragIt(evt) {
- if (selectedObj) {
- if (document.layers) {
- shiftTo(selectedObj, (evt.pageX - offsetX), (evt.pageY - offsetY));
- } else {
- shiftTo(selectedObj, ((window.event) ? window.event :clientX - offsetX), ((window.event) ? window.event : clientY - offsetY));
- return false;
- }
- }
- }
- function engage(evt) {
- setSelectedElem(evt);
- if (selectedObj) {
- if (document.layers) {
- offsetX = evt.pageX - selectedObj.left;
- offsetY = evt.pageY - selectedObj.top;
- } else {
- offsetX = (window.event) ? window.event : offsetX;
- offsetY = (window.event) ? window.event : offsetY + 150;
- }
- }
- return false;
- }
- function release(evt) {
- if (selectedObj) {
- setZIndex(selectedObj, 0);
- selectedObj = null;
- }
- }
- function setNavEventCapture() {
- if (document.layers) {
- document.captureEvents(Event.MOUSEDOWN | Event.MOUSEMOVE | Event.MOUSEUP);
- }
- }
- function init() {
- if (document.layers) {
- var imageurl=document.large.document.largepic.src;
- largewidth=document.large.document.width;
- largeheight=document.large.document.height;
- thumbwidth = Math.floor(largewidth/shrinkfactor);
- thumbheight = Math.floor(largeheight/shrinkfactor);
- document.thumb.document.write("<IMG NAME='thumbpic' SRC='"+imageurl+"' width="+thumbwidth+" height="+thumbheight+">");
- document.thumb.document.close();
- document.dragimg.document.write("<IMG NAME='dragimgpic' border=2 SRC='dragimg.gif' width="+dragimgwidth+" height="+dragimgheight+">");
- document.dragimg.document.close();
- document.large.left=largeleft;
- document.large.top=largetop;
- document.thumb.left=thumbleft;
- document.thumb.top=thumbtop;
- document.dragimg.left=dragimgleft;
- document.dragimg.top=dragimgtop;
- document.large.clip.left=clipleft;
- document.large.clip.right=clipright;
- document.large.clip.top=cliptop;
- document.large.clip.bottom=clipbottom;
- document.large.visibility="visible";
- setNavEventCapture();
- }
- if (document.all) {
- var imageurl=document.largepic.src;
- largewidth=document.all.large.offsetWidth;
- largeheight=document.all.large.offsetHeight;
- thumbwidth = Math.floor(largewidth/shrinkfactor);
- thumbheight = Math.floor(largeheight/shrinkfactor);
- thumb.innerHTML="<IMG NAME='thumbpic' SRC='"+imageurl+"' width="+thumbwidth+" height="+thumbheight+">";
- dragimg.innerHTML="<IMG NAME='dragimgpic' border=2 SRC='dragimg.gif' width="+dragimgwidth+" height="+dragimgheight+">";
- document.all.large.style.posLeft=largeleft;
- document.all.large.style.posTop=largetop;
- document.all.thumb.style.posLeft=thumbleft;
- document.all.thumb.style.posTop=thumbtop;
- document.all.dragimg.style.posLeft=dragimgleft;
- document.all.dragimg.style.posTop=dragimgtop;
- clippoints ="rect("+cliptop+" "+clipright+" "+clipbottom+" "+clipleft+")";
- document.all.large.style.clip=clippoints;
- document.all.large.style.visibility="visible";
- }
- if (document.getElementById) {
- var imageurl=document.largepic.src;
- largewidth=document.getElementById("large").offsetWidth;
- largeheight=document.getElementById("large").offsetHeight;
- thumbwidth = Math.floor(largewidth/shrinkfactor);
- thumbheight = Math.floor(largeheight/shrinkfactor);
- thumb.innerHTML="<IMG NAME='thumbpic' SRC='"+imageurl+"' width="+thumbwidth+" height="+thumbheight+">";
- dragimg.innerHTML="<IMG NAME='dragimgpic' border=2 SRC='dragimg.gif' width="+dragimgwidth+" height="+dragimgheight+">";
- document.getElementById("large").style.posLeft=largeleft;
- document.getElementById("large").style.posTop=largetop;
- document.getElementById("thumb").style.posLeft=thumbleft;
- document.getElementById("thumb").style.posTop=thumbtop;
- document.getElementById("dragimg").style.posLeft=dragimgleft;
- document.getElementById("dragimg").style.posTop=dragimgtop;
- clippoints ="rect("+cliptop+" "+clipright+" "+clipbottom+" "+clipleft+")";
- document.getElementById("large").style.clip=clippoints;
- document.getElementById("large").style.visibility="visible";
- }
- document.onmousedown = engage;
- document.onmousemove = dragIt;
- document.onmouseup = release;
- }
- window.onload=init;