toisessa opetusohjelmassa tarkasteltiin, miten CSS: ää background-image ominaisuutta ja :hover valitsinta voidaan käyttää luomaan interaktiivinen kuva, joka muuttui, kun käyttäjä siirsi hiirensä kuvan päälle. Siinä esimerkissä aloitimme harmaasta koti-ikonista ja muutimme sen oranssiksi ikoniksi. 
tässä opetusohjelmassa tarkastelemme toista tapaa toteuttaa sama asia JavaScriptin avulla.
When Should you Use CSS vs JavaScript
CSS on kieli, jota käytetään verkkosivuston asettelun määrittämiseen ja yksinkertaisten animaatioiden luomiseen. JavaScriptiä käytetään interaktiivisuuden lisäämiseen verkkosivuston käyttäjäpalautteen ja aktiivisuuden perusteella. On paikkoja, joissa css: n ja JavaScriptin ominaisuudet menevät päällekkäin. Tämä päällekkäisyys herättää kysymyksen: mitä sinun pitäisi käyttää? Vastaus tähän kysymykseen ei ole yksinkertainen, ja aiheesta on esitetty monia mielipiteitä. Jotkut sanovat, että sinun pitäisi käyttää CSS lähes kaikissa tapauksissa ja vain käyttää JavaScript kun mikään muu työkalu voi tehdä työtä. Toiset tarjoavat täysin päinvastainen väite, että JavaScript pitäisi korvata CSS kokonaan. Käytännössä useimmat kehittäjät käyttävät vain kieltä, jonka he tuntevat parhaiten, vaikka se ei olisikaan paras valinta käsillä olevaan tehtävään. Emme ota kantaa väittelyyn. Aiomme antaa sinun tehdä jopa oman mielen asiasta ja sen sijaan keskittyä näyttämään, miten käyttää sekä CSS ja JavaScript. Edellinen opetusohjelma jo osoittanut, miten tämän siirtymisen CSS. Näet sen täältä. Loput opetusohjelma opettaa sinulle, miten JavaScript tämän yhteisen tehtävän.
muunnoksen taustalla oleva koodi
tässä on muunnoksen luomiseen käytetty JavaScript-ja HTML-koodi.
<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> otetaan ne koodinpätkät yksi kerrallaan, jotta ymmärrämme, mistä on kyse.
Ankkurielementti
ensimmäinen koodirivi, jonka näemme, on ankkurielementti.
<a href="home_url" onmouseover="rollover('home')" onmouseout="rollout('home')" > koska esimerkissämme linkitetään kotikuvake verkkosivuston etusivulle, href – attribuutti viittaa verkkosivustomme etusivuun. Seuraavaksi tulee onmouseover JavaScript-tapahtuma. Tämä on tapahtuma, joka tapahtuu, kun hiiri leijuu ankkuri Elementti. Tällöin kutsutaan funktiota rollover, joka efektoi kohteen nimellä ”koti”. Lopuksi on onmouseout tapahtuma, joka kutsuu rollout funktiota, joka jälleen kerran vaikuttaa ”koti” – nimellä varustettuun kohteeseen.
kuvaelementti
Ankkurielementin sisällä on kuvaelementtimme.
<img src="../path/original_image.file" name="home" alt="Home Page"> lataamme kuvaelementin avulla kuvan, joka ilmestyy, kun hiiri ei leijaile ankkurielementin yllä. Esimerkkimme tapauksessa lataamme gray house-ikonin. Seuraavaksi tulee name – attribuutti. Käytämme tätä ominaisuutta antaa JavaScript pois tunnistaa HTML-elementti, jota haluamme muokata script. Tutustu nopeasti ankkurielementtiin ja huomaa, miten molemmat toiminnot käyttävät parametria ('home'). Attribuutti name="home" on se, miten JavaScript-funktiot tunnistavat kuva-elementin näyteltäväksi kohteeksi.
käsikirjoitus
lopuksi meillä on hyvin lyhyt käsikirjoitus.
<script type="text/javascript"> <!-- setrollover("../path/hover_image.file"); --> </script> tämä kirjoitus asettaa arvon rollover funktiolle, jota onmouseover kutsuu käynnistymään, kun katsojan hiiri leijuu kuvan yllä.
Putting it All Together
If we put the anchor, image, and script all together here ’ s what we get.
yksinkertaista koodia jqueryllä
jQuery on JavaScript-kirjasto, jonka avulla voit luoda lähes mitä tahansa JavaScript-animaatiota tai muunnosta vähemmällä koodilla. Jos haluaisimme käyttää jQuerya luomaan saman muutoksen, koodi näyttäisi tältä.
<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> mukavaa jQueryn käytössä on se, että itse HTML: ään ei enää tarvitse lisätä tapahtumankäsittelijöitä (Muistatko onmouseover ja onmouseout tapahtumat alkuperäisestä koodista?). Yksi parhaista asioista jQuery on, että se voi lisätä tapahtuman käsittelijät dynaamisesti. Tämä mahdollistaa suuremman eron skriptin ja HTML-sisällön välillä ja on parempi tapa koodata. Kuten näette, HTML on paljon puhtaampaa, jos käytämme jQuery-kirjastoa ja lopputulos on sama.
jQuery.(”#koti”).hover (funktio () {$(tämä).attr (”src”, ” home168-1.png’)}, funktio () {$(this).attr (”src”, ” orange_home.png’ ) } );jQueryn lisääminen verkkosivustolle
yksi asia on pidettävä mielessä, jos päätät käyttää tätä koodia omalla verkkosivustollasi, että selaimen on ladattava jQuery-kirjasto jokaiselle sivulle, jolla jQuery-skriptiä käytetään. JavaScript tukee jokaista modernia selainta. JQuery-kirjasto on kuitenkin lisättävä selaimeen, jotta jQuery-skriptejä voidaan käsitellä. On kaksi tapaa lisätä jQuery verkkosivuilla.
- Lataa jQuery jQuery-säätiöstä ja lataa se www-palvelimellesi.
- linkki julkisesti isännöityyn jQuery-kirjastoon.
helpoin tapa lisätä jQuery verkkosivuille on linkittää jQuery-kirjastoon, jota jo ylläpidetään verkossa. Voit ladata Googlen isännöimän jQuery-kirjaston liittämällä seuraavan koodirivin sivustosi head – elementtiin.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script> 
