[JS or CSS]マウスオーバーで画像切り替え

初めまして。

ホームページを作成中なのですが、
メインビジュアル部分の画像表示で悩んでおります。

求めている動作としては以下の通りです。
・グローバルナビにマウスオーバーすると、
　すぐ下のボックス（どこでも）に画像が表示される。
・マウスが離れると画像が消える。
・画像の表示（切り替え）はフェードで行う。


簡単なソースを書くとこんな感じです。
<ul class="global_navi">/* グローバルナビ */
　<li><a href="a.html"><img src="hoge01.png" /></a></li>
　<li><a href="b.html"><img src="hoge02.png" /></a></li>
　<li><a href="c.html"><img src="hoge03.png" /></a></li>
</ul>
<div class="main_graphic">
　/* ここに画像がフェードイン＆フェードアウトする */
</div>


近い動作をするjsを見つけたのですが、下記2点のjsを足して2で割った様なイメージです。
■画像のマウスオーバーで、離れた位置に拡大画像を表示する
http://css-eblog.com/csstechnique/css-remote-rol …
■メニューにマウスオーバーするとメイン画像が切り替わるナビゲーションjQueryプラグイン「ImageNavigation」
http://blog.net-king.com/2010/10/06/%E3%83%A1%E3 …

動作イメージでは前者ですが、フェードができません。
ビジュアルイメージでは後者ですが、マウスを離しても画像が消えません。


近い動作をするjs、もしくはcssテクニックをご存知であればご教授頂けないでしょうか。
お手数ですが、よろしくお願い申し上げます。

No.1 回答者： ORUKA1951 回答日時： 2013/02/23 10:51

スタイルシートで行うには

　⇒ナビゲーションリストを様々にデザインしてみよう。( http://www.ichiya.com/WebService/Howto/sample/HT … )
　で、表示メニューからスタイルシートを[縦並び][画像下]を選択した状態だと思います。
　これにCSS3のtransitionプロパティと、opacityプロパティを加えると良いでしょう。

この回答へのお礼

回答ありがとうございます！
CSS3は敬遠してたのですが、コレを機会に触ってみようと思います。

お礼日時：2013/02/23 18:52

No.2 ベストアンサー 回答者： wo_moon 回答日時： 2013/02/27 20:22

CSSでの対策はNo.1さんがお答え済みだったので、JSの場合。

http://tenderfeel.xsrv.jp/javascript/271/
こちらの下のほうにある
複数設置＋クロスフェード版
jQuery版
MooTools版
はフェード効果ありですね。

ライブラリの好みもあるでしょうから、お好きなものをどうぞ。

ところで、質問のサンプルコードでPNGを使っておいでですが、IEのバージョンによってはPNGにフェード効果をかけると黒っぽいジャギーが出る場合があります。
できればPNG以外の形式にしたほうがおすすめですよ。

No.3 回答者： wo_moon 回答日時： 2013/02/27 20:35

2です。

他にも発見したのでリンク先書いておきます。

「jQueryとCSSによるリモートロールオーバー（IE6対応）」
http://web.showjin.me/jquery_remoterollover.html

「サムネイルのマウスオーバーでメイン画像を切り替える」
http://mizuame.sakura.ne.jp/jquery.tgImageChange …

この回答へのお礼

まさしくコレです。本当に助かります！

pngの件も併せて、アドバイスありがとうございました。
以降の製作にて参考にさせて頂きます。

お礼日時：2013/02/27 21:02