DIV-Rollover-Effekten

Web-Design-Techniken basieren alle auf Hypertext Markup Language und Cascading Style Sheets geschickt zu manipulieren. CSS hat Webdesign brachte einen langen Weg von die tabellenbasierte Designs der Vergangenheit. Es ist jetzt möglich, Rollover-Effekte und andere subtilen Animationen zu produzieren, ohne Code in Javascript schreiben. Ein paar Zeilen CSS werden einen nette Rollover-Effekt erzeugen.

Einrichten

Bevor Sie einen Rollover-Effekt auf ein DIV zu veranschaulichen, ist es notwendig die Einrichtung. Eine sehr geringe Webseite könnte wie folgt aussehen:

< html >

< Körper >

< Stil >

Wrapper {Width: 900px; Margin: 0 Auto;} Beispiel {Width: 300px; Höhe: 300px; Hintergrund-Farbe: rot} < / style >

< Div Id = "Wrapper" >

< Div Id = "Beispiel" >

< / Div >

< / Div >

< / body >

< / html >

Dies erstellt einen Wrapper, der den Test-Inhalt in der Mitte der Seite halten wird. Außerdem erstellt er ein rotes Quadrat. Sie können speichern Sie diesen Code als ein Dokument mit der Endung ".html" und öffnen Sie es in einem Browser zu sehen.

Machen das Quadrat größer

In Web-Design dienen Rollover-Effekte geben das Endbenutzer-Feedback über wie er die Website verwendet. Ein Rollover-Effekt wie die Herstellung einer Schaltfläche größere bringt die Aufmerksamkeit eines Benutzers zu diesem Element. Eine Rollover verwenden, um ein Element zu vergrößern, ist eine Technik, die in der Regel auf Schaltflächen oder Links verwendet wird, um die Nutzer zum Klicken zu fördern. Um den Platz im Beispielcode zu vergrößern, fügen Sie die folgende Zeile nach dem Tag "< Stil >":

Beispiel: Hover {Width: 400px; Height: 400px}

Ändern der Farbe

Ändern der Farbe eines Elements kann auch verwendet werden, geben Sie eine Benutzer-Feedback darüber, wie wird er Ihre Website. Z. B. ändern hyper-Links Farben, nachdem sie angeklickt haben. Ändern der Farbe eines Elements auf Rollover kann auch Nutzer zum klicken, fördern und ist ein wenig subtiler als die Größe eines Elements zu ändern. Ändern Sie hierzu den folgenden Code im Beispiel:

Beispiel: Hover {Width: 400px; Height: 400px} An:

Beispiel: Hover {Background-Farbe: blau}

Ändern von Formatvorlagen

Ändern den Stil des Textes auf ein Rollover ist auch eine nützliche Technik. Dies ist vielleicht die subtilste Weise Benutzer Feedback zur Verwendung eine Website geben. Unterstreichen von Text auf Rollover wird beispielsweise normalerweise verwendet, um anzugeben, dass der Text einen Link ist. Diese Technik ist zwar sehr subtil, und andere Hinweise sind in der Regel benötigt den Benutzer führen. Wenn Sie den Benutzer klicken auf etwas möchten, und Textstile, um Feedback zu geben, müssen das Element zunächst abheben.