Wenn Sie mit der Maus über die Homepage Text kann eines von zwei Dingen passieren : nichts oder etwas, das ins Auge fällt . Web -Entwickler nutzen JavaScript und Cascading Style Sheets , um eine Vielzahl von visuellen Rollover-Effekte , die unterhalten und informieren uns zu schaffen. Zum Beispiel könnte das Bewegen der Maus über "Information" unterstreichen das Wort . Dies ließ ein Benutzer wissen , dass er das Wort für weitere Informationen klicken . Wenn sparsam und angemessen , Text optimieren Rollover-Effekte die Browsing-Erlebnis , indem sie visuelle Feedback und die Aufmerksamkeit auf wichtige Elemente einer Seite . CSS Hover Effekte
Die einfachste Text Rollover-Effekt erfordert keine Codierung. Alle Browser unterstützen mindestens eine Variation dieses Style Sheet hover -Attribut. Dies ist ein " Pseudo"- Klasse. Der folgende Code fügt einen Pseudo -Klasse für alle Links auf einer Seite:
a.MyLinks : hover {color : blue; background-color : red; font- weight: bold; }
ein Benutzer die Maus über einen Link , zeigt der Link die Eigenschaften in der Klassendefinition definiert .
JavaScript Effects
Web-Entwickler rufen JavaScript-Funktionen , um das Aussehen zu ändern von Textelementen . Textelemente sind Absätze , div -Container und Überschriften . Um eine JavaScript-Funktion aufrufen, wenn ein Überschlag auftritt, verweisen die Funktion in den HTML- Text -Element -Tag. Der folgende Tag ruft die " changeText " JavaScript-Funktion , wenn ein Benutzer die Maus über der Überschrift :
Dies ist eine Überschrift < /h > ;
Die JavaScript-Funktion erhalten die Überschriften-Element und ändern ihre Farbe, Größe , Schriftart, Text Dekoration und anderen Style-Eigenschaften . Viele Browser ermöglichen Sie JavaScript, um die Deckkraft eines Elements und Transparenz ändern. Außerdem haben die Entwickler animieren Text indem Sie den Text Elements Lage im Laufe der Zeit mit der setTimeOut und setInterval Funktionen .
DOM Effects
Web -Entwickler nutzen das Document Object Model (DOM) zu modifizieren Webseite Elemente . DOM Text-Effekte erfordern mehr Codierung und Wissen über Web- HTML , CSS und JavaScript. Mit dem DOM , ändern Entwickler ein Textelement das Aussehen, die Position auf der Seite und sogar den Inhalt des Textes. Die " document.getElementById "-Befehl ist eine der wichtigsten Befehle für die Manipulation des DOM . Verwenden Sie diesen Befehl, um einen Verweis auf ein Textelement abzurufen. Nach dem Auffinden , ändern des Elements DOM Eigenschaften , um die gewünschte Wirkung zu erzielen. So ändern Sie den Inhalt des Textes durch Modifikation des Elements " innerHTML " Eigenschaft . Ändern des Elements Aussehen durch Änderung der " outerHTML " Eigenschaft .
