By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
443,760 Members | 1,630 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 443,760 IT Pros & Developers. It's quick & easy.

image map test page - won't work in IE6 or FF

P: n/a
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>

Jun 9 '06 #1
Share this Question
Share on Google+
3 Replies


P: n/a
lo*****@fastmail.fm wrote:
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);
setAttribute is generally unreliable in IE, I can't test it right now.
It is best to avoid it wherever possible.

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);
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).

map.appendChild(area);
var div=document.getElementById("containerDiv");
div.appendChild(map);
}
function message(e) {
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;
}
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">
You have a button with no 'onclick' attribute, so nothin's gunna happen!
:-)

<input ... onclick="addMap();">

</body>
</html>

--
Rob
Jun 10 '06 #2

P: n/a

RobG wrote:
lo*****@fastmail.fm wrote:

You have a button with no 'onclick' attribute, so nothin's gunna happen!
:-)


Thanks - I just didn't see it for looking!

I've now got it working in FF but not in IE6, which is the way it is
with the app I'm working on as well. The code is now like this:

<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.useMap="#imgmap";
img.style.border="0px";
var div=document.getElementById("containerDiv");
div.appendChild(img);
}
function addMap() {
var map=document.createElement("map");
map.name="imgmap";
var area=document.createElement("area");
area.shape="rect";
area.coords="10,10,190,190";
area.href="pano-test.html";
if (area.addEventListener) {
area.addEventListener("mouseover",message,false);
}
else {
area.attachEvent("onmouseover", message);
}
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" onclick="addMap()">
</body>
</html>

Any ideas on how to get this working in IE would be appreciated...

Jun 10 '06 #3

P: n/a

lo*****@fastmail.fm wrote:
I've now got it working in FF but not in IE6, which is the way it is
with the app I'm working on as well. The code is now like this:


I've cracked it - it works if you hard code the <area name="...."> tag
into the html but add the map areas dynamically:

<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.useMap="#imgmap";
img.style.border="0px";
var div=document.getElementById("containerDiv");
div.appendChild(img);
}
function addMap() {
var map=document.getElementById("imgMapTag");
var area=document.createElement("area");
area.shape="rect";
area.coords="10,10,190,190";
area.href="pano-test.html";
if (area.addEventListener) {
area.addEventListener("mouseover",message,false);
}
else {
area.attachEvent("onmouseover", message);
}
map.appendChild(area);
}
function message(e) {
alert("mouseover");
}
</script>
</head>
<h1>Imagemap test</h1>
<div id="containerDiv">
<map name="imgmap" id="imgMapTag"></map>
</div>
<input type="button" value="add image" onclick="addImage()"><input
type="button" value="add map" onclick="addMap()">
</body>
</html>

Jun 10 '06 #4

This discussion thread is closed

Replies have been disabled for this discussion.