Utilisez CSS pour obtenir des effets de texte à image_CSS/HTML

Pour un morceau de texte, lorsque la souris clique sur le texte, le texte disparaît, mais l'endroit où le texte original a été initialement transformé en image. Lorsque la souris clique sur l'image, l'image disparaît et le texte original. réapparaît. C'est comme par magie, n'est-ce pas intéressant ?! Cet effet peut également être obtenu grâce à la fonction Behavirs de Dreamweaver, mais cela nécessite l'ajout d'un programme JavaScript, ce qui ajoute évidemment beaucoup de code. Utiliser CSS pour créer cet effet nécessite beaucoup moins de code.

Principe : Profitez du fait que les valeurs des propriétés CSS peuvent être modifiées dynamiquement.

Idée : définissez deux valeurs d'attribut​​de l'attribut CSS d'un élément HTML, puis utilisez un événement pour le déclencher. Une fois l'événement survenu, la valeur d'attribut de l'élément HTML est modifiée pour atteindre l'objectif souhaité. .

Méthode de production :

1. Saisissez un morceau de texte dans la page Web, entourez-le de la balise "Span" et ajoutez-y un attribut CSS "ID" (c'est-à-dire donnez au texte un nom de code, tel que : "Text1" , pour identification) ; insérez une autre image, joignez-la également avec "Span" et ajoutez-y un attribut "ID", tel que : ID="image1";

2. Ajoutez le code CSS suivant entre 〈head〉 et 〈/head〉 du code source de la page Web :

　〈style type="text/css"〉