is it possible to use image map in tag?

Question

I’m trying to use an image map in <a> tag. It has worked in chrome but not hasn’t worked in IE. Is it okay to use an image map in <a> tag?

Here is my code:

<div class="planner_banner">
        <a href="xxx">
            <img src="xxx" usemap="#planner_banner_map" border="0">
            <map name="planner_banner_map">
                <area shape="rect" coords="243, 1, 272, 30" 
                onclick="$('.planner_banner').hide();return false;"/>
            </map>
        </a>
    </div>

Possible duplicate of [can i have an onclick event on a imagemap area element](https://stackoverflow.com/questions/29921696/can-i-have-an-onclick-event-on-a-imagemap-area-element) — Traveling Tech Guy, Dec 20 '18 at 04:01
Having a secondary link within a more global one is bad practice from an accessibility point of view so you probably want to avoid doing that anyway — Capsule, Dec 20 '18 at 05:47
Also, I guess you mean in a `` tag, and not just 'In a tag' (in any tag). Please edit your question if that's the cause, for the sake of clarity, not everybody can read between the lines ;-) — Capsule, Dec 20 '18 at 05:49
yes I wanted to say tag. sorry for confusion. thanks for your advice Capsule :) — wonki hong, Dec 20 '18 at 07:17

score 0 · Accepted Answer · answered Dec 20 '18 at 10:38

Is it okay to use an image map in <a> tag?

No. See the specification:

The a element … Content model: Transparent, but there must be no interactive content or a element descendants.

And interactive content is defined as:

a (if the href attribute is present) audio (if the controls attribute is present) button details embed iframe img (if the usemap attribute is present) input (if the type attribute is not in the Hidden state) label select textarea video (if the controls attribute is present)

score -1 · Answer 2 · answered Dec 20 '18 at 10:40

-1

Add # before map name

<map name="#planner_banner_map">
  <area shape="rect" coords="243, 1, 272, 30" 
  onclick="$('.planner_banner').hide();return false;"/>
</map>

answered Dec 20 '18 at 10:40

Jyme

332
2
13

is it possible to use image map in tag?

2 Answers2