jQueryによる画像切替動作のカスタマイズ方法

質問

こちら(http://blog.net-king.com/)でプラグインをダウンロードし、自分のWebページに設置させていただきました。

optionのところのautoPlayをfalse(自動切り替えしない)に変更し、
こちら(http://okwave.jp/qa/q7571450.html)の質問・回答を参考にさせて頂き、各ページごとに、最初に表示される画像を変更・表示することが出来ました。

今回質問させて頂きたいのは、
メニューからマウスポインタが外れた時・メニューにマウスオーバーをしていない状態の時に、常に1つの画像を表示する方法です。

メニュー1のページを開いた時に、最初からimg01が表示されている場合・・・
メニューボタンの2にマウスオーバーをするとimg02の画像に切り替わり、メニューボタンからマウスポインタが外れると、再度 img01に切り替わるようなイメージです。
このような動作をするよう、設定することは可能でしょうか。
出来れば元の画像に切り替わる際もフェード効果があると嬉しいです・・・

jQuery初心者により、詳しく記述していただけると幸いです。
お分かりになる方がいらっしゃいましたら、ご回答の程よろしくお願い致します。

回答No.1

fujillin · ベストアンサー

回答がないみたいなので…

もとのスクリプトを解析してカスタマイズすれば一番よいのでしょうけれど、それができないのなら、

「エリアからマウスがはずれた時に、表示しておきたいメニューにホバーのイベントを発生させる」
というスクリプトを別個付加えるという方法でもよさそうに思います。

イベントの発生方法はブラウザによって異なりますが、例えばfirefox系であれば、
　$("#image-navigation").mouseleave(function(){
　　var evt = document.createEvent("MouseEvents");
　　evt.initEvent("mouseover", false, true);
　　$("a", $("#image-navigation ul li").eq(2)).get(0).dispatchEvent(evt);
　});
みたいにすることで、とりあえずご質問のような動作になります。
（上例では、3番目のメニューが選択状態になる）

お礼

ご回答頂きありがとうございます。

思い通りの動作になりました！

jQueryはプラグインもたくさんありとても便利だと思うので、もとのスクリプトをカスタマイズできるよう、少しずつ勉強していきたいと思います。

ご丁寧に教えて頂き、本当にありがとうございました！！