0
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>test</title>
<style type="text/css">

</style>
</head>

<body>
<h2>Image Maps</h2>
<p>Click on the computer, the phone, or the cup of coffee to go to a new page and read more about the topic:</p>

<img src="workplace.jpeg" alt="Workplace" usemap="#workmap" width="400" height="379">

<map name="workmap">
  <area shape="rect" coords="34,44,270,350" alt="Computer" href="computer.htm">
  <area shape="rect" coords="290,172,333,250" alt="Phone" href="phone.htm">
  <area shape="circle" coords="337,300,44" alt="Cup of coffee" href="coffee.htm">
</map>
</body>
</html>

Here's the example of map images from w3schools.com. I want to show a coloured border over the areas when hovered over with a mouse.

Ideally from the html itself, but if it has to be with css, that's fine.

Does anyone know how to do this? I've tried with css with area:hover { but didn't know how to actually make it work.

Alfie Stoppani
  • 179
  • 11

1 Answers1

1

You can use image maps but you can also use this process...see accepted answer for a similar problem here:

Responsive image spots with hover effects

Authentic Science
  • 838
  • 1
  • 3
  • 5