creating image maps with dom not working in IE 7

Ryan Knopp

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
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Hello</title>
<script type='text/javascript'>
window.onload = function(){

var div = document.getEle mentById("blah" );

var img = document.getEle mentById("img") ;
if(!img){
img = document.create Element("img");
img.setAttribut e("src", "goodies/stuff/disco_stu.jpg") ;
img.setAttribut e("id", "i-4-4");
img.setAttribut e("usemap", "#m-1-1");
img.setAttribut e("alt", "");
div.appendChild (img);
}
imgmap = document.getEle mentById("m-1-1");
if(!imgmap){
var imgmap = document.create Element("map");
imgmap.setAttri bute("id", "m-1-1");
imgmap.setAttri bute("name", "m-1-1");

var area = document.create Element("area") ;
area.setAttribu te("alt", "");
area.setAttribu te("href", "http://google.com");
area.setAttribu te("shape", "circle");
area.setAttribu te("coords", "20,20,10") ;
imgmap.appendCh ild(area);
div.appendChild (imgmap);
}
}
</script>
</head>
<body>
<div id='blah'></div>
</body>
</html>

Jul 20 '08 #1

Subscribe Reply

4735

GTalbot

On Jul 19, 11:54*pm, "Ryan Knopp" <ryan<-delete->@theknopps.com >
wrote:

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 herehttp://www.theknopps.c om/test.htmland the source below.

I can't seem to figure out why IE7 won't recognize the image map. * *Thanks
for your help

Ryan

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
* <head>
* * <title>Hello</title>
* * * <script type='text/javascript'>
* * * * window.onload = function(){

I believe you should use

<body onload="init(); ">

so that once all the elements of the HTML document are loaded in
memory, only then, should you start your script. As written, you start
your script function just when the window loads itself. Window and
body node are 2 distinct, separate objects which load asynchronously.
The mistake you do is often encountered and many browsers are forgiven
but, again, best is to start your function only and only when all
elements of the body node are loaded in memory.

>
* * * * * var div = document.getEle mentById("blah" );

* * * * * var img = document.getEle mentById("img") ;
* * * * * if(!img){
* * * * * * img = document.create Element("img");
* * * * * * img.setAttribut e("src", "goodies/stuff/disco_stu.jpg") ;

Avoid setAttribute in IE 7: it's known to be buggy, unreliable, not
working. Use DOM 2 HTML attributes instead. Example given:

img.src = "goodies/stuff/disco_stu.jpg";

http://www.w3.org/TR/DOM-Level-2-HTM...ml#ID-87762984

What you are trying to do in IE 7 will only start to work in IE 8
final release.

* * * * * * img.setAttribut e("id", "i-4-4");

img.id = "i-4-4";

http://www.w3.org/TR/DOM-Level-2-HTM...ml#ID-63534901

* * * * * * img.setAttribut e("usemap", "#m-1-1");

img.useMap = "m-1-1";

http://www.w3.org/TR/DOM-Level-2-HTM...ml#ID-35981181

* * * * * * img.setAttribut e("alt", "");

img.alt = "";

* * * * * * div.appendChild (img);
* * * * * }
* * * * * imgmap = document.getEle mentById("m-1-1");
* * * * * if(!imgmap){
* * * * * * var imgmap = document.create Element("map");
* * * * * * imgmap.setAttri bute("id", "m-1-1");
* * * * * * imgmap.setAttri bute("name", "m-1-1");

* * * * * * var area = document.create Element("area") ;
* * * * * * area.setAttribu te("alt", "");

area.alt = "";

http://www.w3.org/TR/DOM-Level-2-HTM...ml#ID-26019118

* * * * * * area.setAttribu te("href", "http://google.com");
* * * * * * area.setAttribu te("shape", "circle");
* * * * * * area.setAttribu te("coords", "20,20,10") ; * *

area.href = "http://www.google.com/";
area.shape = "circle";
area.coords = "20, 20, 10";

http://www.w3.org/TR/DOM-Level-2-HTM...ml#ID-26019118
* *
Gérard
--
Internet Explorer 7 bugs: 156 bugs so far
http://www.gtalbot.org/BrowserBugsSection/MSIE7Bugs/
Internet Explorer 7 bugs: 130 bugs so far
http://www.gtalbot.org/BrowserBugsSection/MSIE8Bugs/

Jul 20 '08 #2

Thomas 'PointedEars' Lahn

GTalbot wrote:

On Jul 19, 11:54 pm, "Ryan Knopp" <ryan<-delete->@theknopps.com >
wrote:

OP:

Your From header constitutes a violation of Internet Standards and is
disregarding Netiquette. I will therefore killfile people using this
header from now on.

<http://www.apps.ietf.o rg/rfc/rfc1036.html>
<http://www.apps.ietf.o rg/rfc/rfc2822.html#se c-3.4>
<http://www.apps.ietf.o rg/rfc/rfc822.html#sec-6>
<http://en.wikipedia.or g/wiki/Netiquette>
<http://www.interhack.n et/pubs/munging-harmful/>

>[...]
It seems that I can't get the image map to work with IE7. The page is
located herehttp://www.theknopps.c om/test.htmland the source below.

I can't seem to figure out why IE7 won't recognize the image map. [...]

img.setAttribut e("usemap", "#m-1-1");

img.useMap = "m-1-1";

http://www.w3.org/TR/DOM-Level-2-HTM...ml#ID-35981181

| `useMap' of type `DOMString'
| Use client-side image map. See the <usemap attribute definitionin
| HTML 4.01.

,-<http://www.w3.org/TR/1999/REC-html401-19991224/struct/objects.html#ad ef-usemap>
|
| usemap = uri [CT]
^^^
| This attribute associates an image map with an element. The image map is
| defined by a MAP element. The value of usemap must match the value of
| the name attribute of the associated MAP element.

The Specification is somewhat ambiguous here. What is meant is

usemap="#m1-1-1"

in (X)HTML and therefore

img.useMap = "#m-1-1";

in script code.

> img.setAttribut e("alt", "");

img.alt = "";

,-<http://www.w3.org/TR/2003/REC-DOM-Level-2-HTML-20030109/html.html#ID-95636861>
|
| `alt' of type `DOMString'
| Alternate text for user agents not rendering the normal content of this
| element. See the alt attribute definition in HTML 4.01.

,-<http://www.w3.org/TR/1999/REC-html401-19991224/struct/objects.html#h-13.6.1>
|
| The `alt' attribute specifies alternate text that is rendered when the
| image cannot be displayed (see below for information on <how to specify
| alternate text>).

As the image has meaning as *content* here (instead of being there purely
for layout purposes), I think it should not have an empty `alt' attribute value.

var area = document.create Element("area") ;
area.setAttribu te("alt", "");

area.alt = "";

http://www.w3.org/TR/DOM-Level-2-HTM...ml#ID-26019118

| `alt' of type `DOMString'
| Alternate text for user agents not rendering the normal content of this
| element. See the <alt attribute definitionin HTML 4.01.

,-<http://www.w3.org/TR/1999/REC-html40....html#adef-alt
|
| alt = text [CS]
| For user agents that cannot display images, forms, or applets, this
| attribute specifies alternate text. The language of the alternate text
| is specified by the lang attribute.
|
| Several non-textual elements (IMG, AREA, APPLET, and INPUT) let authors
| specify alternate text to serve as content when the element cannot
| be rendered normally. Specifying alternate text assists users without
| graphic display terminals, users whose browsers don't support forms,
| visually impaired users, those who use speech synthesizers, those who
| have configured their graphical user agents not to display images, etc.
| [...]

Therefore, the `alt' attribute of an `area' element and the `alt' property
of an HTMLAreaElement object should *never* be empty.

>[...]
area.setAttribu te("shape", "circle");
area.setAttribu te("coords", "20,20,10") ;

[...]
area.shape = "circle";
area.coords = "20, 20, 10";

http://www.w3.org/TR/DOM-Level-2-HTM...ml#ID-26019118

| `coords' of type `DOMString'
| Comma-separated list of lengths, defining an active region geometry. See
| also `shape' for the shape of the region. See the <coords attribute
| definitionin HTML 4.01.

,-<http://www.w3.org/TR/1999/REC-html401-19991224/struct/objects.html#h-13.6.1>
|
| Coordinates are relative to the top, left corner of the object.
| All values are lengths. All values are separated by commas.

Therefore, it should be

area.coords = "20,20,10";

--

Your .sig is still broken, see
<http://en.wikipedia.or g/wiki/Signature_block #E-mail_and_Usenet >.
PointedEars
--
Anyone who slaps a 'this page is best viewed with Browser X' label on
a Web page appears to be yearning for the bad old days, before the Web,
when you had very little chance of reading a document written on another
computer, another word processor, or another network. -- Tim Berners-Lee

Jul 20 '08 #3

Laurent vilday

Thomas 'PointedEars' Lahn a Ã©crit :

GTalbot wrote:
>On Jul 19, 11:54 pm, "Ryan Knopp" <ryan<-delete->@theknopps.com >
wrote:

OP:

Your From header constitutes a violation of Internet Standards and is
disregarding Netiquette. I will therefore killfile people using this
header from now on.

OMG. You are such an idiot. Do you really think the OP or anyone else is
interested about your killfile rules ?

You are the most hatefull person Usenet have ever met.

--
laurent

Jul 20 '08 #4

Ryan Knopp

"Thomas 'PointedEars' Lahn" <Po*********@we b.dewrote in message
news:48******** ******@PointedE ars.de...

GTalbot wrote:
>On Jul 19, 11:54 pm, "Ryan Knopp" <ryan<-delete->@theknopps.com >
wrote:

OP:

Your From header constitutes a violation of Internet Standards and is
disregarding Netiquette. I will therefore killfile people using this
header from now on.

<http://www.apps.ietf.o rg/rfc/rfc1036.html>
<http://www.apps.ietf.o rg/rfc/rfc2822.html#se c-3.4>
<http://www.apps.ietf.o rg/rfc/rfc822.html#sec-6>
<http://en.wikipedia.or g/wiki/Netiquette>
<http://www.interhack.n et/pubs/munging-harmful/>

>>[...]
It seems that I can't get the image map to work with IE7. The page is
located herehttp://www.theknopps.c om/test.htmland the source below.

I can't seem to figure out why IE7 won't recognize the image map. [...]

img.setAttribut e("usemap", "#m-1-1");

img.useMap = "m-1-1";

http://www.w3.org/TR/DOM-Level-2-HTM...ml#ID-35981181

| `useMap' of type `DOMString'
| Use client-side image map. See the <usemap attribute definitionin
| HTML 4.01.

,-<http://www.w3.org/TR/1999/REC-html401-19991224/struct/objects.html#ad ef-usemap>
|
| usemap = uri [CT]
^^^
| This attribute associates an image map with an element. The image map
is
| defined by a MAP element. The value of usemap must match the value of
| the name attribute of the associated MAP element.

The Specification is somewhat ambiguous here. What is meant is

usemap="#m1-1-1"

in (X)HTML and therefore

img.useMap = "#m-1-1";

in script code.

>> img.setAttribut e("alt", "");

img.alt = "";

,-<http://www.w3.org/TR/2003/REC-DOM-Level-2-HTML-20030109/html.html#ID-95636861>
|
| `alt' of type `DOMString'
| Alternate text for user agents not rendering the normal content of
this
| element. See the alt attribute definition in HTML 4.01.

,-<http://www.w3.org/TR/1999/REC-html401-19991224/struct/objects.html#h-13.6.1>
|
| The `alt' attribute specifies alternate text that is rendered when the
| image cannot be displayed (see below for information on <how to specify
| alternate text>).

As the image has meaning as *content* here (instead of being there purely
for layout purposes), I think it should not have an empty `alt' attribute
value.

> var area = document.create Element("area") ;
area.setAttribu te("alt", "");

area.alt = "";

http://www.w3.org/TR/DOM-Level-2-HTM...ml#ID-26019118

| `alt' of type `DOMString'
| Alternate text for user agents not rendering the normal content of
this
| element. See the <alt attribute definitionin HTML 4.01.

,-<http://www.w3.org/TR/1999/REC-html40....html#adef-alt
|
| alt = text [CS]
| For user agents that cannot display images, forms, or applets, this
| attribute specifies alternate text. The language of the alternate text
| is specified by the lang attribute.
|
| Several non-textual elements (IMG, AREA, APPLET, and INPUT) let authors
| specify alternate text to serve as content when the element cannot
| be rendered normally. Specifying alternate text assists users without
| graphic display terminals, users whose browsers don't support forms,
| visually impaired users, those who use speech synthesizers, those who
| have configured their graphical user agents not to display images, etc.
| [...]

Therefore, the `alt' attribute of an `area' element and the `alt' property
of an HTMLAreaElement object should *never* be empty.

>>[...]
area.setAttribu te("shape", "circle");
area.setAttribu te("coords", "20,20,10") ;

[...]
area.shape = "circle";
area.coords = "20, 20, 10";

http://www.w3.org/TR/DOM-Level-2-HTM...ml#ID-26019118

| `coords' of type `DOMString'
| Comma-separated list of lengths, defining an active region geometry.
See
| also `shape' for the shape of the region. See the <coords attribute
| definitionin HTML 4.01.

,-<http://www.w3.org/TR/1999/REC-html401-19991224/struct/objects.html#h-13.6.1>
|
| Coordinates are relative to the top, left corner of the object.
| All values are lengths. All values are separated by commas.

Therefore, it should be

area.coords = "20,20,10";

>--

Your .sig is still broken, see
<http://en.wikipedia.or g/wiki/Signature_block #E-mail_and_Usenet >.
PointedEars
--
Anyone who slaps a 'this page is best viewed with Browser X' label on
a Web page appears to be yearning for the bad old days, before the Web,
when you had very little chance of reading a document written on another
computer, another word processor, or another network. -- Tim Berners-Lee

The "useMap" was the problem I was having. Like you pointed out the 'M'
in map needed capitolized. Thanks for your help.

Jul 20 '08 #5

Similar topics

2217

Image/Object Maps Accessibility

by: Stanimir Stamenkov | last post by:

I have this kind of construct: http://www.geocities.com/stanio/temp/usemap01.html (an IMG element using MAP described with AREA elements) I'm trying to make it more accessible and currently I'm testing in Lynx. Lynx plays it clever and when I "enter" the map it shows only 3 links no matter there are 5 AREAs (3 point to a same reference). I don't like Lynx displays the 'alt' text and not the link titles

HTML / CSS

2750

scrolling image on website

by: Major Man | last post by:

Hi, I have this .jpg picture that's 700 x 200. What I wanna do is display it on a 300 x 200 window, and have it scroll left and right, back and forth. Can anyone help this newbie? TIA

Javascript

3142

Creating image maps with Adobe Illustrator or Image Ready.

by: mgrahm | last post by:

Hi all I would like to create an image map for a website I am working on. A number of years ago I think I think I used a program called Frog-It. I have since upgraded to a new computer a few times. Don't think i have that program any more. In any event I was wondering if I could use Adobe Illustrator or Image Ready to create such an item. Please respond if you can be of help to me. Thanks

HTML / CSS

3322

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

by: lofty00 | last post by:

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

Javascript

3649

Dynamically changing image map using XML data

by: petethebloke | last post by:

Can anyone help? I have a client who has made a "dynamic interactive map" of our city using Dreamweaver. Each map file has hotspots that pop-up a div with a little image when the mouse goes over them. They also link to another file. I've converting the application to a PHP-AJAX system at http://www.ilex-urc-maps.com/testing.html but I can't get the dynamically altered hotspots to work. Any ideas? Please don't tell me that the client...

Javascript

6778

DHTML moving an image

by: cjparis | last post by:

Hello everyone. If anyone can give me a hand I would be gratefull Am doing a site which requires a moving element and have used DHTML to do it. Have a simple Browser detect script to sort IE from Netscape. IE is ok but the Netscape browser including Firefox and Safari are not working now. Not sure why. The idea is that when you mouseover the arrows the gallery div moves to left and right. I have changed the script and now the image...

General

3017

Image on mouseover not working

by: Evolution445 | last post by:

I got this code, and it somehow doesnt work. <TABLE WIDTH=100% BORDER=0 CELLPADDING=0 CELLSPACING=0 align="center"> <TR> <TD background="{image-path}navfiller.gif" HEIGHT=40 width="50%"></TD> <TD width="110"><a href="index.php"><IMG SRC="{image-path}matrix_03.gif" WIDTH=110 HEIGHT=40 ALT="Homepage" border="0" onmouseover="myOn('matrix_03')" onmouseout="myOut('matrix_03')"></a></TD> <TD width="100"><a...

Javascript

5360

OnMouseOver and image maps working across multiple images

by: seegoon | last post by:

Hi all. So: I've put together a page, in which I want several clickable image maps. I've put those together already. The problem with image maps is that they're not very intuitive, so users don't really expect the image to be clickable and accordingly won't even try to. The solution is to have the image highlight whenever the mouse travels over the mapped-out area; I understand that this is quite easy. Some Googling has provided a few...

Javascript

9645

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

9481

Changing the language in Windows 10

by: Hystou | last post by:

Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can effortlessly switch the default language on Windows 10 without reinstalling. I'll walk you through it. First, let's disable language synchronization. With a Microsoft account, language settings sync across devices. To prevent any complications,...

Windows Server

9953

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

7502

Access Europe - Using VBA to create a class based on a table - Wed 1 May

by: isladogs | last post by:

The next Access Europe User Group meeting will be on Wednesday 1 May 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome a new presenter, Adolph Dupré who will be discussing some powerful techniques for using class modules. He will explain when you may want to use classes instead of User Defined Types (UDT). For example, to manage the data in unbound forms. Adolph will...

Microsoft Access / VBA

6741

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

5513

Windows Forms - .Net 8.0

by: adsilva | last post by:

A Windows Forms form does not have the event Unload, like VB6. What one acts like?

Visual Basic .NET

4054

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

3655

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

2881

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