473,241 Members | 1,508 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,241 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 3289
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 thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

2
by: Ohaya | last post by:
Hi, We've been having a problem with one particular page that has a button on it, and a "tall" image (top-to-bottom). The button calls some simple Javascript to print the frame in which the...
23
by: Erik Schulp | last post by:
Hi all, I am using a background image via a stylsheet. I've used this code: background-image:url("/images/tile.gif"); (which I think is correct) The image doesn't show up however, the path,...
2
by: Chris Leipold | last post by:
Hi, I habe a page with an image with variable width. I need a caption below the image with the same width as the image. See http://www.dietzk.de/test/ - the first example is what I need. This...
14
by: D. Alvarado | last post by:
Hello, I am trying to open a window containing an image and I would like the image to be flush against the window -- i.e. have no padding or border. Can I make this happen with a single call to a...
17
by: santel_helvis | last post by:
Hi All, Could anyone tell me how to rotate the image in javascript. Which concepts I should concentrate to rotate the image
4
by: tshad | last post by:
I am trying to set up an Image authorization where you type in the value that is in a picture to log on to our site. I found a program that is supposed to do it, but it doesn't seem to work. ...
3
by: zion | last post by:
Hello, How can I return image link with webservice that I could see it in web page? The image is on my hard disk and <img src="c:\pictures\test.jpg" /does not work. If I use <img src=http://My...
6
by: Tim Streater | last post by:
The statement: myImage.src = "wiggy.jpg"; appears to be a no-operation in FireFox 2.0.0.14 under XP. Works fine in IE7 (XP) and on the Mac under Safari and FF. myImage points to an <img...
4
by: Ryan Knopp | last post by:
This is an update from a previous post, I just simplified the code. It seems that I can't get the image map to work with IE7. The page is located here http://www.theknopps.com/test.html and the...
0
by: fareedcanada | last post by:
Hello I am trying to split number on their count. suppose i have 121314151617 (12cnt) then number should be split like 12,13,14,15,16,17 and if 11314151617 (11cnt) then should be split like...
0
by: stefan129 | last post by:
Hey forum members, I'm exploring options for SSL certificates for multiple domains. Has anyone had experience with multi-domain SSL certificates? Any recommendations on reliable providers or specific...
0
Git
by: egorbl4 | last post by:
Скачал я git, хотел начать настройку, а там вылезло вот это Что это? Что мне с этим делать? ...
1
by: davi5007 | last post by:
Hi, Basically, I am trying to automate a field named TraceabilityNo into a web page from an access form. I've got the serial held in the variable strSearchString. How can I get this into the...
0
by: MeoLessi9 | last post by:
I have VirtualBox installed on Windows 11 and now I would like to install Kali on a virtual machine. However, on the official website, I see two options: "Installer images" and "Virtual machines"....
0
by: DolphinDB | last post by:
The formulas of 101 quantitative trading alphas used by WorldQuant were presented in the paper 101 Formulaic Alphas. However, some formulas are complex, leading to challenges in calculation. Take...
0
by: Aftab Ahmad | last post by:
So, I have written a code for a cmd called "Send WhatsApp Message" to open and send WhatsApp messaage. The code is given below. Dim IE As Object Set IE =...
0
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 6 Mar 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, we are pleased to welcome back...
0
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 6 Mar 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, we are pleased to welcome back...

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.