Entry
How can I change the map associated with an IMG element?
How can I change the map associated with an IMG element?
Feb 24th, 2000 15:20
Martin Honnen,
IE4/5 and NN6 simply allow to script
document['imageName'].useMap = '#mapName';
NN4's DOM doesn't support that but the following code uses layers to
allow for swapping of image maps. You can (as with IE4/5 and NN6) just
define the MAPs inside your html document, instead of the above
assigment you call the provided function showMap (which then does the
layer trick for NN4 and defaults to the above assigment otherwise):
<HTML>
<HEAD>
<SCRIPT>
function showDynMap (imgName, mapName) {
var img = document[imgName];
if (!img.maps)
img.maps = new Object();
if (!img.maps[mapName]) {
var l = img.maps[mapName] = new Layer (img.width);
var oliSrc = window[imgName + 'OverLayer'].src;
var imgTag = '<IMG SRC="' + oliSrc + '" WIDTH="' + img.width + '"
HEIGHT="' + img.height + '" USEMAP="#' + mapName + '" BORDER="0">';
l.document.open();
l.document.write('<HTML><BODY>');
l.document.write(imgTag);
l.document.write('<\/BODY><\/<HTML>');
l.document.close();
l.clip.width = img.width; l.clip.height = img.height;
l.left = img.x; l.top = img.y;
}
img.maps[mapName].visibility = 'show';
for (var m in img.maps)
if (m != mapName)
img.maps[m].visibility = 'hide';
}
function hideDynMap (imgName, mapName) {
var l;
if (l = document[imageName].maps[mapName])
l.visibility = 'hide';
}
function showMap (imageName, mapName) {
if (document.images && document[imageName].useMap)
document[imageName].useMap = '#' + mapName;
else if (document.layers) {
showDynMap ('anImage', mapName);
}
}
</SCRIPT>
</HEAD>
<BODY>
<A HREF="javascript: void 0"
ONCLICK="showMap ('anImage', 'aMap');"
>
map1
</A>
|
<A HREF="javascript: void 0"
ONCLICK="showMap ('anImage', 'a2ndMap');"
>
map2
</A>
|
<A HREF="javascript: void 0"
ONCLICK="showMap ('anImage', 'a3rdMap');"
>
map3
</A>
<BR>
<IMG NAME="anImage" SRC="kiboInside.gif" WIDTH="100" HEIGHT="100"
USEMAP="#aMap" BORDER="0"
ONLOAD="var i = window[this.name + 'OverLayer'] = new Image
(this.width, this.height); i.src = '1x1Transparent.gif';">
<MAP NAME="aMap">
<AREA SHAPE="rect" COORDS="0, 0, 30, 30" HREF="javascript: void 0"
ONCLICK="alert('aMap: ' + 'Kibology for all'); return false;"
>
</MAP>
<MAP NAME="a2ndMap">
<AREA SHAPE="rect" COORDS="50, 50, 100, 100" HREF="javascript: void 0"
ONCLICK="alert('a2ndMap: ' + 'All for Kibology.'); return false;"
>
</MAP>
<MAP NAME="a3rdMap">
<AREA SHAPE="rect" COORDS="50, 0, 100, 50" HREF="javascript: void 0"
ONCLICK="alert('a3rdMap: ' + 'Scriptology for the 21st
Century.'); return false;"
>
</MAP>
</BODY>
</HTML>
The NN4 code needs a 1x1 transparent gif to work
