Image Map - Hotspots 2

Basics     Rollover 1     Rollover 2     Dynamic Hotspots 1     Dynamic Hotspots 3

This example uses three image maps and shows how to dynamically change the image and the position and/or shape of the hot spots using the DOM.

Depending on the image map showing button one swaps the image map, button two loads a page into a new window button three runs a function, or you can change the image map using the links.

This area tag required for validation

Map 1 Map 2 Map 3

The image map is initially coded without any hot spots 

<img name="imagemap" src="mapimage1.jpg" useMap="#map1" width="260" height="146" border="0" alt="">

<map id="map1" name='map1'></map>

The script inserts the required area tags within the map tags with the new co-ordinates and/or shape

An array is used to hold the data for each new area tag (hot spot), this includes the image, the shape, the co-ordinates for the hot spot(s), and your choice of action.

These actions include

Swap the image map
Using the top arrays index number

Load another page
Enter a url

Run a function
Enter the function name preceded by fn, for a function called test you would enter fntest

The action index is highlighted in red in the example script below

If a default url is to be used it must go last in the appropriate array.

You can load the urls in a new window by setting the value of variable usePop to 1, set to zero to open in the current window.

You can also use links to load an image map by including onclick="createHotSpot('n')" to the link, where n is the array index number of the imagemap

To use this example script copy the images used in the above example, right click on the image and click Save Picture As... 

<HTML>
<HEAD>
<TITLE>Document Title</TITLE>
<script type='text/javascript'>

// Jeff
// www.huntingground.freeserve.co.uk

mapArr=[
	["imgmap4.jpg",
	["rect","0,0,48,25","1"],  // shape, coords, action
	["rect","210,0,258,25","url"],
	//  default:- assigns a url for every part of the image that is not designated as a hotspot, if used it must go last
	["default","0,0,260,146","url"]
	],
	
	["imgmap5.jpg",
	["circle","50,70 15","2"],
	["circle","210,70 15","url"]
	],
	
	["imgmap6.jpg",
	["rect","5,15,55,40","0"],
	["circle","211,70 16","url"],
	["poly","99,108,103,117,114,118,104,123,107,136,99,130,90,136,92,123,84,118,95,117,99,108","fntest"] 
	]
]

// enter #null in the action index for no action

usePop=1 // 0 = no, 1 = yes

function createHotSpot(n){
hotSpots=document.getElementById("map1").getElementsByTagName("AREA")
while(hotSpots.length!=0){document.getElementById("map1").removeChild(hotSpots[0])}

for(var i=1;i<mapArr[n].length;i++){
newHotSpot=document.createElement("AREA") // create hot spot

newHotSpot.setAttribute("id","button"+(i))
newHotSpot.setAttribute("shape",mapArr[n][i][0])
newHotSpot.setAttribute("coords",mapArr[n][i][1])

newHotSpot.n=n
newHotSpot.i=i

if(!isNaN(mapArr[n][i][2])){

newHotSpot.onclick=function(){ // set onclick to change image map
createHotSpot(mapArr[this.n][this.i][2])
return false
}

}

else if(/fn/.test(mapArr[n][i][2])){
newHotSpot.onclick=function(){ // set onclick to run function
window[mapArr[this.n][this.i][2].replace(/fn/,"")]()
return false
}
}

else  if(usePop==1&&mapArr[n][i][2]!="#null"){

newHotSpot.onclick=function(){ // set onclick to open new window
openWindow(mapArr[this.n][this.i][2])
return false
}

}
else{

newHotSpot.setAttribute("href",mapArr[n][i][2]) // replace current page

}

document.getElementById("map1").appendChild(newHotSpot)

}

document.imagemap.src=mapArr[n][0] // must go last for NS7

}

function openWindow(url){
newWin = open(url,'','width=200,height=100,top=300,left=250' )
//location=url
}

function test(){
alert("This is a test function")
}

// add onload="createHotSpot('n')" to the opening body tag where n is the index number of the default imagemap

</script>

</HEAD>
<BODY onload="createHotSpot('0')">

<img name="imagemap" src="mapimage1.jpg" useMap="#map1" width="260" height="146" border="0" alt="">

<map id="map1" name='map1'></map>

</BODY>
</HTML>