Can CSS Be Used to Style Mouseover Effects on Image Maps?

Can CSS Be Used to Style Mouseover Effects on Image Maps?

Creating a webpage with an image that includes links can be achieved using an image map. However, adding a touch of interactivity by styling the area shapes on mouseover can enhance the user experience. Is this possible using CSS?

Let's consider the following code:

<img src="/static/imghwm/default1.png" data-src="{main_photo}" class="lazy" alt="locations map" usemap="#location-map">
<map name="location-map">
    <area shape="rect" coords="208,230,290,245" href="%7Bsite_url%7Dlocations/grand_bay_al">
    <area shape="rect" coords="307,214,364,226" href="%7Bsite_url%7Dlocations/mobile_al">
    <area shape="rect" coords="317,276,375,290" href="%7Bsite_url%7Dlocations/loxley_al">
</map>

area { border: 1px solid #d5d5d5; }

Despite attempts, this code fails to style the area shapes on mouseover.

CSS-Only Solution:

Instead of using the image map approach, an alternative method using CSS's :hover pseudo-class is available. Here's an example:

<div class="area"></div>
<div class="area"></div>
<img  src="/static/imghwm/default1.png" data-src="image.jpg" class="lazy" alt="Can CSS Be Used to Style Mouseover Effects on Image Maps?" >

.area {
    background: #fff;
    display: block;
    height: [desired height];
    opacity: 0;
    position: absolute;
    width: [desired width];
}
.area:hover {
    opacity: 0.2;
}

Explanation:

• The image is placed at the bottom layer.
• Two div elements are positioned absolutely on top of the image with an opacity of 0.
• When the mouse hovers over these div elements, the opacity increases to 0.2, revealing the content behind them.

This method provides a simple and elegant way to add mouseover effects to specific areas of an image using CSS.

The above is the detailed content of Can CSS Be Used to Style Mouseover Effects on Image Maps?. For more information, please follow other related articles on the PHP Chinese website!