473,398 Members | 2,335 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

home > topics > javascript > questions > creating image maps with dom not working in ie 7

Join Bytes to post your question to a community of 473,398 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 4704
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
New Post

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

4
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...
HTML / CSS
12
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
0
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...
HTML / CSS
3
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...
Javascript
7
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...
Javascript
10
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...
General
11
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...
Javascript
13
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...
Javascript
0
Migrating Website to Cloud - Emmanuel Katto
by: emmanuelkatto | last post by:
Hi All, I am Emmanuel katto from Uganda. I want to ask what challenges you've faced while migrating a website to cloud. Please let me know. Thanks! Emmanuel
General
0
BarryA
Navigating the Data Structures and Algorithms (DSA)
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...
Algorithms / Advanced Math
1
Is that possible of reading the .csv file in column wise and the column have different lengths ?
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...
C / C++
0
How to build RAID in BIOS?
by: Hystou | last post by:
There are some requirements for setting up RAID: 1. The motherboard and BIOS support RAID configuration. 2. The motherboard has 2 or more available SATA protocol SSD/HDD slots (including MSATA, M.2...
Computer Hardware
0
marktang
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,...
General
0
Oralloy
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,...
C / C++
0
jinu1996
Maximizing Business Potential: The Nexus of Website Design and Digital Marketing
by: jinu1996 | last post by:
In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven...
Online Marketing
0
tracyyun
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...
General
0
agi2029
AI Job Threat for Devs
by: agi2029 | last post by:
Let's talk about the concept of autonomous AI software engineers and no-code agents. These AIs are designed to manage the entire lifecycle of a software development project—planning, coding, testing,...
Career Advice

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.

BYTES.COM © 2024
About Bytes
Terms Of Use
Privacy Policy
Sitemap
Advertise on Bytes:
Post a Job
Sponsored Posts
Platinum & Gold Sponsors
Hire Now!