In einem anderen Tutorial haben wir uns angesehen, wie Sie mit der CSS-Eigenschaft background-image und dem Selektor :hover ein interaktives Bild erstellen, das sich ändert, wenn ein Benutzer die Maus über das Bild bewegt. In diesem Beispiel haben wir mit einem grauen Startsymbol begonnen und es in ein orangefarbenes Symbol umgewandelt. 
In diesem Tutorial werden wir uns eine andere Möglichkeit ansehen, dasselbe mit JavaScript zu erreichen.
Wann sollten Sie CSS vs JavaScript verwenden?
CSS ist die Sprache, die verwendet wird, um das Website-Layout zu definieren und einfache Animationen zu erstellen. JavaScript wird verwendet, um Interaktivität basierend auf dem Feedback und der Aktivität der Website-Benutzer hinzuzufügen. Es gibt Stellen, an denen sich die Funktionen von CSS und JavaScript überschneiden. Diese Überlappung wirft die Frage auf: Welche sollten Sie verwenden? Die Antwort auf diese Frage ist nicht einfach, und es wurden viele Meinungen zu diesem Thema geäußert. Einige sagen, dass Sie CSS in praktisch jedem Fall verwenden und JavaScript nur verwenden sollten, wenn kein anderes Tool die Arbeit erledigen kann. Andere bieten ein völlig entgegengesetztes Argument, dass JavaScript CSS vollständig ersetzen sollte. In der Praxis verwenden die meisten Entwickler einfach die Sprache, mit der sie am besten vertraut sind, auch wenn dies nicht die beste Wahl für die jeweilige Aufgabe ist. Wir werden die Debatte nicht abwägen. Wir lassen Sie Ihre eigene Meinung zu diesem Thema bilden und konzentrieren uns stattdessen darauf, Ihnen zu zeigen, wie Sie sowohl CSS als auch JavaScript verwenden. In einem früheren Tutorial wurde bereits gezeigt, wie dieser Übergang mit CSS durchgeführt werden kann. Sie können es hier sehen. Im Rest dieses Tutorials erfahren Sie, wie Sie JavaScript für diese allgemeine Aufgabe verwenden.
Der Code hinter der Transformation
Hier ist der JavaScript- und HTML-Code, der zum Erstellen der Transformation verwendet wird.
<a href="home_url" onmouseover="rollover('home')" onmouseout="rollout('home')"> <img src="../path/original_image.file" name="home" alt="Home Page"> </a> <script type="text/javascript"> <!-- setrollover("../path/hover_image.file"); --> </script> Nehmen wir diese Codeteile nacheinander, damit wir verstehen, was los ist.
Das Ankerelement
Die erste Codezeile, die wir sehen, ist ein Ankerelement.
<a href="home_url" onmouseover="rollover('home')" onmouseout="rollout('home')" > Da in unserem Beispiel ein Home-Symbol mit der Homepage der Website verknüpft wird, verweist das Attribut href auf die Homepage unserer Website. Als nächstes kommt das onmouseover JavaScript-Ereignis. Dies ist das Ereignis, das auftritt, wenn die Maus über das Ankerelement bewegt wird. In diesem Fall wird eine Funktion namens rollover aufgerufen und bewirkt das Element mit dem Namen ‚home‘. Schließlich haben wir das Ereignis onmouseout, das die Funktion rollout aufruft, die wiederum das Element mit dem Namen ‚home‘ betrifft.
Das im Ankerelement verschachtelte Bildelement
ist unser Bildelement.
<img src="../path/original_image.file" name="home" alt="Home Page"> Wir verwenden das image-Element, um das Bild zu laden, das angezeigt wird, wenn die Maus nicht über dem Ankerelement schwebt. In unserem Beispiel laden wir das graue Haussymbol. Als nächstes kommt das Attribut name. Wir verwenden dieses Attribut, um das JavaScript wegzugeben, um das HTML-Element zu identifizieren, das wir mit dem Skript ändern möchten. Werfen Sie einen kurzen Blick zurück auf das Ankerelement und beachten Sie, wie beide Funktionen den Parameter ('home') verwenden. Mit dem Attribut name="home" identifizieren die JavaScript-Funktionen das Bildelement als das Element, auf das reagiert werden soll.
Das Skript
Schließlich haben wir ein sehr kurzes Skript.
<script type="text/javascript"> <!-- setrollover("../path/hover_image.file"); --> </script> Dieses Skript legt einen Wert für die rollover -Funktion fest, die von onmouseover aufgerufen wird, wenn die Maus eines Betrachters über das Bild bewegt wird.
Alles zusammenfügen
Wenn wir Anker, Bild und Skript zusammenfügen, erhalten wir Folgendes.
Vereinfachen Sie den Code mit jQuery
jQuery ist eine JavaScript-Bibliothek, mit der Sie nahezu jede Art von JavaScript-Animation oder -Transformation mit weniger Code erstellen können. Wenn wir jQuery verwenden wollten, um dieselbe Transformation zu erstellen, würde der Code folgendermaßen aussehen.
<a href="home_url"> <img src="../path/original_image.file" alt="Home Page"> </a> <script> jQuery.('#home').hover( function(){ $(this).attr( 'src' , 'hover-image.file' ) }, function(){ $(this).attr( 'src' , 'original-image.file' ) } ); </script> Das Schöne an der Verwendung von jQuery ist, dass wir dem HTML selbst keine Ereignishandler mehr hinzufügen müssen (erinnern Sie sich an die Ereignisse onmouseover und onmouseout aus dem ursprünglichen Code?). Eines der besten Dinge an jQuery ist, dass es die Ereignishandler dynamisch hinzufügen kann. Dies ermöglicht eine größere Trennung zwischen dem Skript und dem HTML-Inhalt und ist eine bessere Art der Codierung. Wie Sie sehen, ist der HTML-Code viel sauberer, wenn wir die jQuery-Bibliothek verwenden und das Endergebnis dasselbe ist.
jQuery.(‚#Zuhause‘).hover( Funktion(){ $(dies).attr( ’src‘ , ‚home168-1.png‘ ) }, Funktion(){ $(dies).attr( ’src‘ , ‚orange_home.png‘ ) } );Hinzufügen von jQuery zu einer Website
Eine Sache, die Sie beachten sollten, wenn Sie diesen Code auf Ihrer eigenen Website verwenden möchten, ist, dass die jQuery-Bibliothek vom Browser auf jeder Seite geladen werden muss, auf der ein jQuery-Skript verwendet wird. JavaScript wird von jedem modernen Browser unterstützt. Die jQuery-Bibliothek muss jedoch dem Browser hinzugefügt werden, damit jQuery-Skripte verarbeitet werden können. Es gibt zwei Möglichkeiten, jQuery zu einer Website hinzuzufügen.
- Laden Sie jQuery von der jQuery Foundation herunter und laden Sie es auf Ihren Webserver hoch.
- Link zu einer öffentlich gehosteten jQuery-Bibliothek.
Der einfachste Weg, jQuery zu einer Website hinzuzufügen, besteht darin, eine Verknüpfung zu einer jQuery-Bibliothek herzustellen, die bereits im Web gehostet wird. Sie können die von Google gehostete jQuery-Bibliothek laden, indem Sie die folgende Codezeile in das head -Element Ihrer Website einfügen.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script> 
