Styling Image Map Mouseovers with CSS

When creating interactive web pages, it's often necessary to include images with clickable areas. Typically, this is achieved using image maps. However, styling these areas on mouseover to provide additional interactivity has proven elusive.

In the past, attempting to style these areas using CSS has met with limited success, as demonstrated by the example provided:

area { border: 1px solid #d5d5d5; }

CSS-Only Solution

Fortunately, there's a simple workaround using CSS only:

.area {
    background: #fff;
    display: block;
    height: 475px;
    opacity: 0;
    position: absolute;
    width: 320px;
}
#area2 {
    left: 320px;
}
#area1:hover, #area2:hover {
    opacity: 0.2;
}
In this approach, transparent blocks are placed over the image, each representing a clickable area. By setting the opacity to 0 by default and increasing it to 0.2 on hover, a subtle mouseover effect is achieved.