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
http://aspspider.net/xesus/imagemap/domimagemap.html
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>
<!–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,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=“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>
Suggestion are more than welcome!
Thanks for your time.
Xesus