Comment obtenir des effets de survol de la souris sur des cartes d'images à l'aide de CSS ?

Style des survols de cartes d'images avec CSS

Lors de la création de pages Web interactives, il est souvent nécessaire d'inclure des images avec des zones cliquables. Généralement, cela est réalisé à l’aide de cartes d’images. Cependant, styliser ces zones au survol de la souris pour fournir une interactivité supplémentaire s'est avéré difficile.

Dans le passé, tenter de styliser ces zones à l'aide de CSS a rencontré un succès limité, comme le démontre l'exemple fourni :

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

Solution CSS uniquement

Heureusement, il existe une solution de contournement simple utilisant uniquement CSS :

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

Dans cette approche, transparent des blocs sont placés sur l'image, chacun représentant une zone cliquable. En définissant l'opacité sur 0 par défaut et en l'augmentant à 0,2 au survol, un subtil effet de survol de la souris est obtenu.

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!