Modifier l'arrière-plan des images cliquables sur le survol de la souris

Question

Sur mon site Web, j'ai une image comme barre de navigation et j'ai créé des zones sensibles pour les lier à différentes pages. Le problème est que le texte fait partie de l'image, je ne peux pas changer le style du texte sur hover. Alors que je veux que le texte/le hotspot se démarque au passage de la souris, j'apprends que la couleur d'arrière-plan peut être changée en passant la souris dessus. Est-ce possible? Existe-t-il un moyen de le faire en CSS, en utilisant la zone ou les cartes. Si Javascript doit être utilisé, quelqu'un pourrait-il m'aider avec.

Answer 1

Y a-t-il une raison pour laquelle vous avez utilisé une seule image comme barre de navigation? Au lieu d'une seule image avec des hotspots, j'utiliserais une image individuelle pour chaque lien de navigation. De cette façon, vous pouvez facilement changer l'image (ou utiliser le positionnement d'image CSS) en survol. Ceci est décrit ici:

http://css-tricks.com/video-screencasts/7-three-state-menu/

ainsi que de nombreux autres endroits où je suis sûr.

Answer 2

Je ne pense pas que ce soit une bonne idée d'utiliser ni les images ni les images individuelles. A la place, utilisez les sprites CSS: un seul fichier image, ajoutez-le comme image d'arrière-plan aux liens du menu, mais positionnez les images d'arrière-plan différemment. Voir this Line 25 tutorial pour plus d'informations.