Today we are going to 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.
<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 is needs to overlap with the map we are going to 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 where it touches the water.
I've used the following website to generate this map: image-map.
So if you now hover/click, you will see there are 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
Tomorrow we will look at an alternative way of doing this with absolute positioned elements so we can give them better hover effects.
Feel free to have a look at this Codepen.
Supported by most modern browsers, and there are