マイティーBlog|リスティング広告やWEBマーケティング情報

トップページ ブログ > デザイン > hover時の画像切替を簡単実装するJQuery

Mighty Ace Blog

マイティーBlog

デザイン

2021.08.18

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アナリティクス設定項目チェックシート(無料)

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

Googleアナリティクス,アクセス解析でWeb集客分析・改善なら福岡のマイティーエース

リスティング・Googleアナリティクス・ホームページ・ランディングページなど
Webマーケティングのことなら何でもご相談ください

株式会社マイティーエースでは、様々なWeb広告・Webマーケティングなど
お客様に合ったご提案しています。
興味をお持ちいただけた方は、まずは気軽にご相談ください。

あわせて読みたい人気の記事

よく見られている記事

最新記事

BLOG MENU

株式会社マイティーエースのSNSもチェックしてみてください

Copyright (c)2014-2020 MightyAce, inc. All Right Reserved.