I am trying to make the following code cross platform compliant. It works in IE, but I also want it to work in other browsers. So far I have not been successful in cleaning up the code to either locate the thumbnail and large images correctly on the page nor have I been able to correct the drag code. I suspect it is my confusion about what is Firefox acceptable code.
Pardon the commented out alerts. I was trying to track down the source of the “undefined” variables. I successfully succeded in confusing myself!
Basically there is a dragable “magnifying glass” over the thumbnail that puts the portion of the image under it in the large image. As the magnifying glass is dragged on the thumbnail, the large image changes accordingly.
Thanks in advance for any help.
Here is the code:
// CREDITS:
// MapBlaster by Urs Dudli and Peter Gehrig
// Copyright © 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/utilmapzoomer/utilmapzoomer2.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;
function setZIndex(obj, zOrder) {
obj.zIndex = zOrder;
}
function shiftTo(obj, x, y) {
alert("PosLeft= " + document.getElementById(“thumb”).style.posLeft + “.”);
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;
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) {
var imgObj = (evt.imgObj) ? evt.imgObj : evt.srcElement;
// var imgObj = (evt.imgObj) ? evt.target : evt.imgObj;
alert("evt.imgObj = " + evt.imgObj + “.”);
alert("imgObj = " + imgObj + “.”);
if (imgObj.parentNode.id.indexOf(“dragimg”) != -1) {
selectedObj = imgObj.parentNode.style;
setZIndex(selectedObj,100);
return;
}
selectedObj = null;
return;
}
function dragIt(evt) {
if (selectedObj) {
shiftTo(selectedObj, (evt.clientX - offsetX), (evt.clientY - offsetY));
// alert("SelectedObj = " + selectedObj + “.”);
// alert("Evt.clientX = " + evt.clientX + “.”);
// alert("OffsetX = " + offsetX + “.”);
// shiftTo(selectedObj, ((window.event) ? window.event :clientX - offsetX), ((window.event) ? window.event : clientY - offsetY));
return false;
}
}
function engage(evt) {
alert("evt Event = " + evt + “.”);
setSelectedElem(evt);
if (selectedObj) {
// offsetX = (window.event) ? window.event : offsetX;
// offsetY = (window.event) ? window.event : offsetY + 150;
offsetX = evt.pageX - selectedObj.left
offsetY = evt.pageY - selectedObj.top
}
return false;
}
function release(evt) {
if (selectedObj) {
setZIndex(selectedObj, 0);
selectedObj = null;
}
}
function init() {
var imageurl=document.largepic.src;
largewidth=document.getElementById(“large”).offsetWidth;
alert(“Largewidth " +largewidth+ “.” );
largeheight=document.getElementById(“large”).offsetHeight;
thumbwidth = Math.floor(largewidth/shrinkfactor);
alert(“thumbwidth " +thumbwidth+ “.” );
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.Left=largeleft;
alert("Largeleft " +largeleft+ “.” );
document.getElementById(“large”).style.Top=largetop;
alert("Largetop " +largetop+ “.” );
alert("Imagetop " +document.getElementById(“large”).style.Top+ “.” );
document.getElementById(“thumb”).style.Left=thumbleft;
document.getElementById(“thumb”).style.Top=thumbtop;
document.getElementById(“dragimg”).style.Left=dragimgleft;
document.getElementById(“dragimg”).style.Top=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;
