Using CSS to create clickable areas on an image

Question

Using CSS to create clickable areas on an image

Here is an example image:

https://i.sstatic.net/EerkN.jpg

This image shows a desk with various elements, and I am looking for a way to make parts of the image interactive.

For example, clicking on the monitor would take you to a specific link, and clicking on the speaker would take you to a different link.

The challenge is to achieve this using only CSS and HTML without relying on JavaScript or any other tools.

Is this even possible?

Thus far, I have only come across websites offering interactive SVG maps...

I am aware that I can use:

<img src="https://i.sstatic.net/EerkN.jpg" usemap="#menu_header" />
<map name="menu_header">
  <area coords="117,214,271,266" href="X" shape="rect" />
  <area coords="272,214,411,266" href="X" shape="rect" />
  <area coords="412,214,635,266" href="X" shape="rect" />
  <area coords="636,214,816,266" href="X" shape="rect" />
</map>

However, I would prefer to use more intricate shapes that match the actual objects like the speaker and monitor, rather than just rectangles.

html css svg imagemap

Answer 1

Answer №1

To create custom shapes, you can utilize the poly shape derived from Polygon.

Polygon

The Polygon shape requires multiple pairs of coordinates to define the vertices of the shape. These coordinates can create various polygon shapes with sloping lines. Each coordinate is represented by its horizontal and vertical positions, listed sequentially with commas. The final pair of coordinates can optionally match the first pair. Here is an example:
shape="poly" coords="217,305,218,306,218,306,228,316,243,316,243,325,229,325,229,322,217,310"

There are numerous online tools for creating image maps that can assist you in generating these shapes.

Answer 2

To create custom shapes, you can utilize the poly shape derived from Polygon.

Polygon

The Polygon shape requires multiple pairs of coordinates to define the vertices of the shape. These coordinates can create various polygon shapes with sloping lines. Each coordinate is represented by its horizontal and vertical positions, listed sequentially with commas. The final pair of coordinates can optionally match the first pair. Here is an example:
shape="poly" coords="217,305,218,306,218,306,228,316,243,316,243,325,229,325,229,322,217,310"

There are numerous online tools for creating image maps that can assist you in generating these shapes.

Answer 3

Answer №2

If you're looking to easily and quickly obtain coordinates for each polygon on a map, consider using a mapping generator tool. One such tool that I've personally used is the Imagemap-generator. All you have to do is draw the specific areas you want to link, like I did in this example: https://gyazo.com/7ddba6578cd1ebfe4f31088d40f1cf06, and you'll receive the necessary code.

For instance, for a speaker, the code would look like this:

<img src="url/to/your/image.jpg" alt="" usemap="#Map" />
<map name="Map" id="Map">
    <area alt="" title="" href="#" shape="poly" coords="80,895,134,855,194,813,239,766,275,726,319,669,364,647,397,645,442,666,476,705,501,746,513,805,527,856,550,921,578,979,608,1039,604,1107,584,1144,544,1185,454,1218,285,1216,134,1151,42,1033,45,944,174,824" />
    [...]
</map>

Answer 4

If you're looking to easily and quickly obtain coordinates for each polygon on a map, consider using a mapping generator tool. One such tool that I've personally used is the Imagemap-generator. All you have to do is draw the specific areas you want to link, like I did in this example: https://gyazo.com/7ddba6578cd1ebfe4f31088d40f1cf06, and you'll receive the necessary code.

For instance, for a speaker, the code would look like this:

<img src="url/to/your/image.jpg" alt="" usemap="#Map" />
<map name="Map" id="Map">
    <area alt="" title="" href="#" shape="poly" coords="80,895,134,855,194,813,239,766,275,726,319,669,364,647,397,645,442,666,476,705,501,746,513,805,527,856,550,921,578,979,608,1039,604,1107,584,1144,544,1185,454,1218,285,1216,134,1151,42,1033,45,944,174,824" />
    [...]
</map>

Using CSS to create clickable areas on an image

Answer №1

Answer №2

Similar questions

Utilizing JQuery to modify the element's id and trigger a function upon clicking

Angular's inline style manipulation fails to function in IE browser

Tips for controlling image sizes on larger devices while maintaining the appearance on Retina displays

What are some ways to enable text highlighting when it is disabled?

How to Fetch Information from Database and Save it as a Variable in PHP

Utilizing Selenium for web scraping on Google Maps consumes an excessive amount of data

"Adjusting the size of a jQuery dialog for optimal viewing on

Effortlessly fill dropdown menus with data from JSON files

Tips for properly formatting a fixed table header

Is it possible to designate a specific font family for italic font style and a different font family for regular font styles in VSCode?

What could be causing the slider element to select the incorrect value in Firefox and Internet Explorer?

Out of nowhere, JavaScript/jQuery ceased to function

I'm looking for a method to trigger onChange() specifically on Internet Explorer using only JavaScript, HTML, and CSS without relying on jQuery

PHP Linking Style Sheets

Guide to centering the navigation bar within a container using Bootstrap 4

SVG Error: You might require a suitable loader to manage this file format, as there are currently no configured loaders to handle it

"Efficiently handle online submissions: Use Django to submit a form and instantly display the outcome

Deactivate the button until the input meets validation criteria using Angular

Ways to adjust the dimensions of a textarea based on character count

HTML CSS margins are used to create white spaces at the edges of a webpage