Image Map - Hotspots 1

Basics     Rollover 1     Rollover 2     Dynamic Hotspots 2     Dynamic Hotspots 3

NOTE:
This method does not work in Opera 9.1, the image changes but the hotspots do not.
This is a bug that has been reported and quickly rectified but we have to wait for the next release of Opera.

Note 24/05/07
This was suppposed to have been rectified by "Opera" but still does not work in Opera 9.20 or 9.21 or 9.23 or 9.25 or 9.27

10/12/08
This now works in Opera 9.62

This example shows how to dynamically change the position and/or shape of the hot spots

Top left Top Right Middle Left Middle right Top Left Middle right Bottom Middle

Because the hotspots are either in different positions or different shapes the image and the hotspots co-ordinates are changed.
You create a map for each of the images, putting in the co-ordinates to suit the hotspots in its image.

An example value passed to the function would be mapimage2.jpg#map2 where mapimage2.jpg is the image to be used and #map2 is the map code to be used. 

<HTML>
<HEAD>
<TITLE>Document Title</TITLE>
<script type="text/javascript">
<!--

function swapHotSpots(val){
temp=val.split("#")
document.pic2.src=temp[0]
document.pic2.useMap="#"+temp[1]
}

//-->
</script>
</HEAD>
<BODY>

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

<map name="map1">
<area shape="rect" coords="0,0,48,25" href="#null" alt="Top left" onclick="alert('One')">
<area shape="rect" coords="210,0,258,25" href="#null" alt="Top Right" onclick="alert('Two')">
</map>

<map name="map2">
<area shape="circle" coords="50,70 15" href="#null" alt="Middle Left" onclick="alert('One')">
<area shape="circle" coords="210,70 15" href="#null" alt="Middle right" onclick="alert('Two')">
</map>
<map name="map3">
<area shape="rect" coords="5,15,55,40" href="#null" alt="Top Left" onclick="alert('One')">
<area shape="circle" coords="211,70 16" href="#null" alt="Middle right" onclick="alert('Two')">
<area shape="poly" coords="99,108,103,117,114,118,104,123,107,136,99,130,90,136,92,123,84,118,95,117,99,108" href="#null" alt="Bottom Middle" onclick="alert('Three')">
</map> 
<select name="s2" size="5" onchange="swapHotSpots(this.value)">
<option value="mapimage1.jpg#map1">Hotspots 1
<option value="mapimage2.jpg#map2">Hotspots 2
<option value="mapimage3.jpg#map3">Hotspots 3

</select>

</BODY>
</HTML>