CSS peut-il être utilisé pour styliser les effets de survol des images cliquables ?

Le CSS peut-il être utilisé pour styliser les effets de survol de la souris sur les cartes d'images ?

La création d'une page Web avec une image incluant des liens peut être réalisée à l'aide d'un carte-image. Cependant, ajouter une touche d'interactivité en stylisant les formes de la zone au survol de la souris peut améliorer l'expérience utilisateur. Est-ce possible en utilisant CSS ?

Considérons le code suivant :

<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; }

Malgré les tentatives, ce code ne parvient pas à styliser les formes de zone au survol de la souris.

Solution CSS uniquement :

Au lieu d'utiliser l'approche de carte d'image, une méthode alternative utilisant la pseudo-classe :hover de CSS est disponible. Voici un exemple :

<div class="area"></div>
<div class="area"></div>
<img src="image.jpg" />

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

Explication :

• L'image est placée au niveau du calque inférieur.
• Deux div les éléments sont positionnés absolument au-dessus de l'image avec une opacité de 0.
• Lorsque la souris survole ces éléments div, l'opacité augmente à 0,2, révélant le contenu derrière eux.

Cette méthode fournit un moyen simple et élégant d'ajouter des effets de survol de la souris à des zones spécifiques d'une image à l'aide de CSS.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!