マウスオーバーで画像を切替えるときは、どのように切り替えていますか？
CSSで切り替えるよりも、とっても簡単なJQueryをご紹介します♪
どうも、ぶっちです。
JQueryのマウスオーバーで画像を変える
１.まず下記を<head>記述します。
|
1 |
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script> |
上記が基本コードとなります。
基本コードの間に下記を加えて下さい。
【JQueryコード】
|
1 2 3 4 5 6 7 8 9 |
$(function(){ $('a img').hover(function(){ $(this).attr('src', $(this).attr('src').replace('_off', '_on')); }, function(){ if (!$(this).hasClass('currentPage')) { $(this).attr('src', $(this).attr('src').replace('_on', '_off')); } }); }); |
２.次にhtmlコード
【HTMLコード】
|
1 2 3 |
<a href="#"> <img src="ここにデフォルト画像URL_off.jpg" alt="hoge"> </a> |
Htmlコードはこれだけです。
内にJqueryのコードを書いてしまえば、あとは画像を載せたい箇所に、その都度上記htmlを書くだけで済みます。
※注意※
画像をマウスオーバーで動かすためには、2枚の画像が必要です。
用意頂いた画像には、ファイル名のあとに_offと_onをつけて下さい。
まとめ
如何でしたか？とっても簡単じゃないですか！！
最近は、このJQueryに頼りっぱなしですｗ
是非、皆さんも使ってみて下さい(^O^)／
この記事を書いた人
岩渕 裕プロデューサー
筋トレ、ランニング、料理、ザイグル（家焼き肉）、サイクリング、動画制作が趣味です。健康第一。
WEB制作
ランキング
制作実績
