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

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>Imagem ap test</title>
<script type="text/javascript">
function addImage() {
var img=document.cr eateElement("im g");
img.src="http://lofty.dyndns.in fo/pano/images/panoramas/strawbale-200.jpg"
img.setAttribut e("usemap","#im gmap",0);
img.style.borde r="0px";
var div=document.ge tElementById("c ontainerDiv");
div.appendChild (img);
}
function addMap() {
var map=document.cr eateElement("ma p");
map.setAttribut e("name","imgma p");
var area=document.c reateElement("a rea");
area.setAttribu te("shape","rec t");
area.setAttribu te("coords","10 ,10,190,190");
area.setAttribu te("href","pan o-test.html");
area.addEventLi stener("mouseov er",message,fal se);
map.appendChild (area);
var div=document.ge tElementById("c ontainerDiv");
div.appendChild (map);
}
function message(e) {
alert("mouseove r");
}
</script>
</head>
<h1>Imagemap test</h1>
<div id="containerDi v">
</div>
<input type="button" value="add image" onclick="addIma ge()"><input
type="button" value="add map">
</body>
</html>

Jun 9 '06 #1

Subscribe Reply

3313

RobG

lo*****@fastmai l.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>Imagem ap test</title>
<script type="text/javascript">
function addImage() {
var img=document.cr eateElement("im g");
img.src="http://lofty.dyndns.in fo/pano/images/panoramas/strawbale-200.jpg"
img.setAttribut e("usemap","#im gmap",0);
setAttribute is generally unreliable in IE, I can't test it right now.
It is best to avoid it wherever possible.

img.style.borde r="0px";
var div=document.ge tElementById("c ontainerDiv");
div.appendChild (img);
}
function addMap() {
var map=document.cr eateElement("ma p");
map.setAttribut e("name","imgma p");
var area=document.c reateElement("a rea");
area.setAttribu te("shape","rec t");
area.setAttribu te("coords","10 ,10,190,190");
area.setAttribu te("href","pan o-test.html");
area.addEventLi stener("mouseov er",message,fal se);
IE does uses attachEvent. You can branch here using:

if (area.addEventL istener){
area.addEventLi stener("mouseov er", message, false);
} else if (area.attachEve nt) {
area.attachEven t("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.onmouseove r = 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.ge tElementById("c ontainerDiv");
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("mouseove r");
}
</script>
</head>
<h1>Imagemap test</h1>
<div id="containerDi v">
</div>
<input type="button" value="add image" onclick="addIma ge()"><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

lofty00

RobG wrote:

lo*****@fastmai l.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>Imagem ap test</title>
<script type="text/javascript">
function addImage() {
var img=document.cr eateElement("im g");
img.src="http://lofty.dyndns.in fo/pano/images/panoramas/strawbale-200.jpg";
img.useMap="#im gmap";
img.style.borde r="0px";
var div=document.ge tElementById("c ontainerDiv");
div.appendChild (img);
}
function addMap() {
var map=document.cr eateElement("ma p");
map.name="imgma p";
var area=document.c reateElement("a rea");
area.shape="rec t";
area.coords="10 ,10,190,190";
area.href="pano-test.html";
if (area.addEventL istener) {
area.addEventLi stener("mouseov er",message,fal se);
}
else {
area.attachEven t("onmouseover" , message);
}
map.appendChild (area);
var div=document.ge tElementById("c ontainerDiv");
div.appendChild (map);
}
function message(e) {
alert("mouseove r");
}
</script>
</head>
<h1>Imagemap test</h1>
<div id="containerDi v">
</div>
<input type="button" value="add image" onclick="addIma ge()"><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

lofty00

lo*****@fastmai l.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>Imagem ap test</title>
<script type="text/javascript">
function addImage() {
var img=document.cr eateElement("im g");
img.src="http://lofty.dyndns.in fo/pano/images/panoramas/strawbale-200.jpg";
img.useMap="#im gmap";
img.style.borde r="0px";
var div=document.ge tElementById("c ontainerDiv");
div.appendChild (img);
}
function addMap() {
var map=document.ge tElementById("i mgMapTag");
var area=document.c reateElement("a rea");
area.shape="rec t";
area.coords="10 ,10,190,190";
area.href="pano-test.html";
if (area.addEventL istener) {
area.addEventLi stener("mouseov er",message,fal se);
}
else {
area.attachEven t("onmouseover" , message);
}
map.appendChild (area);
}
function message(e) {
alert("mouseove r");
}
</script>
</head>
<h1>Imagemap test</h1>
<div id="containerDi v">
<map name="imgmap" id="imgMapTag"> </map>
</div>
<input type="button" value="add image" onclick="addIma ge()"><input
type="button" value="add map" onclick="addMap ()">
</body>
</html>

Jun 10 '06 #4

Similar topics

1805

Printed image gets truncated with Netscape 7.1

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 image is located, and what is happening in the field is that the image only gets partly printed. Only the first page gets printed, and the bottom of the image, which should get printed on a 2nd page, is not printed. Also, the bottom of the first...

HTML / CSS

7712

background image

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, the filename etc etc, everything checks out ok.

HTML / CSS

2635

Image Captions

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 first example works fine as long as I know the image width. But if I don't know it (and later I won't) it does not. I tried examples 2 and 3. But they don't work :-(

HTML / CSS

11068

Opening image in new window without padding

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 window.open function? I would prefer not to create a separate HTML page. So far all I have is the basic var cwin = window.open('images/KJV-THANKS.gif', 'Thanks', 'width=243,height=420,'); cwin.focus();

HTML / CSS

29390

How to rotate the image

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

Javascript

2745

Creating Random Image Authorization

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. It should put a blue and yellow box on the page with "This is a test" as part of the picture. But what I get is a broken Gif. The other problem is that I can't view the source???? The view source is disabled for this page. What causes this?

ASP.NET

6114

Return image link with webservice

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 comuter/Virtual directory/test.jpg /it's working but I can't use this because the image path is in DB with phisycal location. Thanks

C# / C Sharp

1311

Problem with loading image in FF-Win

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 ...and wiggy.jpg is in the same directory as the HTML file (a network mount, from which all these browsers were accessing it).

Javascript

4720

creating image maps with dom not working in IE 7

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 source below. I can't seem to figure out why IE7 won't recognize the image map. Thanks for your help Ryan

Javascript

8162

What is ONU?

by: marktang | last post by:

ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However, people are often confused as to whether an ONU can Work As a Router. In this blog post, we’ll explore What is ONU, What Is Router, ONU & Router’s main usage, and What is the difference between ONU and Router. Let’s take a closer look ! Part I. Meaning of...

General

8605

Problem With Comparison Operator <=> in G++

by: Oralloy | last post by:

Hello folks, I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>". The problem is that using the GNU compilers, it seems that the internal comparison operator "<=>" tries to promote arguments from unsigned to signed. This is as boiled down as I can make it. Here is my compilation command: g++-12 -std=c++20 -Wnarrowing bit_field.cpp Here is the code in...

C / C++

8246

The easy way to turn off automatic updates for Windows 10/11

by: Hystou | last post by:

Overview: Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows Update option using the Control Panel or Settings app; it automatically checks for updates and installs any it finds, whether you like it or not. For most users, this new feature is actually very convenient. If you want to control the update process,...

Windows Server

8415

Discussion: How does Zigbee compare with other wireless protocols in smart home applications?

by: tracyyun | last post by:

Dear forum friends, With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each protocol has its own unique characteristics and advantages, but as a user who is planning to build a smart home system, I am a bit confused by the choice of these technologies. I'm particularly interested in Zigbee because I've heard it does some...

General

5532

Couldn’t get equations in html when convert word .docx file to html file in C#.

by: conductexam | last post by:

I have .net C# application in which I am extracting data from word file and save it in database particularly. To store word all data as it is I am converting the whole word file firstly in HTML and then checking html paragraph one by one. At the time of converting from word file to html my equations which are in the word document file was convert into image. Globals.ThisAddIn.Application.ActiveDocument.Select();...

C# / C Sharp

4045

Trying to create a lan-to-lan vpn between two differents networks

by: TSSRALBI | last post by:

Hello I'm a network technician in training and I need your help. I am currently learning how to create and manage the different types of VPNs and I have a question about LAN-to-LAN VPNs. The last exercise I practiced was to create a LAN-to-LAN VPN between two Pfsense firewalls, by using IPSEC protocols. I succeeded, with both firewalls in the same network. But I'm wondering if it's possible to do the same thing, with 2 Pfsense firewalls...

Networking - Hardware / Configuration

2550

transfer the data from one system to another through ip address

by: 6302768590 | last post by:

Hai team i want code for transfer the data from one system to another through IP address by using C# our system has to for every 5mins then we have to update the data what the data is updated we have to send another system

C# / C Sharp

1695

How to add payments to a PHP MySQL app.

by: muto222 | last post by:

How can i add a mobile payment intergratation into php mysql website.

PHP

1413

Comprehensive Guide to Website Development in Toronto: Expert Insights from BSMN Consultancy

by: bsmnconsultancy | last post by:

In today's digital era, a well-designed website is crucial for businesses looking to succeed. Whether you're a small business owner or a large corporation in Toronto, having a strong online presence can significantly impact your brand's success. BSMN Consultancy, a leader in Website Development in Toronto offers valuable insights into creating effective websites that not only look great but also perform exceptionally well. In this comprehensive...

General