以下のようなhtmlがあります。
--------------------------------------------------
<div style="background:url(bg00.jpg);" id="area01">あいうえお</div>
<a href="#">ボタン1</a>
<a href="#">ボタン2</a>
--------------------------------------------------
ボタン1にマウスオーバーすると、div#area01の背景画像がbg01.jpgに変わり
ボタン2にマウスオーバーすると、div#area01の背景画像がbg02.jpgに変わり
マウスアウトするとbg00.jpgに戻るような
jqueryのプラグイン、どこかにないでしょうか?
オプションで、切り替わる際のエフェクトが追加できれば尚うれしいです。
以上、皆さんの知恵をお貸しください!
jQuery の hover() と fadeIn() を使ってみました。
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js" type="text/javascript"></script> <style> IMG { height: 320px; position: absolute; left: 1em; } #i2, #i3 { display: none; } #area01 { height: 320px; position: relative; padding: 0.5em; margin-left: 1em; color: white; } </style> <script> var SPEED = 2000; $(function() { $("#b1").hover( function() { $("#i2").fadeIn(SPEED); }, function() { $("#i2").fadeOut(SPEED); } ); $("#b2").hover( function() { $("#i3").fadeIn(SPEED); }, function() { $("#i3").fadeOut(SPEED); } ); }); </script> <img src="http://cdn-ak.f.st-hatena.com/images/fotolife/a/a-kuma3/20120219/20120219201602.jpg" id="i1"> <img src="http://cdn-ak.f.st-hatena.com/images/fotolife/a/a-kuma3/20120108/20120108135349.jpg" id="i2"> <img src="http://cdn-ak.f.st-hatena.com/images/fotolife/a/a-kuma3/20110726/20110726133847.jpg" id="i3"> <div id="area01">おなか空いた</div> <p> <a href="#" id="b1">ボタン1</a> <a href="#" id="b2">ボタン2</a>
jsFiddle で動作確認したのが、↓です。
http://jsfiddle.net/a_kuma3/xK4uQ/
完璧です!!!
2012/03/24 11:10:16助かりました!
jqueryって面白いですね。
これを機に勉強してみようと思います。
ありがとうございました!
時間があったら、流し読みで構わないので、ドキュメントを読むと面白いですよ。
2012/03/24 11:32:58http://semooh.jp/jquery/
何となく、一番使ってる。でも、載ってない API も多い。
http://stacktrace.jp/jquery/api/
一番目のよりも、網羅性は高い。CORE だけじゃなくて、UI のドキュメントもある。
どっちも、ちょっと古いのが難。
http://api.jquery.com/
本家。当然ながら、一番信頼度がおけるけど、英語。
でも、サンプルコードを読むなら、英語でもあまり関係ない。