DHTML - JavaScript Dynamic Image Zone Pointer Code

DHTML - JavaScript Dynamic Image Zone Pointer Code
The DHTML - JavaScript Dynamic Image Zone Pointer Code points out certain zones of an image by dynamically creating a line between text links and the corresponding zone of the image. Very useful web utility for architects, teachers, engineers and so on. Easy configuration of dot colors, dot size and number of dots. Cross-browser.

Test the script
Move your mouse over the text links on top of the page.

Install the script

Step 1: Save this blue-bordered image

as emptydot.gif and put it into the same folder as your web page.

Step 2: Open your web page. Paste the following code right below the <body> tag:

// CREDITS:
// Dynamic Image Zone Pointer
// 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
// 12/27/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 STARTS HERE
////////////////////////////////////////////////////////////////////////////

// URL of the image
var urlimage="skeleton.jpg"

// number of dots that create the dotted lines
var dotnumber=30

// color of pointing lines
var dotcolor="red"

// width of each dot (pixels)
var dotwidth=4

// height of each dot (pixels)
var dotheight=1

// horizontal distance of the image to the left margin of the webpage (pixels)
var img_left=250

// vertical distance of the image to the top margin of the webpage (pixels)
var img_top=0

////////////////////////////////////////////////////////////////////////////
// CONFIGURATION ENDS HERE
//////////////////////////////////////////////////////////////////////////

// Do not edit the code below
var ns6=document.getElementById&&!document.all?1:0
var imgzonex
var imgzoney
var linkx
var linky
var vorzeichenx=1
var vorzeicheny=1
var notinitiated=true

if (document.all || ns6) {
    for (i=1;i<=dotnumber;i++) {
        var zindexcount=1000+i
        document.write("<span id='dot"+i+"' style='position:absolute;left:-10px;top:100px;z-index:"+zindexcount+"'><table cellpadding=0 cellspacing=0 border=0 bgcolor='"+dotcolor+"'><tr><td><img src='emptydot.gif' width='"+dotwidth+"' height='"+dotheight+"' border=0></td></tr></table></span>")
	}
    document.write("<span id='imgcontainer' style='position:absolute;left:"+img_left+"px;top:"+img_top+"px'>")
    document.write("<img src='"+urlimage+"'>")
    document.write("</span>")
}
if (document.layers) {
    for (i=1;i<=dotnumber;i++) {
        document.write("<layer name='dot"+i+"' left=-100 top=-100><table cellpadding=0 cellspacing=0 border=0 bgcolor='"+dotcolor+"'><tr><td><img src='emptydot.gif' width='"+dotwidth+"' height='"+dotheight+"' border=0></td></tr></table></layer>")
	}
    document.write("<layer name='imgcontainer' left="+img_left+" top="+img_top+">")
 document.write("<img src='"+urlimage+"'>")
    document.write("</layer>")
    document.close()
}

function handlerMM(e) {
	linkx = (document.layers || ns6) ? e.pageX : document.body.scrollLeft+event.clientX
	linky = (document.layers || ns6) ? e.pageY : document.body.scrollTop+event.clientY
}

if (document.layers){
	document.captureEvents(Event.MOUSEMOVE);
}

if (document.layers || document.all || ns6) {
    document.onmousemove=handlerMM;
}
// - End of JavaScript - -->
</script>

Step 3: Open your web page. Go to the top of the script and configure the URL and position of your image as well as the color and size of the dotted line.

Step 4: Now the tricky part! Write the position of the image-hotspots into your text links (red and blue code below). The image-hotspots are the zones that your dotted line points out. You may find out the position of your image-hotspots by trial and error. Or you may get it with a free image map-tool! After you have done it your text links should look like this:
<a href="http://www.google.com" onMouseOver="createline(this,47,274)">

red code: do not change the red code.
blue code: the first digit is the distance of the image-hotspot to the left margin of the image (pixels). The second digit is the distance of the image-hotspot to the top margin of the image (pixels).

Download 500 free copy-and-paste scripts. Click here!