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)

𝐁𝐚𝐛𝐢 ✨ on June 27, 2022

You can make different parts of an image clickable. With HTML's <map>, you can create image maps which are images with clickable areas. Thes...
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

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
𝐁𝐚𝐛𝐢 ✨

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
𝐁𝐚𝐛𝐢 ✨

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