Can You Style Image Map Mouseovers with Pure CSS?

Can Mouseovers on Image Maps Be Styled with CSS?

Using image maps, you can create links on images. But can you apply styles to these areas when a user hovers over them?

Code Attempt and Problem

The following code snippet was attempted, but it was unsuccessful:

<img src="{main_photo}" alt="locations map" usemap="#location-map" />
<map name="location-map">
  <area shape="rect" coords="208,230,290,245" href="{site_url}locations/grand_bay_al" />
  <area shape="rect" coords="307,214,364,226" href="{site_url}locations/mobile_al" />
  <area shape="rect" coords="317,276,375,290" href="{site_url}locations/loxley_al" />
</map>

area { border: 1px solid #d5d5d5; }

CSS-Only Solution

While using an image map, you can apply :hover styles to elements positioned on top of the image. This simplifies the process, eliminating the need for jQuery:

• Place the image at the bottom.
• Add two anchor blocks (<a>) with absolute positioning and opacity set to 0.
• On hover, set the opacity to 0.2.

Code Example

.area {
  background: #fff;
  display: block;
  height: 475px;
  opacity: 0;
  position: absolute;
  width: 320px;
}
#area2 {
  left: 320px;
}
#area1:hover, #area2:hover {
  opacity: 0.2;
}

<a>

The above is the detailed content of Can You Style Image Map Mouseovers with Pure CSS?. For more information, please follow other related articles on the PHP Chinese website!