Problem creating an image map using the DOM

**krasnoludek** · Jun 18, 2007 01:32

Hello all,

Problem: IE seems not to behave properly when I write all the code needed for the image map on the fly using the DOM.

I am working on creating an image map dynamically, which is going to be visible only when javascript is enabled. Therefore, I want to write all the xhtml code that is neccesary for the image map on the fly using the DOM(create the image, the map and the areas elements). So far, it works on FF and on Safari for windows. When I mouse over on the map in the latter browsers, the image map behaves as expected, i.e: cursor changes to hand. However, IE doesn't behave that way and i cant see why it is failing. Now, the weird thing is that if i copy the rendered code and create and html file and open it in a browser it works just fine on IE (!!!).

Here is a link where you can see it in action
[/url]http://aspspider.net/xesus/imagemap/domimagemap.html[url]

and here is my code:

Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>

<style type="text/css" media="all">
.imageMap {background: url(http://localhost/php/images/imagemap/smaller_maps/greyMap_small.gif) top left no-repeat!important; border:1px solid #000;}

</style>
<script language="javascript" type="text/javascript">
//object class
function energyRegion(regionId, regionCities, savings, imageMapDetails){
this.regionId = regionId;
this.regionCities = regionCities;
this.savings = savings;
this.shape = imageMapDetails[0];
this.coords = imageMapDetails[1];
this.href = imageMapDetails[2];
}
//create energyRegions array
var energyRegions = new Array();

//create and populate energyRegions arrays
energyRegions[0]= new energyRegion('london',['London','Bromley','Ilford','Beckenham','Sidcup'],250,['poly','104,185,107,192,113,191,117,187,106,185','#']);
energyRegions[1]= new energyRegion('seaboard',['Brighton','Maidstone','Worthing','Ashford','Woking'],275,['poly','99,186,98,189,97,191,96,195,98,198,95,202, 96,205,100,205,106,204,111,205,118,202,121,201,129,197,128,195,132,189,127,187,123,187,120,188,120,187,113,192,106,194, 105,189,100,184,101,185','#']);
energyRegions[2]= new energyRegion('southern',['Reading','Southampton','Swindon','Bournemouth','Basingstoke'],235,['poly','85,174,81,175,78,178,74,181,73,185,74,191,71,195,70,198,71,201,68,205,69,207,70,209,76,209,80,205,82,206,88,212,90,208,91,204,94,205,96,202,97,198,97,193,97,190,101,187,101,183,97,182,93,179,89,177,84,174','#']);
energyRegions[3]= new energyRegion('sweb',['Bristol','Plymouth','Exeter','Weston-super-Mare','Bath'],215,['poly','65,182,58,189,57,192,57,192,42,192,38,194,38,197,34,197,33,200,32,203,28,207,24,208,25,211,19,216,15,217,14,220,17,221,21,220,21,224,25,222,30,218,33,217,37,213,41,215,46,218,54,215,52,212,56,207,61,206,66,210,68,205,68,201,67,197,74,191,72,183,64,183','#']);
energyRegions[4]= new energyRegion('swalec',['Cardiff','Swansea','Newport','Bridgend','Barry'],325,['poly','51,160,47,162,42,163,38,167,30,171,24,173,25,179,29,182,34,180,38,181,38,184,42,184,45,183,49,188,56,188,62,184,65,179,57,173,55,169,55,165,52,160','#']);
energyRegions[5]= new energyRegion('midlands',['Birmingham','Solihull','Stoke-on-Trent','Wolverhampton','Sutton Coldfield'],300,['poly','74,141,65,146,64,151,59,151,55,155,54,160,57,164,56,171,61,174,67,179,65,181,69,182,72,182,75,179,79,175,85,173,80,168,80,163,81,157,74,141','#']);
energyRegions[6]= new energyRegion('eastmidlands',['Nottingham','Leicester','Derby','Coventry','Northampton'],260,['poly','77,140,79,150,83,156,83,163,82,168,91,176,95,170,99,162,98,158,104,155,109,150,111,144,108,139,101,139,95,139,91,136,86,138,77,139','#']);
energyRegions[7]= new energyRegion('eastern',['Norwich','Colchester','Peterborough','Chelmsford'],350,['poly','113,145,108,153,100,156,98,158,99,160,99,163,91,176,102,183,105,184,119,186,124,177,129,173,132,167,133,162,132,152,125,146,113,145','#']);
energyRegions[8]= new energyRegion('manweb',['Liverpool','Warrington','Wirral','Chester','Wrexham'],220,['poly','39,134,38,139,40,142,43,143,35,150,38,154,41,150,42,152,44,154,44,163,48,162,52,161,54,160,55,158,55,155,58,152,64,151,65,146,69,145,69,142,67,139,63,136,60,134,59,138,58,140,54,141,49,141,42,136','#']);
energyRegions[9]= new energyRegion('norweb',['Manchester','Preston','Wigan','Stockport','Oldham'],195,['poly','63,92,63,94,56,98,53,103,53,109,58,118,62,117,62,120,60,123,61,127,60,131,64,134,68,139,69,139,73,139,74,136,72,132,71,129,70,124,69,119,71,114,72,107,68,102,69,97,67,97,68,94','#']);
energyRegions[10]= new energyRegion('yorkshire',['Leeds','Sheffield','Hull','Bradford','Huddersfield'],215,['poly','100,118,92,126,85,126,70,120,72,127,76,139,82,137,87,139,92,136,98,138,109,137,105,128,101,120','#']);
energyRegions[11]= new energyRegion('northern',['Newcastle upon Tyne','York','Sunderland','Stockton-on-Tees','Middlesbrough'],180,['poly','77,79,66,91,66,94,69,95,68,99,70,99,70,103,73,109,73,116,71,119,74,121,77,122,80,124,82,126,83,125,87,125,91,126,99,118,99,113,94,111,89,107,86,102,83,94,77,79,77,79,111,145','#']);
energyRegions[12]= new energyRegion('scottishPower',['Glasgow','Edinburgh','Dunfermline','Kilmarnock','Livingston'],160,['poly','63,59,58,59,55,66,49,65,44,69,39,69,36,66,34,68,34,79,36,82,27,100,34,103,34,100,39,103,42,101,47,103,64,92,65,88,80,76,64,69,59,71,66,64,63,59','#']);
energyRegions[13]= new energyRegion('scottishHydro',['Aberdeen','Dundee','Perth','Inverness','Peterhead'],180,['poly','33,4,29,21,22,22,21,32,23,37,17,36,17,29,13,27,10,30,8,33,6,28,13,20,16,12,16,7,9,11,5,14,5,19,6,22,2,26,1,33,3,36,7,30,10,35,13,37,16,40,19,42,22,40,20,47,17,47,13,41,11,44,3,60,15,50,14,54,16,58,12,60,14,62,18,61,21,61,23,65,19,65,11,73,14,78,19,68,21,68,21,72,19,78,22,87,24,80,28,82,30,78,26,72,26,69,30,73,34,65,34,64,37,67,43,70,46,65,51,65,53,64,58,60,56,58,66,59,72,45,78,35,75,27,68,27,61,27,54,27,49,28,45,29,44,27,49,24,45,23,45,21,62,10,59,5,55,3,51,5,45,5,41,5,33,3','#']);

//create on the fly the image, the cities for each region and the areas for the map
function createCities() {

var bodyElement, divCitiesHolder, divCities, h2, ul, li, divId, map, area;
var imageMapContainer, divImageHolder, image, el;
bodyElement = document.getElementsByTagName('body')[0];
divCitiesHolder = document.createElement('div');
divCitiesHolder.setAttribute('id','displaycities');
map = document.createElement('map');
map.setAttribute('name', 'map');
map.setAttribute('id', 'map');

//reference to the parent element
imageMapContainer = document.getElementById('imageMapContainer');

//create the image holder
divImageHolder = document.createElement('div');
divImageHolder.setAttribute('id', 'image');
image = document.createElement('img');
image.setAttribute('src','../images/imagemap/spacer.gif');
image.setAttribute('alt','Energy regions');
image.setAttribute('width','137');
image.setAttribute('height','228');
image.setAttribute('usemap','#map');
image.className='imageMap';
image.setAttribute('id','imageMap');
//the following line of code is needed in order to get IE to display the background image, IE it is not picking up the style
//in .imageMap
//image.style.background = 'url(http://10.41.44.160/php/images/imagemap/smaller_maps/greyMap_small.gif) left top no-repeat';

//Append image to the divImageHolder element
divImageHolder.appendChild(image);

//append the divImageHolder before the options element
el = document.getElementById('options');
imageMapContainer.insertBefore(divImageHolder, el)

//loop through the object to pull info out.
for(var i=0;i<energyRegions.length; i++) {
divCities = document.createElement('div');
divId = energyRegions[i].regionId +'Cities';
divCities.setAttribute('id',divId);
ul = document.createElement('ul');
h2 = document.createElement('h2');
h2TextNode = document.createTextNode('Save up to ' + energyRegions[i].savings);
h2.appendChild(h2TextNode);

for(var j=0; j<energyRegions[i].regionCities.length; j++){
li = document.createElement('li');
liTextNode= document.createTextNode(energyRegions[i].regionCities[j]);
li.appendChild(liTextNode);
ul.appendChild(li);
}
divCities.appendChild(h2);
divCities.appendChild(ul);
divCitiesHolder.appendChild(divCities);
bodyElement.appendChild(divCitiesHolder);

//create the areas for the image map
area = document.createElement('area');
area.setAttribute('id', energyRegions[i].regionId);
area.setAttribute('shape',energyRegions[i].shape);
area.setAttribute('coords',energyRegions[i].coords);
area.setAttribute('href',energyRegions[i].href);

//append the areas to the map element
map.appendChild(area);

}
//appande map to the body
var imageMap = document.getElementById('image');
imageMap.appendChild(map);
bodyElement.appendChild(map);

}
function addEvent(elm, evType, fn, useCapture)
// cross-browser event handling for IE5+, NS6+ and Mozilla
// By Scott Andrew
{
if (elm.addEventListener) {
elm.addEventListener(evType, fn, useCapture);
return true;
} else if (elm.attachEvent) {
var r = elm.attachEvent('on' + evType, fn);
return r;
} else {
elm['on' + evType] = fn;
}
}

addEvent(window, 'load', createCities, false);
</script>
</head>

<body>

<div id="containerHolder">
<div id="container">
<div id="imageMapHolder">
<h2>Please fill in your details</h2>
<div id="accessible">
<label for="postcode">Please enter your postcode

/label>
<input type="text" id="postcode" value="Enter your postcode" />
</div>
<div id="imageMapContainer">

<div id="options">

<p>How many bedrooms do you have?</p>
<fieldset id="numberBedrooms">
<label for="bedrooms">1</label>
<input type="radio" name="bedrooms" value="1" />
<label for="bedrooms">2</label>
<input type="radio" name="bedrooms" value="2" />
<label for="bedrooms">3</label>
<input type="radio" name="bedrooms" value="3" />
<label for="bedrooms">4</label>
<input type="radio" name="bedrooms" value="4" />
</fieldset>
<p>Number of people?</p>
<fieldset id="numberPeople">
<label for="people">1</label>
<input type="radio" name="people" value="1" />
<label for="people">2</label>
<input type="radio" name="people" value="2" />
<label for="people">3</label>
<input type="radio" name="people" value="3" />
<label for="people">4</label>
<input type="radio" name="people" value="4" />
</fieldset>
<fieldset id="submit">
<p>Get best deals!</p>
<input type="submit" value="Search" />
</fieldset>
</div>
</div>

<br style="clear:both;" />
</div>
</div>
</div>

</body>
</html>

Suggestion are more than welcome!

Thanks for your time.

Xesus

**krasnoludek** · Jun 18, 2007 01:52

Sorry forgot to put the brackets to format the code properly. Here it is.

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<!--link href="styles/imagemap.css" type="text/css" media="all" rel=stylesheet /-->
<style type="text/css" media="all">
.imageMap {background: url(http://localhost/php/images/imagemap/smaller_maps/greyMap_small.gif) top left no-repeat!important; border:1px solid #000;}


</style>
<script language="javascript" type="text/javascript">
//object class
function energyRegion(regionId, regionCities, savings, imageMapDetails){
this.regionId = regionId;
this.regionCities = regionCities;
this.savings = savings;
this.shape = imageMapDetails[0];
this.coords = imageMapDetails[1];
this.href = imageMapDetails[2]; 
}
//create energyRegions array
var energyRegions = new Array();

//create and populate energyRegions arrays
energyRegions[0]= new energyRegion('london',['London','Bromley','Ilford','Beckenham','Sidcup'],250,['poly','104,185,107,192,113,191,117,187,106,185','#']);
energyRegions[1]= new energyRegion('seaboard',['Brighton','Maidstone','Worthing','Ashford','Woking'],275,['poly','99,186,98,189,97,191,96,195,98,198,95,202, 96,205,100,205,106,204,111,205,118,202,121,201,129,197,128,195,132,189,127,187 ,123,187,120,188,120,187,113,192,106,194, 105,189,100,184,101,185','#']);
energyRegions[2]= new energyRegion('southern',['Reading','Southampton','Swindon','Bournemouth','Basingstoke'],235,['poly','85,174,81,175,78,178,74,181,73,185,74,191,71,195,70,198,71,201,68,205, 69,207,70,209,76,209,80,205,82,206,88,212,90,208,91,204,94,205,96,202,97,198,9 7,193,97,190,101,187,101,183,97,182,93,179,89,177,84,174','#']);
energyRegions[3]= new energyRegion('sweb',['Bristol','Plymouth','Exeter','Weston-super-Mare','Bath'],215,['poly','65,182,58,189,57,192,57,192,42,192,38,194,38,197,34,197,33,200,32,203, 28,207,24,208,25,211,19,216,15,217,14,220,17,221,21,220,21,224,25,222,30,218,3 3,217,37,213,41,215,46,218,54,215,52,212,56,207,61,206,66,210,68,205,68,201,67 ,197,74,191,72,183,64,183','#']);
energyRegions[4]= new energyRegion('swalec',['Cardiff','Swansea','Newport','Bridgend','Barry'],325,['poly','51,160,47,162,42,163,38,167,30,171,24,173,25,179,29,182,34,180,38,181, 38,184,42,184,45,183,49,188,56,188,62,184,65,179,57,173,55,169,55,165,52,160', '#']);
energyRegions[5]= new energyRegion('midlands',['Birmingham','Solihull','Stoke-on-Trent','Wolverhampton','Sutton Coldfield'],300,['poly','74,141,65,146,64,151,59,151,55,155,54,160,57,164,56,171,61,174,67,179, 65,181,69,182,72,182,75,179,79,175,85,173,80,168,80,163,81,157,74,141','#']);
energyRegions[6]= new energyRegion('eastmidlands',['Nottingham','Leicester','Derby','Coventry','Northampton'],260,['poly','77,140,79,150,83,156,83,163,82,168,91,176,95,170,99,162,98,158,104,155 ,109,150,111,144,108,139,101,139,95,139,91,136,86,138,77,139','#']);
energyRegions[7]= new energyRegion('eastern',['Norwich','Colchester','Peterborough','Chelmsford'],350,['poly','113,145,108,153,100,156,98,158,99,160,99,163,91,176,102,183,105,184,11 9,186,124,177,129,173,132,167,133,162,132,152,125,146,113,145','#']);
energyRegions[8]= new energyRegion('manweb',['Liverpool','Warrington','Wirral','Chester','Wrexham'],220,['poly','39,134,38,139,40,142,43,143,35,150,38,154,41,150,42,152,44,154,44,163, 48,162,52,161,54,160,55,158,55,155,58,152,64,151,65,146,69,145,69,142,67,139,6 3,136,60,134,59,138,58,140,54,141,49,141,42,136','#']);
energyRegions[9]= new energyRegion('norweb',['Manchester','Preston','Wigan','Stockport','Oldham'],195,['poly','63,92,63,94,56,98,53,103,53,109,58,118,62,117,62,120,60,123,61,127,60, 131,64,134,68,139,69,139,73,139,74,136,72,132,71,129,70,124,69,119,71,114,72,1 07,68,102,69,97,67,97,68,94','#']);
energyRegions[10]= new energyRegion('yorkshire',['Leeds','Sheffield','Hull','Bradford','Huddersfield'],215,['poly','100,118,92,126,85,126,70,120,72,127,76,139,82,137,87,139,92,136,98,138 ,109,137,105,128,101,120','#']);
energyRegions[11]= new energyRegion('northern',['Newcastle upon Tyne','York','Sunderland','Stockton-on-Tees','Middlesbrough'],180,['poly','77,79,66,91,66,94,69,95,68,99,70,99,70,103,73,109,73,116,71,119,74,121 ,77,122,80,124,82,126,83,125,87,125,91,126,99,118,99,113,94,111,89,107,86,102, 83,94,77,79,77,79,111,145','#']);
energyRegions[12]= new energyRegion('scottishPower',['Glasgow','Edinburgh','Dunfermline','Kilmarnock','Livingston'],160,['poly','63,59,58,59,55,66,49,65,44,69,39,69,36,66,34,68,34,79,36,82,27,100,34, 103,34,100,39,103,42,101,47,103,64,92,65,88,80,76,64,69,59,71,66,64,63,59','#']);
energyRegions[13]= new energyRegion('scottishHydro',['Aberdeen','Dundee','Perth','Inverness','Peterhead'],180,['poly','33,4,29,21,22,22,21,32,23,37,17,36,17,29,13,27,10,30,8,33,6,28,13,20,1 6,12,16,7,9,11,5,14,5,19,6,22,2,26,1,33,3,36,7,30,10,35,13,37,16,40,19,42,22,4 0,20,47,17,47,13,41,11,44,3,60,15,50,14,54,16,58,12,60,14,62,18,61,21,61,23,65 ,19,65,11,73,14,78,19,68,21,68,21,72,19,78,22,87,24,80,28,82,30,78,26,72,26,69 ,30,73,34,65,34,64,37,67,43,70,46,65,51,65,53,64,58,60,56,58,66,59,72,45,78,35 ,75,27,68,27,61,27,54,27,49,28,45,29,44,27,49,24,45,23,45,21,62,10,59,5,55,3,5 1,5,45,5,41,5,33,3','#']);

//create on the fly the image, the cities for each region and the areas for the map
function createCities() {

var bodyElement, divCitiesHolder, divCities, h2, ul, li, divId, map, area;
var imageMapContainer, divImageHolder, image, el;
bodyElement = document.getElementsByTagName('body')[0];
divCitiesHolder = document.createElement('div');
divCitiesHolder.setAttribute('id','displaycities');
map = document.createElement('map');
map.setAttribute('name', 'map');
map.setAttribute('id', 'map');

//reference to the parent element
imageMapContainer = document.getElementById('imageMapContainer');

//create the image holder
divImageHolder = document.createElement('div');
divImageHolder.setAttribute('id', 'image');
image = document.createElement('img');
image.setAttribute('src','../images/imagemap/spacer.gif');
image.setAttribute('alt','Energy regions');
image.setAttribute('width','137');
image.setAttribute('height','228');
image.setAttribute('usemap','#map');
image.className='imageMap';
image.setAttribute('id','imageMap');
//the following line of code is needed in order to get IE to display the background image, IE it is not picking up the style
//in .imageMap
//image.style.background = 'url(http://10.41.44.160/php/images/imagemap/smaller_maps/greyMap_small.gif) left top no-repeat';

//Append image to the divImageHolder element
divImageHolder.appendChild(image);

//append the divImageHolder before the options element
el = document.getElementById('options');
imageMapContainer.insertBefore(divImageHolder, el)

//loop through the object to pull info out.
for(var i=0;i<energyRegions.length; i++) {
divCities = document.createElement('div');
divId = energyRegions[i].regionId +'Cities';
divCities.setAttribute('id',divId);
ul = document.createElement('ul');
h2 = document.createElement('h2');
h2TextNode = document.createTextNode('Save up to ' + energyRegions[i].savings);
h2.appendChild(h2TextNode);

for(var j=0; j<energyRegions[i].regionCities.length; j++){
li = document.createElement('li'); 
liTextNode= document.createTextNode(energyRegions[i].regionCities[j]);
li.appendChild(liTextNode);
ul.appendChild(li);
}
divCities.appendChild(h2);
divCities.appendChild(ul);
divCitiesHolder.appendChild(divCities);
bodyElement.appendChild(divCitiesHolder);

//create the areas for the image map
area = document.createElement('area');
area.setAttribute('id', energyRegions[i].regionId);
area.setAttribute('shape',energyRegions[i].shape);
area.setAttribute('coords',energyRegions[i].coords);
area.setAttribute('href',energyRegions[i].href);

//append the areas to the map element
map.appendChild(area);

}
//appande map to the body
var imageMap = document.getElementById('image');
imageMap.appendChild(map);
bodyElement.appendChild(map);

}
function addEvent(elm, evType, fn, useCapture)
// cross-browser event handling for IE5+, NS6+ and Mozilla
// By Scott Andrew
{
if (elm.addEventListener) {
elm.addEventListener(evType, fn, useCapture);
return true;
} else if (elm.attachEvent) {
var r = elm.attachEvent('on' + evType, fn);
return r;
} else {
elm['on' + evType] = fn;
}
}

addEvent(window, 'load', createCities, false);
</script>
</head>

<body>

<div id="containerHolder">
<div id="container">
<div id="imageMapHolder">
<h2>Please fill in your details</h2>
<div id="accessible">
<label for="postcode">Please enter your postcode /label>
<input type="text" id="postcode" value="Enter your postcode" />
</div>
<div id="imageMapContainer">
<!--<div id="image">
<img src="../images/imagemap/spacer.gif" alt="uk" border="0" width="137" height="228" usemap="#map" class="imageMap" id="imageMap" />-->
<div id="options">

<p>How many bedrooms do you have?</p>
<fieldset id="numberBedrooms">
<label for="bedrooms">1</label>
<input type="radio" name="bedrooms" value="1" />
<label for="bedrooms">2</label>
<input type="radio" name="bedrooms" value="2" />
<label for="bedrooms">3</label>
<input type="radio" name="bedrooms" value="3" />
<label for="bedrooms">4</label>
<input type="radio" name="bedrooms" value="4" />
</fieldset>
<p>Number of people?</p>
<fieldset id="numberPeople">
<label for="people">1</label>
<input type="radio" name="people" value="1" />
<label for="people">2</label>
<input type="radio" name="people" value="2" />
<label for="people">3</label>
<input type="radio" name="people" value="3" />
<label for="people">4</label>
<input type="radio" name="people" value="4" />
</fieldset>
<fieldset id="submit">
<p>Get best deals!</p>
<input type="submit" value="Search" />
</fieldset>
</div>
</div>

<br style="clear:both;" />
</div>
</div>
</div>

</body>
</html>

**krasnoludek** · Jun 18, 2007 09:13

Here is the solution:

"E wants us to spell usemap as useMap... Rather annoying, but this should work for IE:

element.setattribute("useMap", "#close");

Or, add a third parameter, which defines case-sensitivity (default is 1, case-sensitive):

element.setattribute("usemap", "#close", 0);"

I found it in this post.

http://www.webmasterworld.com/html/3142618.htm

Thanks

Xesus

**Frank Berger** · Jan 25, 2010 23:14

useMap does NOT work in IE7 in conjunction with image maps/areas.

I found various statements on the web that IE7 is buggy in this respect and I did not succeed in getting my own code to run in IE7. Same code works in IE8 and, of course, in FF 3.x.

**paul_wilkins** · Jan 26, 2010 04:23

Anyone who wants to test usemap with different browsers, http://www.w3schools.com/TAGS/tryit....ryhtml_areamap provides a useful testing page for you to try different things out.

It seems to work on IE8 in IE7 compatibility mode

**Frank Berger** · Jan 28, 2010 01:06

Originally Posted by Frank Berger

useMap does NOT work in IE7 in conjunction with image maps/areas.

I have to correct my statement. One can get it working after circumventing the many bugs that IE7 has.

One trick is to add the map with this hack:

Code:

document.createElement('<map name="someMapName">')

That was for me the only way get give the map a name. All the others don't work in buggy IE7.

**paul_wilkins** · Jan 28, 2010 04:11

Originally Posted by Frank Berger

I have to correct my statement. One can get it working after circumventing the many bugs that IE7 has.

One trick is to add the map with this hack:

Code:

document.createElement('<map name="someMapName">')

That was for me the only way get give the map a name. All the others don't work in buggy IE7.

Hey, here's an idea. How about using the object tag for the image map, instead. The HTML specs show it being used instead of an image, so I guess that IE in this one very rare case are playing strictly by the book for the object tag.

W3C HTML4: Client-side image map examples

Code html4strict:

<HTML>
   <HEAD>
      <TITLE>The cool site!</TITLE>
   </HEAD>
   <BODY>
     <P><OBJECT data="navbar1.gif" type="image/gif" usemap="#map1">
     <MAP name="map1">
       <P>Navigate the site:
       <A href="guide.html" shape="rect" coords="0,0,118,28">Access Guide</a> |
       <A href="shortcut.html" shape="rect" coords="118,0,184,28">Go</A> |
       <A href="search.html" shape="circle" coords="184,200,60">Search</A> |
       <A href="top10.html" shape="poly" coords="276,0,276,28,100,200,50,50,276,0">Top Ten</A>
     </MAP>
     </OBJECT>
   </BODY>
</HTML>

Now you won't need those ugly work-arounds.

**Frank Berger** · Jan 30, 2010 04:10

True is what works - and my hack does work well.

No time to test your proposal as a couple of more IE perversities are waiting to be solved.

The M$ managers in charge who do this to us should be sent to Gitmo...

**paul_wilkins** · Jan 30, 2010 04:33

But, the object element for image maps is what the W3C specs say should be used.
It's what works across all browsers.
It doesn't need JavaScript hacks!

When you have the time, revisit this.

User Tag List

Thread: Problem creating an image map using the DOM

Thread Tools

Display

Problem creating an image map using the DOM

Solution Found

Bookmarks

Bookmarks

Posting Permissions