hello,
sorry about the repost - I've been posting to several groups and I've
decided it's better to make a single repost to all of them rather than
an extra post in each.
I've been trying to work out why I can't get the image maps to work in
IE6 on a page I'm working on (which is now working in firefox). I've
written the page below as a test case. It's now refusing to work in
Firefox either, and I can't see anything wrong with it so I'm posting
it here for people to have a look at. It looks to me from the troubles
I've had with this that there is a general problem with using
dynamically generated image maps in browsers - they work fine when hard
coded into the page, but when I try to add the map using DOM calls, I
keep having problems.
What should happen with this page is that you press the 'add image'
button, and then the 'add map' button, and then the image should have a
map on it which alerts when you move the mouse over the area (on the
left hand end). This isn't happening - the mouse doesn't change
anywhere on the image, and no alert comes up.
any help would be appreciated, as I'm pretty stumped with this. The
only other option is to write my own imagemap code in javascript, but
I'd rather not ;)
<html>
<head>
<title>Imagemap test</title>
<script type="text/javascript">
function addImage() {
var img=document.createElement("img");
img.src="http://lofty.dyndns.info/pano/images/panoramas/strawbale-200.jpg"
img.setAttribute("usemap","#imgmap",0);
img.style.border="0px";
var div=document.getElementById("containerDiv");
div.appendChild(img);
}
function addMap() {
var map=document.createElement("map");
map.setAttribute("name","imgmap");
var area=document.createElement("area");
area.setAttribute("shape","rect");
area.setAttribute("coords","10,10,190,190");
area.setAttribute("href","pano-test.html");
area.addEventListener("mouseover",message,false);
map.appendChild(area);
var div=document.getElementById("containerDiv");
div.appendChild(map);
}
function message(e) {
alert("mouseover");
}
</script>
</head>
<h1>Imagemap test</h1>
<div id="containerDiv">
</div>
<input type="button" value="add image" onclick="addImage()"><input
type="button" value="add map">
</body>
</html>
