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 :
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!