0

So A huge classic is tu put a link on image. The old fashioned way is to do something like

<a href="wtv">
    <img src="wvt">
</a>

Since the introduction of <map> we can do something like this :

<map name="exemple-map-1">
  <area shape="rect" coords="0,0 100%,100%" href="https://developer.mozilla.org" target="_blank" />
</map>
<img usemap="#exemple-map-1" src="https://mdn.mozillademos.org/files/14546/map.png">

But is this good practice?

Baldráni
  • 5,332
  • 7
  • 51
  • 79

1 Answers1

1

Note: In HTML5, if the id attribute of the <map> tag is also specified, it must have the same value as the name attribute.

I would prefer using a position instead of that for better compatibility. This is just my view. An example of it would be:

.wrap {
  display: inline-block;
  position: relative;
}

.wrap img {
  display: block;
}

.wrap .click {
  background-color: rgba(0, 0, 0, 0.5);
  position: absolute;
  left: 27px;
  top: 105px;
  width: 210px;
  height: 45px;
  border-radius: 15px;
}
<div class="wrap">
  <a href="#" class="click"></a>
  <img src="https://i.stack.imgur.com/qD4Z1.png" alt="" />
</div>

Note: I have added a background tint to show the <a> on top of the image.

Praveen Kumar Purushothaman
  • 164,888
  • 24
  • 203
  • 252