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

L

lofty00

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>
 
R

RobG

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);
Click to expand...

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);
Click to expand...

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) {
Click to expand...

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">
Click to expand...

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

lofty00

RobG said:
(e-mail address removed) wrote:

You have a button with no 'onclick' attribute, so nothin's gunna happen!
:)
Click to expand...

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...
 
L

lofty00

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:
Click to expand...

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>
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Similar Threads

Image shifts to the right when export the page to pdf 4
dynamic image map not working in IE6 0
Help with my responsive home page 2
Make 'Image X' spin 360deg on y-Axis until reset button clicked 1
Only one table shows up with the information 2
Im having trouble containing a title an image and a button 2
Gallery - mosiac/grid layout with filtering and information page popup 1
PNG transparency in IE6 1

Members online

Total: 34 (members: 1, guests: 33)
Robots: 333

Forum statistics

Threads
473,769
Messages
2,569,582
Members
45,067
Latest member
HunterTere

Latest Threads

Top