There are many other examples in the book pushing the limits of HTML and CSS including interactive carousels, accordions, calculating, counting, advanced input validation, state management, dismissible modal windows, and reacting to mouse and keyboard inputs. There’s even an animated pure CSS clock(analogue and digital) and a fully working star rating widget!
Working with the Image Map
Let’s say you have an image that you want to add a hyperlink to. That’s simple enough:
All we need to do is wrap the image into an anchor element and it becomes a clickable link that takes you to the URL specified in the href attribute.
This is pretty straightforward but what if you have an image of your product and you would like to add multiple clickable hotspots to that image all taking you to different web pages?
The image map element can solve this problem. Here it is in its simplest form:
A complete image map consists of a <map> element and the encapsulated <area> elements. To link an image to a map, you first add a name attribute to the <map> element then you reference that name, prefixed with a hash, in the <img> elements usemap attribute. In this example, we’ve given the name“hot-spots” to the image map.
Inside the <map> we have a bunch of <area> elements. Each of these defines an individual clickable hotspot: their name, size, position, and link. Notice how the href attribute can be a link as well as a URL fragment just like in case of the anchor element.
Now you wonder whether an image map functions the same way as an anchor and if we can use the :target pseudo-class to select and style the activated elements.
The answer is yes!
You can read more about how :target works and how it can be used to create an interactive carousel here:
To see all this in action, let’s create a simple interactive tool that shows some information about items on a picture. This will be an image of a desk and a few hotspots on top of the objects. Clicking on each of these areas will bring up a small popup box holding some information. We will also add a close button to dismiss the popup.
If that is how you prefer following along, you can find the template and the source code of the examples here:
Next, it’s time to define the hotspot areas with the <map> and the <area> elements. Linking the map to the image is an easy task with the usemap and name attributes. However, defining the areas with the coordinates requires a bit more effort.
In the first image map example we only had two clickable areas, two rectangles defined with 4 coordinates: the four corners of the rectangle:
Working with the Image Map
<a href="http://www.webondevices.com" target="_blank"> <img src="web-on-devices.jpg" alt="WOD logo" /></a><img src="web-on-devices.jpg" usemap="#hot-spots"><map name="hot-spots"> <area alt="logo" title="logo" href="http://www.webondevices.com" coords="100,100,200,200" shape="rect"> </area> <area alt="intro" title="intro" href="#intro" coords="200,200,300,300" shape="rect"> </area></map>Building the example
GitHub - webondevices/html-css-wizardry: Source for the html-css-wizardry book
<img src="../assets/desk.jpg" usemap="#desk-items">Defining the hotspot areas
<area alt="logo" title="logo" href="http://www.webondevices.com"