Interactive Image Maps and Closable Popups with HTML and CSS only

Mate Marschalko

·

Follow

8 min read

·

Oct 1, 2021

17

Listen

Share

Interactive, clickable images and animated closable popup boxes are usually tasks for JavaScript. But what if I told you it can all be done with just HTML and CSS?

All you need is HTML and CSS

This is an example project from my book, All you need is HTML and CSS:

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:

<a href="http://www.webondevices.com" target="_blank">
  <img src="web-on-devices.jpg" alt="WOD logo" />
</a>

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:

<img src="web-on-devices.jpg" usemap="#hot-spots"><map name="hot-spots">
  <area
    alt="logo"
    title="logo"
    href="http://www.webondevices.com"…