JQueryの基本！JQueryを使ってマウスオーバーで画像を切り替える!!
プログラミング
マウスオーバーで画像を切替えるときは、どのように切り替えていますか？
CSSで切り替えるよりも、とっても簡単なJQueryをご紹介します♪
どうも、ぶっちです。
JQueryのマウスオーバーで画像を変える
１.まず下記を<head>記述します。
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
上記が基本コードとなります。
基本コードの間に下記を加えて下さい。
【JQueryコード】
$(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コード】
<a href="#">
<img src="ここにデフォルト画像URL_off.jpg" alt="hoge">
</a>
Htmlコードはこれだけです。
内にJqueryのコードを書いてしまえば、あとは画像を載せたい箇所に、その都度上記htmlを書くだけで済みます。
※注意※
画像をマウスオーバーで動かすためには、2枚の画像が必要です。
用意頂いた画像には、ファイル名のあとに_offと_onをつけて下さい。
まとめ
如何でしたか？とっても簡単じゃないですか！！
最近は、このJQueryに頼りっぱなしですｗ
是非、皆さんも使ってみて下さい(^O^)／
この記事をシェアする
