Verwenden Sie CSS, um Text-zu-Bild-Effekte zu erzielen_CSS/HTML

Wenn Sie mit der Maus auf den Text klicken, verschwindet der Text, aber die Stelle, an der der Originaltext ursprünglich in ein Bild umgewandelt wurde, verschwindet erscheint wieder. Es ist wie von Zauberhand, nicht wahr? Dieser Effekt kann auch mit der Behavirs-Funktion von Dreamweaver erzielt werden, aber dafür ist das Hinzufügen eines JavaScript-Programms erforderlich, das offensichtlich viel Code hinzufügt. Die Verwendung von CSS zum Erstellen dieses Effekts erfordert viel weniger Code.

Prinzip: Nutzen Sie die Tatsache, dass CSS-Eigenschaftswerte dynamisch geändert werden können.

Idee: Definieren Sie zwei Attributwerte des CSS-Attributs eines HTML-Elements und verwenden Sie dann ein Ereignis, um es auszulösen. Sobald das Ereignis eintritt, wird der Attributwert des HTML-Elements geändert, um den gewünschten Zweck zu erreichen .

Produktionsmethode:

1. Geben Sie einen Text in die Webseite ein, schließen Sie ihn mit dem Tag „Span“ ein und fügen Sie ihm ein CSS-Attribut „ID“ hinzu (d. h. geben Sie dem Text einen Codenamen, z. B. „Text1“) , zur Identifizierung); fügen Sie ein weiteres Bild ein, schließen Sie es ebenfalls mit „Span“ ein und fügen Sie ein „ID“-Attribut hinzu, wie zum Beispiel: ID="image1";

2. Fügen Sie den folgenden CSS-Code zwischen 〈head〉 und 〈/head〉 des Quellcodes der Webseite hinzu:

　〈style type="text/css"〉