v dalším tutoriálu jsme se podívali na to, jak používat vlastnost CSS background-image a selektor :hover k vytvoření interaktivního obrazu, který se změnil, když uživatel přesunul myš nad obrázek. V tomto příkladu jsme začali šedou ikonou domů a přeměnili jsme ji na oranžovou ikonu. 
v tomto tutoriálu se podíváme na jiný způsob, jak dosáhnout stejné věci pomocí JavaScriptu.
kdy byste měli použít CSS vs JavaScript
CSS je jazyk používaný k definování rozvržení webových stránek a vytváření jednoduchých animací. JavaScript se používá k přidání interaktivity na základě zpětné vazby a aktivity uživatelů webových stránek. Existují místa, kde se překrývají možnosti CSS a JavaScriptu. Toto překrytí vyvolává otázku: co byste měli použít? Odpověď na tuto otázku není jednoduchá, a na toto téma bylo vyjádřeno mnoho názorů. Někteří říkají, že byste měli používat CSS prakticky v každém případě a JavaScript používat pouze tehdy, když žádný jiný nástroj nemůže tuto práci provést. Jiní nabízejí zcela opačný argument, že JavaScript by měl zcela nahradit CSS. V praxi většina vývojářů Jednoduše používá jazyk, se kterým jsou nejvíce obeznámeni, i když to není nejlepší volba pro daný úkol. Nebudeme se zabývat debatou. Necháme vás, abyste se v této věci rozhodli sami a místo toho se zaměříme na to, abyste vám ukázali, jak používat CSS i JavaScript. Předchozí tutoriál již ukázal, jak provést tento přechod pomocí CSS. Můžete to vidět zde. Zbytek tohoto tutoriálu vás naučí, jak používat JavaScript pro tento společný úkol.
kód za transformací
zde je kód JavaScript a HTML použitý k vytvoření transformace.
<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> vezměme ty kousky kódu jeden po druhém, abychom pochopili, co se děje.
kotevní prvek
první řádek kódu, který vidíme, je kotevní prvek.
<a href="home_url" onmouseover="rollover('home')" onmouseout="rollout('home')" > protože náš příklad zahrnuje propojení ikony domů s domovskou stránkou webu, atribut href by ukazoval na domovskou stránku našich webových stránek. Následuje událost onmouseover JavaScript. Toto je událost, ke které dojde, když se myš vznáší nad kotevním prvkem. V tomto případě je volána funkce s názvem rollover a ovlivňuje položku s názvem ‚home‘. Nakonec máme událost onmouseout, která volá funkci rollout, která opět ovlivňuje položku s názvem „domů“.
obrazový prvek
vnořený do kotevního prvku je náš obrazový prvek.
<img src="../path/original_image.file" name="home" alt="Home Page"> použijeme prvek obrázku k načtení obrázku, který se objeví, když myš není vznášející se nad kotevním prvkem. V případě našeho příkladu načteme šedou ikonu domu. Dále přichází atribut name. Tento atribut používáme k tomu, abychom dali JavaScript pryč k identifikaci prvku HTML, který chceme pomocí skriptu upravit. Podívejte se rychle zpět na kotevní prvek a všimněte si, jak obě funkce používají parametr ('home'). Atribut name="home" je způsob, jakým funkce JavaScriptu identifikují prvek obrázku jako položku, na kterou se má jednat.
skript
nakonec máme velmi krátký skript.
<script type="text/javascript"> <!-- setrollover("../path/hover_image.file"); --> </script> tento skript nastavuje hodnotu pro funkci rollover, která je volána onmouseover spuštěnou, když se myš diváka vznáší nad obrazem.
dát to všechno dohromady
pokud dáme kotvu, obrázek a skript dohromady, dostaneme to.
Zjednodušte kód pomocí jQuery
jQuery je knihovna JavaScriptu, která vám umožní vytvořit téměř jakýkoli druh animace nebo transformace JavaScriptu s menším kódem. Pokud bychom chtěli použít jQuery k vytvoření stejné transformace, takto by kód vypadal.
<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> pěkná věc na používání jQuery je, že již nemusíme přidávat popisovače událostí do samotného HTML (pamatujte na události onmouseover a onmouseout z původního kódu?). Jednou z nejlepších věcí na jQuery je to, že může dynamicky přidávat manipulátory událostí. To umožňuje větší oddělení skriptu od obsahu HTML a je to lepší způsob kódování. Jak vidíte, HTML je mnohem čistší, pokud použijeme knihovnu jQuery a konečný výsledek je stejný.
jQuery.(‚#home‘).hover (funkce () {$(Toto).attr (‚src‘, ‚ home168-1.png‘)}, funkce () {$(Toto).attr (‚src‘, ‚ orange_home.png‘ ) } );přidání jQuery na web
jedna věc, kterou je třeba mít na paměti, pokud se rozhodnete použít tento kód na svém vlastním webu, je, že knihovna jQuery musí být načtena prohlížečem na každé stránce, kde se používá skript jQuery. JavaScript je podporován každým moderním prohlížečem. Knihovna jQuery však musí být přidána do prohlížeče, aby skripty jQuery mohly zpracovávat. Existují dva způsoby, jak přidat jQuery na web.
- Stáhněte si jQuery z nadace jQuery a nahrajte jej na svůj webový server.
- odkaz na veřejně hostovanou knihovnu jQuery.
nejjednodušší způsob, jak přidat jQuery na web, je odkaz na knihovnu jQuery již hostovanou na webu. Knihovnu jQuery hostovanou společností Google můžete načíst vložením následujícího řádku kódu do prvku head vašeho webu.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script> 
