Subscribe

HTML Image Map, a multi click image

โœ๏ธ

Using the HTML map element

16 Jun, 2020 ยท 2 min read

Today we will look at an almost rare HTML function called <map> we use it to make a mapping selection of links for one image.

The downside to this is that there is no real feedback for a specific hover.

HTML Structure

<img
  width="467px"
  src="https://images.unsplash.com/photo-1491378630646-3440efa57c3b?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=934&q=80"
  usemap="#image-map"
/>

<map name="image-map">
  <area
    target="_blank"
    alt="Ocean"
    title="Ocean"
    href="#ocean"
    coords="466,428,2,150,3,159,459,421,3,132,209,47,295,100,284,16,101,14"
    shape="rect"
  />
  <area
    target="_blank"
    alt="Sky"
    title="Sky"
    href="#sky"
    coords="467,152,1,-1"
    shape="rect"
  />
  <area
    target="_blank"
    alt="Sand"
    title="Sand"
    href="#sand"
    coords="1,699,465,700,467,446,165,440,139,416,109,413,64,440,2,450"
    shape="poly"
  />
</map>

As you can see, we define an image as usual, but give it the attribute usemap="#image-map" this tells the image it needs to overlap with the map we will make below.

The map is called image-map and has three areas. We defined two rectangles for the Sky and the Ocean and a Polygon for the sand because it was a triangle touching the water.

I've used the following website to generate this map: image-map.

So if you now hover/click, you will see three separate links for the one image.

Cool right?! But as mentioned, it doesn't give proper feedback that they're three separate links, so UX wise debatable if it's the best solution. There are some JavaScript solutions for styling.

See this alternative way of making a multi clickable image with positioned elements.

Feel free to have a look at this Codepen.

See the Pen HTML Image Map by Chris Bongers (@rebelchris) on CodePen.

Browser Support

Supported by most modern browsers, there are JavaScript solutions to make this work in more browsers.

View on CanIUse

Thank you for reading, and let's connect!

Thank you for reading my blog. Feel free to subscribe to my email newsletter and connect on Facebook or Twitter

Spread the knowledge with fellow developers on Twitter
Tweet this tip
Powered by Webmentions - Learn more

Read next ๐Ÿ“–

Trying out native dialog modals

8 Aug, 2022 ยท 3 min read

Trying out native dialog modals

HTML fallback images on error

6 Aug, 2022 ยท 2 min read

HTML fallback images on error

Join 1832 devs and subscribe to my newsletter