hover時の画像切替を簡単実装するJQuery

hover時の画像切り替えをdisplay:block; display:none;の切り替えで対応していませんか？

easyrollover.jsを使用するとcssへの記述要らずで画像切り替えが実装出来ちゃうんです！

jquery.easyrollover.jsのダウンロードはこちら

まずはファイルの読み込み

easyrolloverに必要なのはJQueryと「jquery.easyrollover.js」というファイルになります。

<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.easyrollover.js"></script>

↑こちらをhead内または</body>直前に記述しましょう。

hoverした時に切り替える画像を用意する

ここが大事なポイント！

用意した2枚の画像の名前は

hover前の画像名【sample.jpg】

hover後の画像名【sample_on.jpg】

というように

切り替え後として使用する画像の拡張子直前に「_on」を追加します。

画像を読み込ませる

HTMLには「切り替え前の画像のみ」を記述します。

<img src="images/sample.jpg" class="rollover" >

さらにimgタグの中にclass=”rollover”を追加します。

これだけでhoverした時の画像の切り替え設定完了です！

画像の命名規則を守る＆imgタグへクラスを追加するだけでOKなので

cssもスッキリさせることが出来て良いですね！

ぜひ、お試しあれ！

正しい効果測定は、正しい計測設定から！Googleアナリティクス設定項目チェックシート（無料）

Googleアナリティクスは、適切な初期設定を行って初めて、解析に役立つデータを計測できます。 正しい効果測定を行う上で、必要な設定項目のチェックシートをご用意しました。