471,596 Members | 818 Online
Bytes | Software Development & Data Engineering Community
Post +

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 471,596 software developers and data experts.

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

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
3 3218
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

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

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.

Similar topics

23 posts views Thread by Erik Schulp | last post: by
2 posts views Thread by Chris Leipold | last post: by
14 posts views Thread by D. Alvarado | last post: by
17 posts views Thread by santel_helvis | last post: by
4 posts views Thread by tshad | last post: by
3 posts views Thread by zion | last post: by
6 posts views Thread by Tim Streater | last post: by
4 posts views Thread by Ryan Knopp | last post: by
reply views Thread by XIAOLAOHU | last post: by
reply views Thread by leo001 | last post: by

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.