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
<img src="worldmap.png" alt="Worldmap" usemap="#worldmap">
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 name="worldmap">
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 shape="rect" coords="34,24,270,350" alt="africa" href="https://africa.htm" title="Visit Africa">
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 π)
Top comments (18)
It's like a post from the 90s!
NOBODY "posted" anything except actual physical mail in the '90s π€£
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?
Wow this is really cool!
Thanks!
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:
More details in our editor guide!
Thank you @moopet for sharing this
I didn't know this
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.
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.
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.
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.
What crap from the old days. Please don't use this anymore. It only works with fixed image sizes.
So what should I use instead, genuinely wants to know
Use SVG
This remember me the first guide that I follow to learn HTML! π
amazing! π
black magic π§
Not so interesting for those who used Dreamweaver in the 2000s π
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