Gewusst wie: Ändern der Hintergrundfarbe auf eine Mouseover

In den frühen Tagen des Webs hinzugefügt Designer manchmal eine überraschende "Farbe ändern" Wirkung ihrer Internetseiten. Wenn ein Besucher auf einer Webseite einen Mauscursor über etwas verschoben, geändert der Seitenhintergrund plötzlich Farben. Sie können diesen Effekt nicht häufig heute sehen, aber Sie können es noch auf Ihrer Website. Jedes HTML-Dokument hat ein "Mouseover" Ereignis. Durch Anhängen dieses Ereignis für ein Steuerelement auf der Web-Seite, machen Sie dieses Steuerelement eine Hintergrund-Farbänderung auslösen.

Anweisungen

1 Starten Sie Ihren HTML-Editor oder Notepad.

2 Fügen Sie den folgenden HTML-Code auf das Dokument "Textabschnitt": Dies erstellt eine Schaltfläche mit einem Id-Wert von "Button1."

< Eingabe-Id = "Button1" Type = "Button" Value = "button" >

Dies erstellt eine Schaltfläche mit einem Id-Wert von "Button1."

3 Suchen Sie das Dokument "Kopf" Abschnitt.

4 Fügen Sie folgenden Code innerhalb dieses Abschnitts:

< Skript-Typ = "Text/Javascript" >

Var NewColor = "Red";

Var MouseoverObject = "Button1";

Window.OnLoad = Function () {}

document.getElementById (MouseoverObject) .onmouseover = ChangeColor;}

Funktion changeColor() {}

Var BodyObject = document.getElementsByTagName('body') [0];

bodyObject.style.backgroundColor = NewColor;

}

< / script >

Die Variable mit dem Namen "NewColor" enthält die Farbe der Farbe soll der Hintergrund der Seite ändern. Die MouseoverObject-Variable enthält die Id des Objekts Mouseover. In diesem Beispiel handelt es sich den Button mit der Id ist "Button1." Die window.onload-Funktion wird die MouseoverObject ein Mouseover-Ereignis hinzugefügt. Dieses Ereignis wird die ChangeColor-Funktion. Diese Funktion erhält einen Verweis auf die Seite "Body"-Element, und ändert sich die Hintergrundfarbe die Farbe, die Sie in der NewColor-Variablen definieren.

5 Speichern Sie das Dokument, und öffnen Sie es in einem Browser. Bewegen Sie Ihre Maus über die Schaltfläche. Hintergrundfarbe der Seite zu rot geändert.

Tipps & Warnungen

• In diesem Beispiel löst ein Button mit der Id "Button1" ist die Farbänderung. Um diese Arbeit mit einem anderen Steuerelement, z. B. ein Bild zu machen, geben Sie dem Steuerelement einen Id-Wert, und weisen sie der Variablen "MouseoverObject".
• Ändern Sie den Wert der NewColor JavaScript Variablen auf den Namen einer beliebigen gültigen HTML-Farbe. Websites wie W3Schools haben Farbtabellen, die die Namen der HTML-Farben zeigen, die Sie wählen können.