Comment modifier l'URL d'une source d'image en survol à l'aide de HTML, CSS et JavaScript ?

Modification de l'URL source de l'image au survol

Problème :

Vous souhaitez mettre à jour dynamiquement l'URL source d'un < img> balise lorsque l'utilisateur la survole.

Tentative et problème :

Votre approche initiale utilisant la propriété de contenu CSS et le sélecteur :hover n'a pas fonctionné.

Solution :

Bien que changer l'attribut src directement avec CSS n'est pas possible, voici deux méthodes alternatives utilisant HTML, CSS et JavaScript :

Méthode 1 : Utiliser des images d'arrière-plan

1. Remplacer le <img> balise avec un <div>
2. Définissez l'image d'arrière-plan du <div> à l'image par défaut à l'aide de CSS.
3. Utilisez le sélecteur :hover pour mettre à jour l'image d'arrière-plan vers l'image de survol.

<div>

#my-div:hover {
    background: url(hover-image.jpg);
}

Méthode 2 : Utilisation JavaScript

1. Définir des fonctions JavaScript pour modifier l'attribut src au survol et unhover.
2. Attribuez la fonction de survol à l'événement onmouseover et la fonction de survol à l'événement onmouseout de l'événement <img> balise.

<img>

function hoverImage(element) {
    element.src = "hover-image.jpg";
}

function unhoverImage(element) {
    element.src = "default-image.jpg";
}

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!