A javascript program to automatically generate image maps, based on a file on the web or locally on your machine. You can graphically define the zones (rect only) and directly tests them on a second display of your picture.<br /><br />
<h2>CSE&#8482; Image Map Creator</h2>
Generates graphically the HTML code for an image map, with direct test.<br />
<h6>&copy; CSE, 2007</h6>
<hr>
<h3>Procedure</h3>
<form name='action_form' >
<ol><li>Select the image to map:<br />
Either on the internet (URL): <input type=text value="" name="img_url" size="26"> and click <input type=button value="Link URL File" onclick="loadImage();"><br />
Or on your local drive: <input type="file" name="img_path" size="20"> and click <input type=button value="Link Local File" onclick='loadImageLocal()'><br /><font size=-2>The file will not be transmitted over the internet and stay untouched locally on your hard drive	!</font><br />
Or use the image below to see an example...<br /><br />
<hr>

<li>Draw a rectangle on the image below (click and drag)<br /><br />


<script type='text/javascript'>
var moz = ((document.all)? false : true);
var ie = ((document.all)? true : false);
ImageBox.boxes = new Array();
var ElementUtil = new Object();
    
    function xGetElementById(e) {
		if(typeof(e)!='string') return e;
		if (moz) { e=document.getElementById(e);
		} else if (ie) { e=document.all[e];
		} else { e=null; }
		return e;
	}
    
    function ImageBox(imgId) {      
      var origX, origY;
      var imgPosition, imgDimension;
      var dragDiv, overLayer;
      var isCropped = false;
      
      function init() {
        var img = document.getElementById(imgId);        
        imgPosition = ElementUtil.getElementPosition(img);
        imgDimension = ElementUtil.getElementDimension(img);        

        // I put this div over the image to remove drag behaviour 
        // on image in mozilla.
        if(moz) {
          overLayer = document.createElement("div");
          document.body.appendChild(overLayer);
          overLayer.style.position = "absolute";
          overLayer.style.left = imgPosition.left;
          overLayer.style.top = imgPosition.top;
          overLayer.style.width = imgDimension.width;
          overLayer.style.height = imgDimension.height;
        }
        
        dragDiv = document.createElement("div");
        document.body.appendChild(dragDiv);                        
        dragDiv.style.visibility = "hidden";
        dragDiv.style.position = "absolute";
        dragDiv.style.border = "1px solid blue";
        dragDiv.style.width = "0px";
        dragDiv.style.height = "0px";
        dragDiv.style.zIndex = 3;
        dragDiv.style.left = "20px";
        dragDiv.style.top = "20px";
        dragDiv.style.overflow = "hidden";      
                
        if(ie) {
          // Removes default drag behaviour on image
          ElementUtil.addEventListener(img, "drag", function() {return
false;});
          // Adds my "drag" behaviour to the image
          ElementUtil.addEventListener(img, "mousedown", mouseDown);
        }
        if(moz) {
          ElementUtil.addEventListener(overLayer, "mousedown",
mouseDown);      
        }        
      }   

      function mouseDown(evt) {
        if(!evt) {
          evt = event;
        }
        dragDiv.style.visibility = "visible";
        dragDiv.style.left = evt.clientX;
        dragDiv.style.top = evt.clientY;
        dragDiv.style.width = "1px";
        dragDiv.style.height = "1px";
        origX = evt.clientX;
        origY = evt.clientY;
        ElementUtil.addEventListener(document, "mousemove", mouseMove);
        ElementUtil.addEventListener(document, "mouseup", mouseUp); 
        evt.cancelBubble = true;
        return false;     
      }

      function mouseMove(evt) {
        if(!evt) {
          evt = event;
        }                       
        if(evt.clientX < imgPosition.left) {
          dragDiv.style.left = imgPosition.left;
          dragDiv.style.width = origX - imgPosition.left;        
        }
        else if(evt.clientX > (imgPosition.left + imgDimension.width)) {

          dragDiv.style.left = origX;
          if(ie) {            
            dragDiv.style.width = imgDimension.width - (origX -
imgPosition.left);
          }
          else if(moz) {
            dragDiv.style.width = imgDimension.width - (origX -
imgPosition.left) - 2;
          }
        }
        else {
          var newWidth = evt.clientX - origX;
          var newLeft = -1;
          if(newWidth < 0) {
            if(evt.clientX > imgPosition.left) {
              newLeft = evt.clientX;
            }
            newWidth = origX - evt.clientX;
          }
          if(newLeft != -1) {
            dragDiv.style.left = newLeft;
          }
          dragDiv.style.width = newWidth;
        }        
        
        if(evt.clientY < imgPosition.top) {
          dragDiv.style.top = imgPosition.top;
          dragDiv.style.height = origY - imgPosition.top;        
        }
        else if(evt.clientY > (imgPosition.top + imgDimension.height)) {

          dragDiv.style.top = origY;
          if(ie) {
            dragDiv.style.height = imgDimension.height - (origY -
imgPosition.top);
          }
          else if(moz) {
            dragDiv.style.height = imgDimension.height - (origY -
imgPosition.top) - 2;
          }
        }
        else {
          var newHeight = evt.clientY - origY;
          var newTop = -1;
          if(newHeight < 0) {
            if(evt.clientY > imgPosition.top) {
              newTop = evt.clientY;
            }
            newHeight = origY - evt.clientY;
          }
          if(newTop != -1) {
            dragDiv.style.top = newTop;
          }
          dragDiv.style.height = newHeight;
        }
      }      
      
      function mouseUp(evt) {        
        ElementUtil.removeEventListener(document, "mousemove",
mouseMove);  
        ElementUtil.removeEventListener(document, "mouseup", mouseUp);
      } 
      
      init();
            
      this.getX = function() {
        return (parseInt(dragDiv.style.left) -
parseInt(imgPosition.left));
      }
      
      this.getY = function() {
        return (parseInt(dragDiv.style.top) -
parseInt(imgPosition.top));
      }
      
      this.getWidth = function() {
        return parseInt(dragDiv.style.width);
      }
      
      this.getHeight = function() {
        return parseInt(dragDiv.style.height);
      }    
      
      this.toggleCrop = function() {
        var img = document.getElementById(imgId);
        var str = "";
        if(isCropped) {
          str = "rect(auto auto auto auto)";
          isCropped = false;
        }
        else {
          var top = this.getY();
          var left = this.getX();
          var bottom = this.getY() + this.getHeight();
          var right = this.getX() + this.getWidth();
          if(moz) {
            bottom = bottom + 2;
            right = right + 2;
          }
          str = "rect(" + top + "px, " + 
          right + "px, " + 
          bottom + "px, " + left + "px)";  
          isCropped = true;
        }
        img.style.clip = str;
      }  
      
      this.toString = function() {
        var str = "Left: " + this.getX() + "px\n" +
        "Top: " + this.getY() + "px\n" +
        "Width: " + this.getWidth() + "px\n" + 
        "Height: " + this.getHeight() + "px";
        return str;     
      }
    }
    
    ImageBox.createBox = function(imgId) {
      ImageBox.boxes[imgId] = new ImageBox(imgId);
    }
    ImageBox.getBox = function(imgId) {
      return ImageBox.boxes[imgId];
    }
    
    var ElementUtil = new Object();
    ElementUtil.getElementPosition = function(elt){
      var position = new Object();    
      if(elt.style.position == "absolute") {
        position.left = parseInt(elt.style.left);
        position.top = parseInt(elt.style.top);
      }
      else {
        position.left = ElementUtil.calcPosition(elt, "Left");      
        position.top = ElementUtil.calcPosition(elt, "Top");      
      }  
      return position;
    }
    
    ElementUtil.calcPosition = function(elt, dir){
        var tmpElt = elt;
        var pos = parseInt(tmpElt["offset" + dir]);
        while(tmpElt.tagName != "BODY") {
            tmpElt = tmpElt.offsetParent;
            pos += parseInt(tmpElt["offset" + dir]);
        }
        return pos;
    }
    
    ElementUtil.getElementDimension = function(elt) {
      var dim = new Object();
      dim.width = elt.offsetWidth;
      dim.height = elt.offsetHeight;
      return dim;
    }    
    
    ElementUtil.addEventListener = function(o, type, handler) {
      if(ie) {
        o.attachEvent("on" + type, handler);
      }
      else if(moz) {
        o.addEventListener(type, handler, false);
      }
    }

    ElementUtil.removeEventListener = function(o, type, handler) {
      if(ie) {
        o.detachEvent("on" + type, handler);
      }
      else if(moz) {
        o.removeEventListener(type, handler, false);
      }
    }
    
//    window.onload = function() {
//      ImageBox.createBox("image");
//    }
    
    function demo() {
      var box = ImageBox.getBox("image");
	box.toggleCrop();
      alert(box);	
    }
    
var curFocus=null;

function areaFocus() {
alert('Clicked');
return false;
}

var elArea;

function addArea(lft,top,rgt,btm,nme){
elArea=document.createElement("AREA");
elArea.coords=lft + ", " + top + ", " + rgt + ", " + btm;
elArea.shape="rect";
elArea.alt=nme;
elArea.href=nme;
if (document.all)
{
document.all.main_map.areas.add(elArea);
} else {
var mapObj = document.getElementById("main_map");
mapObj.appendChild(elArea);
}
event.returnValue=false;
}
    
    function makeSQL() {
    	var box = ImageBox.getBox("image");
    	var lft = box.getX();
    	var top = box.getY();
    	var rgt = lft + box.getWidth();
    	var btm = top + box.getHeight();
    	
    	area_txt = "&lt;area href='" + action_form.nme.value + "' alt='" + action_form.nme.value + "' shape='rect' coords='" + lft + ", " + top + ", " + rgt + ", " + btm + "'&gt;";
    	
    	var myhtmltxt = area_txt;
    	divref = document.getElementById("html_bx");
    	divref.innerHTML = myhtmltxt;
    	
    	
    	addArea(lft,top,rgt,btm,action_form.nme.value);
    }
    function sql_push() {
    	if (html_bx.innerHTML != "") {
    		if (sql_bx.innerHTML != "") { sql_bx.innerHTML = sql_bx.innerHTML + "<br />"; }
	    	sql_bx.innerHTML = sql_bx.innerHTML + html_bx.innerHTML;
	    	html_bx.innerHTML = "";
	    }
    }
    function area_remove() {
    	if (document.all)
		{
			document.all.main_map.areas.remove(document.all.main_map.areas.length-1);
		} else {
			var mapObj = document.getElementById("main_map");
			mapObj.removeChild(elArea);
		}
    }
    
function imageClicked(eventData) {
eventData = (eventData) ? eventData : event;
if (typeof(eventData.offsetX) != "undefined") {
var x = eventData.offsetX;
var y = eventData.offsetY;
} else {
var x = eventData.clientX;
var y = eventData.clientY;
var xOff = this.offsetLeft;
var yOff = this.offsetTop;
$pElement = this.offsetParent;
while ($pElement != null && $pElement.nodeType==1) {
xOff = xOff + $pElement.offsetLeft;
yOff = yOff + $pElement.offsetTop;
$pElement = $pElement.offsetParent;
}
x = x - xOff;
y = y - yOff;
}
myloc=xGetElementById("map_img");
myloc.style.marginLeft = 150-x;
myloc.style.marginTop = 150-y;
}

function loadImage() {
	document.getElementById("image").src = action_form.img_url.value;
	document.getElementById("img_with_map").src = action_form.img_url.value;
}
function loadImageLocal() {
	//alert(action_form.img_path.value);
	document.getElementById("image").src = "File://" + action_form.img_path.value;
	document.getElementById("img_with_map").src = "File://" + action_form.img_path.value;
}

</script>


<img id="image" src="mambo_header_SMALL.jpg" onload="ImageBox.createBox('image');">
<br /><br />

<li>Type in the link to follow when clicking at this location: <input type=text name=nme value="" size=40><br /><br />
<li>Add the zone to the image below's map by clicking: <input type=button onclick='makeSQL();' value='Add zone'><br />
<div id="html_bx" name="html_bx"></div><br />
<li>Check the zone on the second image below. The link (information pane) will contain the name of the location.<br /><br />

<img id="img_with_map" src="mambo_header_SMALL.jpg" usemap="#main_map"><br /><br />
<li><b>If the zone is not good</b>: <input type=button onclick='area_remove()' value='Remove location'><br /><br />
<li><b>If the zone is good</b>, you can store it by clicking: <input type=button onclick='sql_push()' value='Store Area'><br /><br />
<li><i>You can start again from point 2. above as often as necesary to add new zones.</i><br /><br />
<hr>
<li>When all desired zones are defined, copy the &lt;map&gt; tag below in your HTML document, from "&lt;map name=..." to "...&lt;/map&gt;" - and change its name.<br />Then add in your &lt;img&gt; tag the usemap element such as: <i>usemap='#PUT_NAME_HERE'</i>.<br /><br />
<b>&lt;map name="PUT_NAME_HERE"&gt;</b><br />
<div id="sql_bx" name="sql_bx"></div>
<b>&lt;/map&gt;</b><br /><br />
</form>
</ol>
<font size=-1>That's all Folks!</font><br />
<hr>


<map name="main_map" id="main_map" onclick='areaFocus(); return false'>

</map>