image map created dynamically with DOM methods or DOM extensions doesn't work properly

RESOLVED DUPLICATE of bug 97587

Status

()

Core
DOM: Core & HTML
RESOLVED DUPLICATE of bug 97587
16 years ago
9 years ago

People

(Reporter: Martin Honnen, Assigned: jst)

Tracking

({testcase})

Trunk
x86
Windows XP
testcase
Points:
---

Firefox Tracking Flags

(Not tracked)

Details

Attachments

(3 attachments, 1 obsolete attachment)

(Reporter)

Description

16 years ago
It seems that client side image maps created with range.createContextualFragment
doesn't work properly.
In the following example one map is document.written, the other inserted after
being created with range.createContextualFragment. The second map doesn't work,
the hand cursor appear over the complete image and not only in the area,
clicking inside the area doesn't work and the mouseover doesn't fire.

<html>
<head>
<script type="text/javascript">
function getMapHTML (mapName) {
  var html = '';
  html += '<img name="imageName" src="kiboInside.gif" usemap="#' + mapName + '"
alt="Kibo inside" \/>';
  html += '<map name="' + mapName + '">';
  html += '<area shape="rect" coords="0, 0, 25, 25" href="http://www.kibo.com"
onmouseover="alert(event.type)" \/>';
  html += '</map>';
  return html;
}
function createMap () {
  var html = getMapHTML('map1');
  var range = document.createRange();
  range.setStartAfter(document.body.lastChild);
  var docFrag = range.createContextualFragment(html);
  document.body.appendChild(docFrag);
}
</script>
</head>
<body onload="createMap();">
<script type="text/javascript">
document.write(getMapHTML('map0'));
</script>
<br />
</body>
</html>

I searched bugzilla for any open bugs concerning createContextualFragment but
couldn't find any.
(Reporter)

Comment 1

16 years ago
Created attachment 61973 [details]
bug demo (second image map doesn't work)
(Reporter)

Comment 2

16 years ago
Created attachment 61974 [details]
image needed for bug demo
Attachment #61973 - Attachment is obsolete: true
(Reporter)

Comment 3

16 years ago
Created attachment 61975 [details]
bug demo (this time with correct img url)

Forget the first attachment, it references a local url which doesn't exist on
bugzilla.
Keywords: testcase
(Reporter)

Comment 4

16 years ago
Created attachment 62031 [details]
new bug demo (see comments below)

After further investigation I found that the problem doesn't seem to be caused
by the use of createContextualFragment. Whether I dynamically add the img and
the map by using createContextualFragment or by setting innerHTML of an element
or by using DOM methods to create and insert the map and the img, the problem
is always that the hand cursor appears over the complete image map, with the
area not reacting to the mouseover and click.
I will change the summary after uploading this file and will also change the
component to DOM HTML.
As for the test case, for img maps are created, the first document.written, the
second created with createContextualFragment, the third by setting innerHTML of
a div and the fourth by using DOM core and HTML methods. 
Only the first map works as intended.
(Reporter)

Comment 5

16 years ago
changed summary to better describe the problem
Component: DOM Mozilla Extensions → DOM HTML
Summary: image map created with range.createContextualFragment doesn't work properly → image map created dynamically with DOM methods or DOM extensions doesn't work properly
a note.  .innerHTML just uses createContextualFragment internally, so those 
shoudl behave identically...

Comment 7

16 years ago
It appears that the problem is that the HTMLMapElement isn't correctly bound to
the useMap attribute of the img when it's done dynamically. The rest works fine.
Still investigating.

Comment 8

16 years ago
bug 97587 talks about the same thing, but I have not compared the testcases yet

Comment 9

16 years ago
I 'm the reporter of bug 97587 and I think that these 2 bugs are duplicate....
Depends on: 97587
(Assignee)

Comment 10

16 years ago
Duping.

*** This bug has been marked as a duplicate of 97587 ***
Status: NEW → RESOLVED
Last Resolved: 16 years ago
Resolution: --- → DUPLICATE

Updated

9 years ago
Component: DOM: HTML → DOM: Core & HTML
QA Contact: lchiang → general
You need to log in before you can comment on or make changes to this bug.