By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
437,605 Members | 2,153 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 437,605 IT Pros & Developers. It's quick & easy.

creating image maps with dom not working in IE 7

P: n/a
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.getElementById("blah");

var img = document.getElementById("img");
if(!img){
img = document.createElement("img");
img.setAttribute("src", "goodies/stuff/disco_stu.jpg");
img.setAttribute("id", "i-4-4");
img.setAttribute("usemap", "#m-1-1");
img.setAttribute("alt", "");
div.appendChild(img);
}
imgmap = document.getElementById("m-1-1");
if(!imgmap){
var imgmap = document.createElement("map");
imgmap.setAttribute("id", "m-1-1");
imgmap.setAttribute("name", "m-1-1");

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

Jul 20 '08 #1
Share this Question
Share on Google+
4 Replies


P: n/a
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.com/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.getElementById("blah");

* * * * * var img = document.getElementById("img");
* * * * * if(!img){
* * * * * * img = document.createElement("img");
* * * * * * img.setAttribute("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.setAttribute("id", "i-4-4");
img.id = "i-4-4";

http://www.w3.org/TR/DOM-Level-2-HTM...ml#ID-63534901
* * * * * * img.setAttribute("usemap", "#m-1-1");
img.useMap = "m-1-1";

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

* * * * * * img.setAttribute("alt", "");
img.alt = "";
* * * * * * div.appendChild(img);
* * * * * }
* * * * * imgmap = document.getElementById("m-1-1");
* * * * * if(!imgmap){
* * * * * * var imgmap = document.createElement("map");
* * * * * * imgmap.setAttribute("id", "m-1-1");
* * * * * * imgmap.setAttribute("name", "m-1-1");

* * * * * * var area = document.createElement("area");
* * * * * * area.setAttribute("alt", "");
area.alt = "";

http://www.w3.org/TR/DOM-Level-2-HTM...ml#ID-26019118
* * * * * * area.setAttribute("href", "http://google.com");
* * * * * * area.setAttribute("shape", "circle");
* * * * * * area.setAttribute("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

P: n/a
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.org/rfc/rfc1036.html>
<http://www.apps.ietf.org/rfc/rfc2822.html#sec-3.4>
<http://www.apps.ietf.org/rfc/rfc822.html#sec-6>
<http://en.wikipedia.org/wiki/Netiquette>
<http://www.interhack.net/pubs/munging-harmful/>
>[...]
It seems that I can't get the image map to work with IE7. The page is
located herehttp://www.theknopps.com/test.htmland the source below.

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

img.setAttribute("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#adef-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.setAttribute("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.createElement("area");
area.setAttribute("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.setAttribute("shape", "circle");
area.setAttribute("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.org/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

P: n/a
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

P: n/a
"Thomas 'PointedEars' Lahn" <Po*********@web.dewrote in message
news:48**************@PointedEars.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.org/rfc/rfc1036.html>
<http://www.apps.ietf.org/rfc/rfc2822.html#sec-3.4>
<http://www.apps.ietf.org/rfc/rfc822.html#sec-6>
<http://en.wikipedia.org/wiki/Netiquette>
<http://www.interhack.net/pubs/munging-harmful/>
>>[...]
It seems that I can't get the image map to work with IE7. The page is
located herehttp://www.theknopps.com/test.htmland the source below.

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

img.setAttribute("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#adef-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.setAttribute("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.createElement("area");
area.setAttribute("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.setAttribute("shape", "circle");
area.setAttribute("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.org/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

This discussion thread is closed

Replies have been disabled for this discussion.