Comment puis-je modifier une source d'image en survol ?

Changer la source de l'image en survol : un guide complet

Vous pouvez rencontrer un scénario dans lequel vous devez modifier dynamiquement l'URL source d'un < ;img> tag lorsque la souris passe dessus. Bien que cela semble être une tâche simple, elle n'est pas aussi facilement réalisable qu'on pourrait le penser.

Le piège CSS

Au départ, vous pouvez essayer d'utiliser la propriété content de CSS pour remplacer la source de l'image, comme le montre le code suivant :

#my-img:hover {
    content: url('http://dummyimage.com/100x100/eb00eb/fff');
}

Cependant, cette approche ne fonctionne que pour les navigateurs Webkit comme Google Chrome. D'autres navigateurs majeurs, tels que Firefox et Safari, ignorent la propriété content dans ce contexte.

L'alternative HTML et CSS

Si CSS n'est pas une option, vous pouvez envisagez de remplacer le <img> balise avec un <div> étiqueter. En définissant l'image d'arrière-plan du fichier <div> et en le modifiant au survol, vous pouvez efficacement obtenir le résultat souhaité :

<div>

#my-div {
    background-image: url('http://dummyimage.com/100x100/000/fff');
}

#my-div:hover {
    background-image: url('http://dummyimage.com/100x100/eb00eb/fff');
}

La solution JavaScript

Pour une plus grande polyvalence, vous pouvez exploiter JavaScript pour manipuler directement l'attribut src du fichier <img> étiqueter. Cette approche fonctionne sur tous les principaux navigateurs :

<img>

const myImg = document.getElementById('my-img');

myImg.addEventListener('mouseover', () => {
    myImg.setAttribute('src', 'http://dummyimage.com/100x100/eb00eb/fff');
});

myImg.addEventListener('mouseout', () => {
    myImg.setAttribute('src', 'http://dummyimage.com/100x100/000/fff');
});

En employant l'une de ces techniques, vous pouvez modifier de manière transparente l'URL source d'un fichier <img> tag au survol, offrant des expériences visuelles dynamiques et attrayantes pour vos applications Web.

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!