JavaScript Map Blaster: elegant map zoom utility code snippet

JavaScript Map Blaster: elegant map zoom utility code snippet
This is probably the most useful and elegant way to present and zoom large maps, big town plans, oversized images, blueprints without cumbersome scrolling. Combines drag and drop functionality and stylish looks. 2-minute-configuration. Crossbrowser IE4x and NN4x (not NN6).

Drag the small black-bordered rectangle (inside the thumbnail image on the left) in order to see the zoom-effect on the right.

Configuration:

Step 1: Download the zipped-file 'utilmapzoomer.zip'.

Step 2: Unzip the file 'utilmapzoomer.zip', extract the script-file 'utilmapzoomer.js', and the two images 'testmap.jpg' and 'dragimg.gif'.

Step 3: Put the script-file 'utilmapzoomer.js', and the two images 'testmap.jpg' and 'dragimg.gif' into the same folder as your webpage.

Step 4: Open your webpage and paste the following code right below the <body>-tag:

<SCRIPT>
// 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.24fun.com & http://www.designerwiz.com
// info@24fun.com
// 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.

// The value '6' means the thumbnailimage is 8 times smaller than the original image of your map.
// Set this value to your needs
var shrinkfactor=5

// left and top position of the thumbnailimage 
// (distance to the left and top browser-margin, pixels)
var thumbleft = 30
var thumbtop = 30

// left and top position of the zoomed image 
// (distance to the left and top browser-margin, pixels)
var largeleft = 310
var largetop = 30

// width and height of the enlarged image's sector (visible part, pixels)
var clipwidth = 250
var clipheight = 167
</SCRIPT>
<SCRIPT SRC="utilmapzoomer.js"></SCRIPT>
<DIV style="position:absolute;visibility:hidden;" ID="large"><IMG NAME="largepic" SRC="testmap.jpg"></DIV>
<DIV style="position:absolute;" ID="thumb"></DIV>
<DIV style="position:absolute;" ID="dragimg"></DIV>

IMPORTANT: Do not paste the code into tables or <DIV> and </DIV> tags or between any other container tags!

Step 5: Open your web page and write the URL of your map image right into the <DIV> container below (red code):
<DIV style="position:absolute;visibility:hidden;" ID="large"><IMG NAME="largepic" SRC="url_of_your_map.jpg"></DIV>

Step 6: Open your web page, go to the top of the script and and configure the size and position of the elements (red code):

// // The value '6' means the thumbnailimage is 6 times smaller than the original image of your map.
// Set this value to your needs
var shrinkfactor=6

// left and top position of the zoomed image
// (distance to the left and top browser-margin, pixels)
var largeleft = 310
var largetop = 30

// left and top position of the thumbnailimage
// (distance to the left and top browser-margin, pixels)
var thumbleft = 30
var thumbtop = 30

// width and height of the enlarged image's sector (visible part, pixels)
var clipwidth = 250
var clipheight = 167

Step 7: Do you want to get rid of the horizontal scroll bar? Add the red code below into the <body>-tag:
<BODY style="width:100%;overflow-x:hidden;overflow-y:scroll">
Download 500 free copy-and-paste scripts