lofty00@fastmail.fm wrote:[color=blue]
> 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);[/color]
setAttribute is generally unreliable in IE, I can't test it right now.
It is best to avoid it wherever possible.
[color=blue]
> 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);[/color]
IE does uses attachEvent. You can branch here using:
if (area.addEventListener){
area.addEventListener("mouseover", message, false);
} else if (area.attachEvent) {
area.attachEvent("onmouseover", message);
} else {
/* deal with whatever else... */
}
Note the slight differences with syntax - particularly 'on'. Also not
tested in IE.
A simpler way is to use dot property access like you did with img.src,
it will work with IE and Firefox (and probably all other browsers too):
area.onmouseover = message;
Note: use a function reference on the right hand side, don't use '()'.
The property access method works provided you only want the one handler
for a particular event (which covers 99% of cases).
[color=blue]
> map.appendChild(area);
> var div=document.getElementById("containerDiv");
> div.appendChild(map);
> }
> function message(e) {[/color]
When an event handler is attached as above, browsers that use the W3C
event model (most other than IE) will pass a reference to the event
object that called the function as the first paramater, but not IE. If
you want to use the event object in a cross-browser way, add:
var e = e || window.event;
Which is equivalent to the longer (but perhaps more obvious):
if ('object' != typeof e && window.event){
e = window.event;
}
[color=blue]
> 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">[/color]
You have a button with no 'onclick' attribute, so nothin's gunna happen!
:-)
<input ... onclick="addMap();">
[color=blue]
> </body>
> </html>
>[/color]
--
Rob
