JavaScriptでサムネ画像をマウスオーバーしてメイン画像の切り替え

JavaScriptでサムネ画像をマウスオーバーしてメイン画像の切り替え

1576 回閲覧されました

みなさんこんにちは、WEB制作のエンジニアのjonioです。

今回はサムネイル画像をマウスオーバーした時にメインの画像が切り替わるのをJavaScriptで実装する方法を解説します。

コードが短いので理解するのは難しくないと思うので理解しましょう。

それでは説明します。

 

 

デモページ

デモページはここから見る事ができます。

 

 

実装内容の仕様

最初の状態が↓です。

最初はサムネイル画像の左下がメイン画像として表示されています。

サムネイル画像をマウスオーバーするとそれがメイン画像に切り替わりますがマウスオーバーを外すと一番最初のメイン画像に戻ります。

 

 

コードの解説

今回「カスタムデータ属性」というのを使うのですが「サムネイル画像をクリックした時にメイン画像の切り替え」で解説しているので↓を読んでからの方が理解しやすいと思います。

 

 

HTMLとCSS

HTMLとCSSのコードを↓にします。

今回の内容はサイトを作る際に実装するのを想定して解説しています。

サイトを作る時に必ずreset.cssを入れるので私が普段使う内容を記載しています。

私と同じ内容でなくてもいいので必ずreset.cssを入れてください。

HTMLとCSSを書いた時点で↓の表示になります。

画像をマウスオーバーした時に画像が切り替わるのをJavaScriptで実装します。

まず全てのサムネ画像のid属性を取得します。

JavaScriptのコードを↓にします。

「querySelectorAll」を使っているので全てのサムネ画像のid属性を取得して配列にしています。

次に配列の中の全てのサムネ画像に対して動作できる様にするためにコードを↓にします。

5行目の「img」はサムネ画像の事で「index」はサムネ画像のインデックス番号です。

次はサムネ画像をマウスオーバーしたらメインの画像がマウスオーバーした画像に切り替わる様にするためにJavaScriptのコードを↓にします。

7行目でメイン画像のid属性を取得しています。

9行目〜11行目はマウスオーバーしたサムネ画像のカスタムデータ属性の画像のを使ってメイン画像の画像のパスを切り替えています。

カスタムデータ属性の使い方は↓で説明しているのでそれを読んでください。

これでサムネ画像をマウスオーバーした時にメイン画像を切り替えるのはできたのですが最後にサムネ画像のマウスオーバーを外した時にメイン画像が最初の状態に戻るのを実装します。

JavaScriptのコードを↓にします。

14行目の「=」の右側ですがサムネ画像のマウスオーバーを外したらメイン画像のパスを元々表示していたパスにすればいいのでこうしています。

これで完成です。