Image maps should take z-index of <area> elements into account




DOM: Core & HTML
10 years ago
7 years ago


(Reporter: René, Unassigned)


1.9.0 Branch

Firefox Tracking Flags

(Not tracked)


(Whiteboard: WONTFIX?, URL)


(1 attachment)



10 years ago
User-Agent:       Mozilla/5.0 (Windows; U; Windows NT 5.1; nl; rv: Gecko/20080404 Firefox/
Build Identifier: Mozilla/5.0 (Windows; U; Windows NT 5.1; nl; rv: Gecko/20080404 Firefox/

I'm not realy sure about this, but i found it really annoying. The problem is that we have no clear way to define which <area> or <a> used in a <map> element needs to be on top of others. 

As you can see on my test.html page, the area that is added first will go on top. But on dynamic websites build with JavaScript its very hard to order the areas. A work-around need to re-order all the elements before the area will go on top of others.

I researched the web about this problem and only Microsoft ASP hotspot marker had this option avaible. But, as W3C stated, the style attribute and the z-index property should be enabled.

Reproducible: Always

Steps to Reproduce:
1. Create a MAP Element
2. Create a IMG element
3. Create 2 different AREA elements inside the MAP element
4. Give them some attributes ánd a style attribute with the z-index property
Actual Results:  
The area that is rendered first will álways stay on top of the others.

Expected Results:  
When defined a z-index, the area with the highest z-index should stay on top.


10 years ago
Component: General → General
Product: Firefox → Core
QA Contact: general → general
Summary: Area element doesn't have a z-as → Image maps should take z-index of <area> elements into account


10 years ago
Severity: enhancement → minor
Component: General → DOM: Core
OS: Windows XP → All
Version: unspecified → 1.9.0 Branch


9 years ago
Component: DOM: Core → DOM: Core & HTML
QA Contact: general → general
First, there is nothing in the CSS 2.1 spec that supports the idea that
'z-index' can be used to order overlapping AREAs.
The 'z-index' property applies to "positioned elements":
and more specifically, the boxes generated by those elements.
AREAs does not generate boxes at all, so the property does not apply.

I tested Firefox 2 and 3, Opera 9.51, IE8 (beta 1) and Safari 3.1.2
and they are compatible (all return "area_1" and ignores AREA z-index).
Created attachment 332076 [details]
Dynamic testcase

All the above UAs returns "area_2" for this testcase.
I disagree with your statement that this is hard to do.
Retargeting bug as RFE.  Recommending WONTFIX.
Severity: minor → enhancement
Whiteboard: WONTFIX?
Invalid; the shapes must be ordered

> in reverse tree order (so the last specified area element in the map is the
> bottom-most shape, and the first element in the map, in tree order, is the
> top-most shape).

Last Resolved: 7 years ago
Resolution: --- → INVALID
You need to log in before you can comment on or make changes to this bug.