別のチュートリアルでは、CSSbackground-imageプロパティと:hoverセレクタを使用して、ユーザーが画像の上にマウスを移動したときに変更された対話型画像を作成する方法を見ました。 この例では、灰色のホームアイコンから始めて、オレンジ色のアイコンに変換しました。 
このチュートリアルでは、JavaScriptを使用して同じことを達成する別の方法を見ていきます。
CSSとJavaScriptを使用する必要がある場合
CSSは、ウェブサイトのレイアウトを定義し、簡単なアニメーションを作成するために使用される言語です。 JavaScriptは、ウェブサイトのユーザーからのフィードバックや活動に基づいて対話性を追加するために使用されます。 CSSとJavaScriptの機能が重複する場所があります。 この重複は疑問を提起します：あなたはどちらを使うべきですか？ その質問に対する答えは単純なものではなく、多くの意見がこのトピックで表明されています。 ほとんどすべての場合にCSSを使用し、他のツールが仕事をすることができない場合にのみJavaScriptを使用するべきだと言う人もいます。 他の人は、JavaScriptがCSSを完全に置き換えるべきであるという完全に反対の議論を提供しています。 実際には、ほとんどの開発者は、手元のタスクに最適な選択ではない場合でも、最も精通している言語を使用するだけです。 私たちは議論に重きを置くつもりはありません。 私たちは、あなたが問題にあなた自身の心を構成し、代わりにCSSとJavaScriptの両方を使用する方法を示すことに焦点を当てるようにするつもりです。 前のチュートリアルでは、すでにCSSを使用してこの移行を達成する方法を示しました。 あなたはここでそれを見ることができます。 このチュートリアルの残りの部分では、この一般的なタスクにJavaScriptを使用する方法を説明します。
変換の背後にあるコード
ここでは、変換を作成するために使用されるJavaScriptとHTMLコードです。
<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> 何が起こっているのかを理解できるように、それらのコードを一度に一つずつ取ってみましょう。
アンカー要素
私たちが見るコードの最初の行はアンカー要素です。
<a href="home_url" onmouseover="rollover('home')" onmouseout="rollout('home')" > この例では、ホームアイコンをwebサイトのホームページにリンクする必要があるため、href属性はwebサイトのホームページを指します。 次はonmouseoverJavaScriptイベントです。 これは、マウスがアンカー要素の上に置かれたときに発生するイベントです。 この場合、rolloverという名前の関数が呼び出され、’home’という名前のアイテムに影響を与えます。 最後に、rollout関数を呼び出すonmouseoutイベントがあり、これは再び’home’という名前のアイテムに影響します。
アンカー要素内にネストされたImage要素
はimage要素です。
<img src="../path/original_image.file" name="home" alt="Home Page"> image要素を使用して、マウスがアンカー要素の上にマウスを置いていないときに表示される画像をロードします。 この例の場合、灰色の家のアイコンをロードします。 次はname属性です。 この属性を使用して、スクリプトで変更したいHTML要素を識別するためにJavaScriptを離れて与えます。 Anchor要素を簡単に振り返って、両方の関数がパラメータ('home')をどのように使用しているかに注目してください。 属性name="home"は、JavaScript関数がimage要素を操作するアイテムとして識別する方法です。
スクリプト
最後に、私たちは非常に短いスクリプトを持っています。
<script type="text/javascript"> <!-- setrollover("../path/hover_image.file"); --> </script> このスクリプトは、視聴者のマウスが画像の上に置かれたときにトリガーされるonmouseoverによって呼び出されるrollover関数の値を設定します。
それをすべて一緒に置く
アンカー、画像、スクリプトをすべて一緒に置くと、ここで得られるものがあります。
jQueryでコードを簡素化
jQueryは、より少ないコードでJavaScriptアニメーションや変換のちょうど約あらゆる並べ替えを作成することができますJavaScriptラ 同じ変換を作成するためにjQueryを使用したい場合は、コードがどのように見えるかを次に示します。
<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> jQueryを使用することの良い点は、HTML自体にイベントハンドラーを追加する必要がないことです（元のコードのonmouseoverおよびonmouseoutイベントを覚えていますか？). JQueryについての最も良いことの1つは、イベントハンドラを動的に追加できることです。 これにより、スクリプトとHTMLコンテンツをより明確に分離することができ、より良いコーディング方法になります。 ご覧のとおり、jQueryライブラリを使用し、最終結果が同じであれば、HTMLは非常にきれいです。
WebサイトにjQueryを追加する
自分のwebサイトでこのコードを使用することにした場合に留意すべきことの1つは、jQueryスクリプトが使用されるすべてのペー JavaScriptは、すべての近代的なブラウザでサポートされています。 ただし、jQueryスクリプトを処理するには、jQueryライブラリをブラウザに追加する必要があります。 WebサイトにjQueryを追加するには2つの方法があります。
- jQuery FoundationからjQueryをダウンロードし、webサーバーにアップロードします。
- 公にホストされているjQueryライブラリへのリンク。
ウェブサイトにjQueryを追加する最も簡単な方法は、すでにウェブ上でホストされているjQueryライブラリにリンクすることです。 次のコード行をwebサイトのhead要素に貼り付けることで、GoogleがホストするjQueryライブラリをロードできます。
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script> 
