| home / experts / dhtml / column3 |
 
|
|
Unlike in our previous columns, we did not build a single piece of code page-by-page. Every page was its own little routine. It is fairly straightforward to put it all together, however. We promised at the onset that we would create a routine to be appended to already existing documents. The routines in the previous pages were for in-page inclusion.
As our code has developed, we have two obstacles to the single file idea. The CSS element declaration in our HEAD and the SCRIPT at the end of our document.
First, let's combine the two, by using an in-line STYLE declaration. Our little end snippet then becomes:
Our whole JavaScript code could be placed at the end of the document, as it only contains functions to be used after the page has loaded. Therefore, all our script could be at the end with the snippet appended to it. Since it's all in one place now, we might as well place it in an external file. Therefore, the end of our HTML looks like this:
We've added variables for all the options. In this version of zoomOut.js only one of the options can be selected at a time. If more than one is selected, it will only see the second one. Don't forget that inWind is special and can be used in combination with any of the others.
If you want to link to the same file from different pages, and have different options for each page activated, it is simple. In zoomOut.js, make sure all variables are false or null. Then immediately following the insertion point in your page, put in a little SCRIPT to set the variables. For example, to show only JPGs in-window, with a 3.2 zoom out:
IE4 = (document.all) ? 1 : 0;
NS4 = (document.layers) ? 1 : 0;
ver4 = (IE4 || NS4) ? 1 : 0;
if (ver4) {
whichIm = null;
zoomed = false;
gotIt = false;
scale = 2.5;
allPics = false;
noLinks = false;
justGIFs = false;
justJPGs = false;
byName = false;
inWind = false;
useName = null;
if (NS4) {
document.captureEvents(Event.MOUSEDOWN);
document.onmousedown = findIt;
}
else { document.onclick = findIt }
}
function findIt(e) {
if (zoomed) {
zoomIn();
return false;
}
if (IE4) {
isImage = (event.srcElement.tagName == "IMG") ? 1 : 0;
if (!isImage) { return true }
whichIm = event.srcElement;
isAnchor = (noLinks && event.srcElement.parentElement.tagName == "A") ? 1 : 0;
isLink = (isAnchor && event.srcElement.parentElement.href) ? 1 : 0;
}
else {
if (e.target=="[object Image]") {
whichIm = e.target;
isLink = false;
gotIt = true;
}
else {
isLink = true;
l = e.pageX; t = e.pageY;
gotIt = getImage(l,t)
}
if (!gotIt) { return true };
isImage = true;
}
isGIF = (justGIFs && whichIm.src.indexOf(".gif") != -1) ? 1 : 0;
isJPG = ((justJPGs && whichIm.src.indexOf(".jpg") != -1) || (justJPGs && whichIm.src.indexOf(".jpeg")!=-1)) ? 1 : 0;
isName = (byName && whichIm.name && whichIm.name.indexOf(useName) != -1) ? 1 : 0;
isOK = (allPics) ? 1 : 0;
if (justGIFs) { isOK = (isGIF) ? 1 : 0 };
if (justJPGs) { isOK = (isJPG) ? 1 : 0 };
if (justGIFs && justJPGs) { isOK = (isGIF || isJPG) ? 1 : 0 };
if (noLinks) { isOK = (!isLink) ? 1 : 0 };
if (byName) { isOK = (isName) ? 1 : 0 };
if (isOK) {
if (IE4) {
if (inWind) { zoomOutInEl() }
else { zoomOutInPage() };
return false;
}
else { zoomOutInEl(); return false }
}
return true
}
function getImage(l,t) {
for (i=0; i<document.images.length; i++) {
imX1 = document.images[i].x;
imX2 = imX1 + document.images[i].width;
imY1 = document.images[i].y;
imY2 = imY1 + document.images[i].height;
if ((l >= imX1 && l <= imX2) && (t >= imY1 && t<= imY2)) {
whichIm = document.images[i];
gotIt = true; break;
}
}
return gotIt
}
function zoomOutInPage() {
whichIm.width = whichIm.width * scale;
whichIm.height = whichIm.height * scale;
zoomed = true;
}
function zoomOutInEl(){
newWidth = whichIm.width * scale;
newHeight = whichIm.height * scale;
bigImStr = "<IMG NAME='imBig' SRC=\"" + whichIm.src + "\" WIDTH=" + newWidth + " HEIGHT=" + newHeight + " BORDER=0>";
if (NS4) {
with (document.elZoom.document) {
open();
write(bigImStr);
close();
}
}
else { elZoom.innerHTML = bigImStr };
if (NS4) {
document.elZoom.moveTo(whichIm.x,whichIm.y);
winPosL = document.elZoom.left - pageXOffset;
winPosT = document.elZoom.top - pageYOffset;
}
else {
document.elZoom.left = whichIm.offsetLeft + whichIm.hspace;
document.elZoom.top = whichIm.offsetTop;
winPosL = elZoom.offsetLeft - document.body.scrollLeft;
winPosT = elZoom.offsetTop - document.body.scrollTop;
}
winWidth = (NS4) ? window.innerWidth : document.body.clientWidth;
winHeight = (NS4) ? window.innerHeight : document.body.clientHeight;
if (winPosL + newWidth > winWidth) {
newPosL = (winWidth - (winPosL + newWidth) - 30);
document.elZoom.left = parseInt(document.elZoom.left) + newPosL;
}
if (winPosT + newHeight > winHeight) {
newPosT = (winHeight - (winPosT + newHeight) - 10);
document.elZoom.top = parseInt(document.elZoom.top) + newPosT;
}
document.elZoom.visibility = "visible";
zoomed = true;
}
function zoomIn() {
if (IE4 && !inWind) {
whichIm.width = whichIm.width/scale;
whichIm.height = whichIm.height/scale;
}
else { document.elZoom.visibility='hidden' }
gotIt = false;
zoomed = false;
}
if (ver4) {
document.write("<DIV ID='elZoom' STYLE='position: absolute; visibility: hidden;'></DIV>");
if (IE4) { document.elZoom = document.all.elZoom.style }
}
This file is, of course, already in your cache, since it was used with many of the previous pages. But you can download it if you like.
Produced by Peter Belesis and
Legal Notices, Licensing, Reprints, Permissions, Privacy Policy.
Advertise | Newsletters | Shopping | E-mail Offers | Freelance Jobs 
All Rights Reserved. Legal Notices.
Created: 08/27/97
Revised: 11/09/97
URL: http://www.webreference.com/dhtml/column3/allCode.html
