[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-rollover.html
■メニューにマウスオーバーするとメイン画像が切り替わるナビゲーションjQueryプラグイン「ImageNavigation」
http://blog.net-king.com/2010/10/06/%E3%83%A1%E3%83%8B%E3%83%A5%E3%83%BC%E3%81%AB%E3%83%9E%E3%82%A6%E3%82%B9%E3%82%AA%E3%83%BC%E3%83%90%E3%83%BC%E3%81%99%E3%82%8B%E3%81%A8%E3%83%A1%E3%82%A4%E3%83%B3%E7%94%BB%E5%83%8F%E3%81%8C%E5%88%87/

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

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

回答No.2

noname#187595 · ベストアンサー

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

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

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

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

回答No.3

noname#187595

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

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

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

お礼

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

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

回答No.1

ORUKA1951

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

お礼

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