egy másik oktatóanyagban azt vizsgáltuk, hogyan lehet a CSS background-image tulajdonságot és a :hover választót használni egy interaktív kép létrehozásához, amely megváltozott, amikor a felhasználó az egeret a kép fölé mozgatta. Ebben a példában egy szürke otthoni ikonnal kezdtük, és narancssárga ikonná alakítottuk át. 
ebben az oktatóanyagban egy másik módszert fogunk megvizsgálni, hogy ugyanazt a dolgot a JavaScript segítségével érjük el.
mikor kell használni CSS vs JavaScript
CSS az a nyelv, amely meghatározza a weboldal elrendezését és egyszerű animációkat hoz létre. A JavaScript az interaktivitás hozzáadására szolgál a webhely felhasználói visszajelzései és tevékenysége alapján. Vannak helyek, ahol a CSS és a JavaScript képességei átfedik egymást. Ez az átfedés felveti a kérdést: melyiket használja? A válasz erre a kérdésre nem egyszerű, és sok véleményt fejeztek ki a témában. Néhányan azt mondják, hogy a CSS-t gyakorlatilag minden esetben kell használni, és csak akkor használja a Javascriptet, ha más eszköz nem tudja elvégezni a munkát. Mások teljesen ellentétes érvet kínálnak, miszerint a JavaScript-nek teljesen le kell cserélnie a CSS-t. A gyakorlatban a legtöbb fejlesztő egyszerűen azt a nyelvet használja, amelyet a legjobban ismer, még akkor is, ha ez nem a legjobb választás az adott feladathoz. Nem fogunk beleszólni a vitába. Hagyjuk, hogy saját döntést hozzon az ügyben, és ehelyett arra összpontosítson, hogy megmutassa, hogyan kell használni mind a CSS-t, mind a Javascriptet. Egy korábbi oktatóanyag már bemutatta, hogyan lehet ezt az átmenetet elérni a CSS segítségével. Itt láthatod. Az oktatóanyag többi része megtanítja, hogyan kell használni a Javascriptet ehhez a közös feladathoz.
a kód mögött az átalakítás
itt van a JavaScript és HTML kód létrehozásához használt transzformáció.
<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> vegyük ezeket a kódrészleteket egyesével, hogy megértsük, mi folyik itt.
a horgony elem
a kód első sora, amelyet látunk, egy horgony elem.
<a href="home_url" onmouseover="rollover('home')" onmouseout="rollout('home')" > mivel példánk magában foglalja a Kezdőlap ikon összekapcsolását a weboldal kezdőlapjával, a href attribútum a weboldal kezdőlapjára mutat. Ezután következik a onmouseover JavaScript esemény. Ez az esemény akkor fordul elő, amikor az egér lebeg a horgonyelem felett. Ebben az esetben egy rollover nevű függvényt hívunk meg, amely az elemet ‘home’névvel effektálja. Végül megvan a onmouseout esemény, amely meghívja a rollout függvényt, amely ismét befolyásolja a ‘home’nevű elemet.
a horgony elembe ágyazott
képelem a mi képelemünk.
<img src="../path/original_image.file" name="home" alt="Home Page"> a kép elemet használjuk a kép betöltésére, amely akkor jelenik meg, ha az egér nem lebeg a horgonyelem felett. Példánk esetében betöltjük a szürke ház ikont. Ezután következik a name attribútum. Ezt az attribútumot használjuk a JavaScript eladásához, hogy azonosítsuk azt a HTML elemet, amelyet módosítani akarunk a szkripttel. Vessen egy gyors pillantást a horgonyelemre, és vegye figyelembe, hogy mindkét funkció hogyan használja a ('home')paramétert. A name="home" attribútum az, ahogyan a JavaScript függvények azonosítják a képelemet, mint az elemet, amelyen cselekedni kell.
a szkript
végül van egy nagyon rövid szkriptünk.
<script type="text/javascript"> <!-- setrollover("../path/hover_image.file"); --> </script> ez a parancsfájl beállítja a rollover függvény értékét, amelyet a onmouseover hív meg, amikor a néző egere a kép felett lebeg.
mindent összerakva
ha összerakjuk a horgonyt, a képet és a szkriptet, akkor ezt kapjuk.
egyszerűsítse a kódot a jQuery
a jQuery egy JavaScript könyvtár, amely lehetővé teszi, hogy bármilyen JavaScript animációt vagy átalakítást hozzon létre kevesebb kóddal. Ha a jQuery-t szeretnénk használni ugyanazon átalakítás létrehozásához, akkor a kód így nézne ki.
<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> a jQuery használatában az a jó, hogy már nem kell eseménykezelőket hozzáadnunk magához a HTML-hez (emlékszel a onmouseover és onmouseout eseményekre az eredeti kódból?). Az egyik legjobb dolog a jQuery-ben, hogy dinamikusan hozzáadhatja az eseménykezelőket. Ez nagyobb elválasztást tesz lehetővé a szkript és a HTML tartalom között, és jobb kódolási mód. Mint látható, a HTML sokkal tisztább, ha a jQuery könyvtárat használjuk, és a végeredmény ugyanaz.
jQuery.(‘#otthon’).lebeg (függvény () { $(ezt).attr (‘src’, ‘ home168-1.png’)}, függvény () { $(ez).attr (‘src’, ‘ orange_home.png’ ) } );hozzáadása jQuery a honlapon
egy dolog, hogy tartsa szem előtt, ha úgy dönt, hogy használja ezt a kódot a saját honlapján, hogy a jQuery könyvtár kell betölteni a böngésző minden oldalon, ahol a jQuery script használják. A JavaScriptet minden modern böngésző támogatja. A jQuery könyvtárat azonban hozzá kell adni a böngészőhöz a jQuery szkriptek feldolgozásához. Kétféle módon lehet hozzáadni a jQuery-t egy webhelyhez.
- töltse le a jQuery-t a jQuery Alapítványtól, és töltse fel a webszerverére.
- Link egy nyilvánosan tárolt jQuery könyvtárhoz.
a jQuery webhelyhez való hozzáadásának legegyszerűbb módja az, ha egy olyan jQuery könyvtárra hivatkozik, amely már az interneten található. A Google által üzemeltetett jQuery könyvtárat a következő kódsor beillesztésével töltheti be webhelye head elemébe.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script> 
