473,380 Members | 1,225 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,380 software developers and data experts.

creating image maps with dom not working in IE 7

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
4 4702
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
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
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
"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 thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

4
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...
12
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
0
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...
3
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...
7
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...
10
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...
11
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...
13
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...
1
by: CloudSolutions | last post by:
Introduction: For many beginners and individual users, requiring a credit card and email registration may pose a barrier when starting to use cloud servers. However, some cloud server providers now...
0
by: Faith0G | last post by:
I am starting a new it consulting business and it's been a while since I setup a new website. Is wordpress still the best web based software for hosting a 5 page website? The webpages will be...
0
isladogs
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 3 Apr 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 former...
0
by: taylorcarr | last post by:
A Canon printer is a smart device known for being advanced, efficient, and reliable. It is designed for home, office, and hybrid workspace use and can also be used for a variety of purposes. However,...
0
by: Charles Arthur | last post by:
How do i turn on java script on a villaon, callus and itel keypad mobile phone
0
by: ryjfgjl | last post by:
If we have dozens or hundreds of excel to import into the database, if we use the excel import function provided by database editors such as navicat, it will be extremely tedious and time-consuming...
0
BarryA
by: BarryA | last post by:
What are the essential steps and strategies outlined in the Data Structures and Algorithms (DSA) roadmap for aspiring data scientists? How can individuals effectively utilize this roadmap to progress...
1
by: nemocccc | last post by:
hello, everyone, I want to develop a software for my android phone for daily needs, any suggestions?
1
by: Sonnysonu | last post by:
This is the data of csv file 1 2 3 1 2 3 1 2 3 1 2 3 2 3 2 3 3 the lengths should be different i have to store the data by column-wise with in the specific length. suppose the i have to...

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.