w innym samouczku przyjrzeliśmy się, jak używać właściwości CSS background-image i selektora :hover do tworzenia interaktywnego obrazu, który zmieniał się, gdy użytkownik przesunął kursor myszy nad obrazem. W tym przykładzie zaczęliśmy od szarej ikony domu i przekształciliśmy ją w pomarańczową ikonę. 
w tym samouczku przyjrzymy się innemu sposobowi na osiągnięcie tego samego przy użyciu JavaScript.
kiedy należy używać CSS vs JavaScript
CSS jest językiem używanym do definiowania układu strony internetowej i tworzenia prostych animacji. JavaScript jest używany do dodawania interaktywności w oparciu o opinie i aktywność użytkowników witryny. Są miejsca, w których możliwości CSS i JavaScript nakładają się na siebie. To nakładanie się na siebie rodzi pytanie: którego należy użyć? Odpowiedź na to pytanie nie jest prosta i wyrażono wiele opinii na ten temat. Niektórzy mówią, że powinieneś używać CSS w praktycznie każdym przypadku i używać JavaScript tylko wtedy, gdy żadne inne narzędzie nie może wykonać zadania. Inne oferują zupełnie przeciwny argument, że JavaScript powinien całkowicie zastąpić CSS. W praktyce większość programistów po prostu używa języka, który jest im najbardziej znany, nawet jeśli nie jest to najlepszy wybór dla danego zadania. Nie będziemy brać udziału w debacie. Pozwolimy Ci zdecydować się na tę sprawę i zamiast tego skupimy się na pokazaniu, jak używać zarówno CSS, jak i JavaScript. Poprzedni samouczek już zademonstrował, jak wykonać to przejście za pomocą CSS. Możesz to zobaczyć tutaj. Reszta tego samouczka nauczy Cię, jak używać JavaScript do tego wspólnego zadania.
Kod stojący za transformacją
oto kod JavaScript i HTML użyty do utworzenia transformacji.
<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> weźmy te fragmenty kodu po kolei, abyśmy mogli zrozumieć, o co chodzi.
Element kotwicy
pierwsza linia kodu, którą widzimy, jest elementem kotwicy.
<a href="home_url" onmouseover="rollover('home')" onmouseout="rollout('home')" > ponieważ nasz przykład polega na połączeniu ikony domu ze stroną główną witryny, atrybut href wskazuje na stronę główną naszej witryny. Następnie pojawia się onmouseover Zdarzenie JavaScript. Jest to zdarzenie, które wystąpi, gdy mysz najedzie na element kotwicy. W tym przypadku wywoływana jest funkcja rollover, która wywołuje element o nazwie 'home’. Na koniec mamy Zdarzenie onmouseout, które wywołuje funkcję rollout, która po raz kolejny wpływa na element o nazwie 'home’.
Element obrazu
zagnieżdżony w elemencie kotwicy jest naszym elementem obrazu.
<img src="../path/original_image.file" name="home" alt="Home Page"> użyjemy elementu image do załadowania obrazu, który pojawi się, gdy mysz nie będzie najeżdżać na element anchor. W przypadku naszego przykładu, będziemy ładować szarą ikonę domu. Następnie pojawia się atrybut name. Używamy tego atrybutu, aby oddać JavaScript, aby zidentyfikować element HTML, który chcemy zmodyfikować za pomocą skryptu. Przyjrzyj się szybko elementowi kotwicy i zauważ, jak obie funkcje używają parametru ('home'). Atrybut name="home" to sposób, w jaki funkcje JavaScript identyfikują element obrazu jako element, który ma być użyty.
skrypt
wreszcie mamy bardzo krótki skrypt.
<script type="text/javascript"> <!-- setrollover("../path/hover_image.file"); --> </script> ten skrypt ustawia wartość dla funkcji rollover, która jest wywoływana przez funkcję onmouseover uruchamianą po najechaniu myszą na obrazek.
składając to wszystko razem
jeśli umieścimy kotwicę, obraz i skrypt razem oto, co otrzymamy.
Uprość Kod za pomocą jQuery
jQuery jest biblioteką JavaScript, która pozwala tworzyć prawie każdy rodzaj animacji JavaScript lub transformacji z mniejszą ilością kodu. Gdybyśmy chcieli użyć jQuery do utworzenia tej samej transformacji, oto jak wyglądałby kod.
<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> miłą rzeczą w użyciu jQuery jest to, że nie musimy już dodawać obsługi zdarzeń do samego HTML (pamiętasz zdarzenia onmouseover i onmouseout z oryginalnego kodu?). Jedną z najlepszych rzeczy w jQuery jest to, że może dynamicznie dodawać procedury obsługi zdarzeń. Pozwala to na większą separację między skryptem a treścią HTML i jest lepszym sposobem kodowania. Jak widać, HTML jest dużo czystszy, jeśli używamy biblioteki jQuery i końcowy wynik jest taki sam.
jQuery.(’#home’).hover (function () {$(this).attr („src”, ” home168-1.png’)}, function () {$(this).attr („src”, ” orange_home.png’ ) } );dodanie jQuery do strony internetowej
jedną rzeczą, o której należy pamiętać, jeśli zdecydujesz się użyć tego kodu na własnej stronie internetowej, jest to, że biblioteka jQuery musi być załadowana przez przeglądarkę na każdej stronie, na której używany jest skrypt jQuery. JavaScript jest obsługiwany przez każdą nowoczesną przeglądarkę. Jednak biblioteka jQuery musi zostać dodana do przeglądarki, aby Skrypty jQuery mogły przetwarzać. Istnieją dwa sposoby dodania jQuery do strony internetowej.
- Pobierz jQuery z jQuery Foundation i prześlij go na swój serwer WWW.
- Link do publicznie hostowanej biblioteki jQuery.
najprostszym sposobem na dodanie jQuery do witryny jest link do biblioteki jQuery już hostowanej w Internecie. Możesz załadować bibliotekę jQuery obsługiwaną przez Google, wklejając poniższy wiersz kodu do elementu headswojej witryny.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script> 
