How Can You Achieve Mouseover Effects on Image Maps Using CSS?

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:

<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

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

<div class="area">

.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.

The above is the detailed content of How Can You Achieve Mouseover Effects on Image Maps Using CSS?. For more information, please follow other related articles on the PHP Chinese website!