DEV Community

Cover image for Interesting! Make different image parts clickable with HTML only (codepen preview)

Interesting! Make different image parts clickable with HTML only (codepen preview)

You can make different parts of an image clickable.

With HTML's <map>, you can create image maps which are images with clickable areas. These areas are defined using the <area> tag.

Understanding how image maps work

The image (which would be clickable) is imported using the <img> tag, however an attribute, usemap, is added to the <img> tag with a specific ID which would later be used

For example

world map image code

<img src="worldmap.png" alt="Worldmap" usemap="#worldmap">
Enter fullscreen mode Exit fullscreen mode

Using the <map> tag, the image is reference using the attribute name which would be the ID used in the usemap attribute of the <img> tag

map code snippet

<map name="worldmap">
Enter fullscreen mode Exit fullscreen mode

Now, nested in the <map> elements are several <area> elements which are used to define the different clickable areas

In the area element we declare:

  • shape: The shape of the clickable area
    • rect - defines a rectangular region
    • circle - defines a circular region
    • poly - defines a polygonal region
    • default - defines the entire region
  • coords: The coordinates of the area
  • href: The link to the target resource after the image is clicked

area code snippet

<area shape="rect" coords="34,24,270,350" alt="africa" href="https://africa.htm" title="Visit Africa">
Enter fullscreen mode Exit fullscreen mode

Example: Clickable World Map

Taking into account all explained above, this far-from-perfect example demonstrates the use of an HTML image map

Thank you for reading (and liking πŸ˜„)

Discussion (18)

Collapse
jonrandy profile image
Jon Randy

It's like a post from the 90s!

Collapse
seandylan1982 profile image
Sean Dylan Patterson

NOBODY "posted" anything except actual physical mail in the '90s 🀣

Collapse
baenencalin profile image
Calin Baenen • Edited on

I ΓΎink Γ°ey were referring to Γ°e usage of Γ°e <area> element.
In which case, is it Γ°at much like al Γ°e oΓ°er "old web" components, bare wiΓΎout any styling or unified grace?

Collapse
vulcanwm profile image
Medea

Wow this is really cool!

Collapse
babib profile image
ππšπ›π’ ✨ Author

Thanks!

Collapse
moopet profile image
Ben Sinclair

Just a heads up that the Markdown we use here supports syntax highlighting, and is generally more accessible than inserting an image of code.

It's great that you included alt text, but images of text are an issue for people using screen readers, for example, and their full content won't get picked up by the site's search facility.

You can add code blocks with 3 backticks: code block with colors example More details in our editor guide!

Collapse
babib profile image
ππšπ›π’ ✨ Author

Thank you @moopet for sharing this

It's great that you included alt text, but images of text are an issue for people using screen readers, for example, and their full content won't get picked up by the site's search facility

I didn't know this

Collapse
seandylan1982 profile image
Sean Dylan Patterson

Alt text is something I'm personally very interested in.

Websites, and the experience of personalized computing as a whole, have really improved in leaps and bounds, particularly in the last couple of years.

I know screen readers and alt text itself is relatively new, but the texts written in those alt text brackets seems as dictionary plain and about as interesting to a non technical person as a technical document.

Understandably not every user of a screen reader is visually impaired but surely more descriptive language with more emotive concepts can be established as a standard to move toward from the current technical labelling that is equivalent to the rest of the coding file it's written in.

Collapse
moopet profile image
Ben Sinclair

Alt text is supposed to convey the intent of the image. If it's a piece of art, then a description of the art might suffice, but depending on the target audience it could be more like, "oil on canvas, heavy on the browns and golds, sombre and moody" or "a cow in a field on an overcast day". I know these aren't technical or code-type examples, but I'm trying to get across that it's not always obvious what the description should be.

Alt descriptions were in the original HTML spec at least as far back as 1993, so I'm not sure about the concept being "relatively new"... and the concept of assistive technology predates HTML.

It's new in places like Twitter and Instagram, which are giant projects with absolutely no excuse for having omitted basic accessibility for most of their existence. Bad companies. No biscuit for them.

Thread Thread
seandylan1982 profile image
Sean Dylan Patterson

Hi Ben,
Thanks for your response.
Ok I understand what you're saying, I need to do more research and investigate it further but thank you for confirming that it would be worthwhile.

Collapse
abhinav1217 profile image
Abhinav Kulshreshtha

This was my first ever freelance project. I had to build a clickable map of a mall. I got β‚Ή5k ($63 approx today) for it. I used Jquery for it and some online tool to map out the area coordinated.

If I had to do it today, I would probably use svg. I explored svg at that time but the support was pretty bad so I stuck with png.

Collapse
frankwisniewski profile image
Frank Wisniewski

What crap from the old days. Please don't use this anymore. It only works with fixed image sizes.

Collapse
sachinpandeyatd profile image
Sachin Pandey

So what should I use instead, genuinely wants to know

Collapse
frankwisniewski profile image
Frank Wisniewski

Use SVG

Collapse
ffex profile image
ffex

This remember me the first guide that I follow to learn HTML! 😁
amazing! 😁

Collapse
lucaargentieri profile image
Luca Argentieri

black magic πŸ§™

Collapse
fillsanches profile image
Fellipe Sanches

Not so interesting for those who used Dreamweaver in the 2000s 😏

Collapse
calioppp profile image
Francesco Caliari

That is so cool! I once made it in a website for a band, based on Wordpress with gifs so that when you hover a certain part of that image it colored