Skip to content

メニューにマウスオーバーするとメイン画像が切り替わるナビゲーションjQueryプラグイン「ImageNavigation」

by haruma on 2010.10.06

FLASHのナビゲーションでみる、メニューにマウスオーバーするとメイン画像が切り替わるやつ。探しても思ったようなものがなかったので、jQueryで作成してプラグイン化しました。

こんな動作をします

  • ナビゲーションにマウスオーバーすると対応するイメージ画像に切り替わります。
  • エリアの外にマウスがあるときは、自動で次のナビゲーションに進みます。
  • ロールオーバー前後でナビゲーションの画像が切り替わります。

動作デモはこちら

設置方法

プラグインを下のボタンよりダウンロードします(ダウンロードファイルにはサンプルファイルが含まれています)

ImageNavigationプラグインをダウンロード

このプラグインはjQueryが必要です。

head内

「#image-navigation」の部分はプラグインを適応させたい場所を任意で指定できます。

<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.imageNavigation.js"></script>
<script type="text/javascript>
$(function() {
$(#image-navigation).imageNavigation();
});
</script>

body内

メニューに表示する画像と対応するイメージ画像を記述します。

<div id="image-navigation">
  <div class="navi">
    <ul>
      <li><a href="#"><img src="images/menu.jpg" /></a></li>
      <li><a href="#"><img src="images/menu.jpg" /></a></li>
      <li><a href="#"><img src="images/menu.jpg" /></a></li>
      <li><a href="#"><img src="images/menu.jpg" /></a></li>
    </ul>
  </div>
  <div class="navi-image">
      <a href="#"><img src="images/photo1.jpg" /></a>
      <a href="#"><img src="images/photo2.jpg" /></a>
      <a href="#"><img src="images/photo3.jpg" /></a>
      <a href="#"><img src="images/photo4.jpg" /></a>
  </div>
  <div style="clear:both;"></div>
</div>

これで動作します。

オプション

オプションで色々な設定ができます。

(数字の単位はミリ秒です)

      $(function(){
        $("#image-navigation").imageNavigation({
          time:2000,
          animationTime:500,
          rolloverTime: 0,
          rolloutTime: 500
        });
      });

time
スライドショーで次の画像に移動する時間です。

animationTime
スライドショーで次の画像に切り替わるフェードの時間です。

rolloverTime
ナビゲーションのロールオーバーが完了する間の時間です。

rolloverTime
ナビゲーションのロールアウトが完了する間の時間です。

autoPlay
falseにすると自動切り替えしません。

rolloverImage
falseにすると画像ナビゲーションを使用しません。テキストでナビゲーションを表示したい場合に。

テキストのナビゲーションのデモはこちら

画像ナビゲーションのロールオーバーの際のファイル名について。
ロールオーバーの画像はファイル名に「_on」をつけた画像が使われまず。用意してください。
例えば「menu01.jpg」という画像のロールオーバー画像は「menu01_on.jpg」になります。

最後に

プラグインに不備があるかもしれませんが、分からない点や不具合などありましたらコメントください。

From → jQuery

54 Comments
  1. おお。素晴らしいですね。
    確かに、このライブラリありませんでしたね。

    機会があれば利用させて頂きます♪

  2. admin permalink

    ひでまんさん、ありがとうございます。

    そうなんです、同じようなライブラリがあるだろうとネット探していたんですが、結局なくて自作しました。
    日本だとありがちなインターフェイスなんですけどね。

  3. Mix permalink

    こんにちわ、このようなインタフェースを探していました。

    質問なのですが、スライド画像を、文字や画像を組み合わせたコンテンツを表示させたいのですが、可能でしょうか?

    リストメニューやタブメニューを探していたのですが、
    探している効果では無く、ImageNavigationが近いと思いました。

    よろしくお願いします。

  4. admin permalink

    Mixさん、
    スライド部分を画像と文字の組み合わせにすることは可能ですよ。
    ソースでスライド部分の画像をそのように置き換えてみてください。
    <a href=”#” ><div class=”panel”>スライド1</div></a>
    こんな感じでしょか。上のようにした場合、panelクラスに横幅と高さを指定するのをお忘れなく。

  5. norik permalink

    とってもいいですね!このプラグイン。

    早速使わせていただきます。

    切り替えるイメージを内包するブロックのクラス名が
    JS側に書いてありますが(10ヶ所くらい)、
    これもHTML側で指定できるとありがたいかもです。

    ご検討よろしくお願いいたします。

  6. guildsman permalink

    こんばんわ、とってもイイですね!
    是非使わせていただきたいと思うのですが、
    ワードプレスでも利用は可能でしょうか?

  7. admin permalink

    >norikさん
    ありがとございます。今後の更新に検討します。

    >guildsmanさん
    試していませんがワードプレスでもテンプレートに記述すれば動作するはずです。使ってみてください。ニーズがあればワードプレスのプラグイン化も考えます。

  8. lilith permalink

    こんにちは。

    ダウンロードさせていただきました。素晴らしいプラグインですね!

    ただ、著作権等について記述がありませんでしたので、質問させてください。

    個人利用のほかに商用利用する場合において、
    (1)商用利用は可能か、(2)その場合何か記述が必要か、(3)改変は可能か

    なお、前提として、販売(転売)目的ではなく、画像も流用しません。

    以上です。よろしくお願いします。

  9. admin permalink

    >lilithさん
    著作権について記述しないといけないと思っていて遅れていました。
    商用利用は可能です。
    ソースコードの著作者情報の記述を削除しなければ、画面上の記述は必要ありません。
    改変は可能です。改変したものの再配布は認めません。
    このような感じです。
    よろしくお願いします。

  10. 助かりましたありがとうございますー

  11. tko permalink

    必死で探してたんですがこういうの無くて。
    自作できるほど知識も無いので、あきらめかけてました。
    ものすごく助かりました☆

  12. rjkt permalink

    こんにちは。

    素晴らしいプラグインなので、早速ダウンロードさせて頂きました!

    一点質問なのですが、画像の切り替えで1から4に行ったところでまた1に

    戻るようですが、4でストップさせるといったことは可能でしょうか?

    よろしくお願いします。

  13. ccc permalink

    素晴らしいですね!質問ですが、最初の自動で動くナビゲーションをなくすにはどうすればいいのですか?

  14. admin permalink

    >rjktさん
    4でストップさせるにはソースの書き換えが必要です。
    var $active = $(‘.navi-image a.active’, option.elem);
    の次の行に
    if(!$active.next().length) return;
    の1行を加えると理想の動作をするのでないでしょうか。

  15. admin permalink

    >cccさん
    ありがとうございます。
    オートプレイをしないようにするには
    オプションで autoPlay に false を指定してください。

  16. ccc permalink

    ご回答ありがとうございます!できました!
    初心者みたいな質問で申し訳ないです。

    すみません、もう1つ質問です。

    右のメイン画像なんですがメニューにマウスオーバーにしないときは常にAという画像が表示されるようにできますか?
    最初はAという画像が表示されていて、メニューにカーソルを乗せると切り替わり
    メニューからカーソルを外すとAが表示されるような。

    もし可能なら教えて頂けないでしょうか?
    何度も申し訳ございません。

  17. ccc permalink

    度々すみません。このままで大丈夫だったのでご回答頂かなくてけっこうです。
    ありがとうございました。

  18. rjkt permalink

    ご回答頂きありがとうございます!
    var $active = $(‘.navi-image a.active’, option.elem);
    は何行目の部分でしょうか?53行目で間違いありませんか?
    また、度々の質問で申し訳ありませんが、1→2→3→4→1でストップさせることは可能なのでしょうか?

  19. admin permalink

    >rjktさん
    var $active = $(‘.navi-image a.active’, option.elem);
    は2行ありましたね。
    最初の9行目にあるほうです。
    10行目に
    if(!$active.next().length) return;
    を追加してみてください。

    1→2→3→4→1はソースの書き換えが必要で難しいですね。

  20. Katie permalink

    Firefoxのみ、同サイト内の他のページから戻ってくると、over時の画像が下にずれてしまいます。
    リロードすると直ります。
    他にも読み込んでいるjsを全部削除してみても同じでした。
    修正した方が良さそうな箇所がわかりましたら、ご教授いただけませんでしょうか。

  21. ccc permalink

    すみません、最初からフェードで浮かびあがることって可能でしょうか?
    例えば、そのページを開いた瞬間にぼんやり出てくるような。。。

  22. coko permalink

    はじめまして。このようなプラグインを探しました。
    早速使わせていただいています。
    質問なのですが、IEでは動作しないのでしょうか?
    firefoxやsafariなど他のブラウザでは問題なく動いているのですが
    IEだと動きませんでした。(IE8で確認)
    よろしくお願い致します。

  23. kana permalink

    とっても素敵な切替ですね。
    是非使わせていただきたいです。
    質問なのですが、イメージ画像(photo1.jpg)を横長に大きく使いたいので「MENU A(menu1.jpg)」「MENU B(menu2.jpg)」「MENU C(menu3.jpg)」「MENU D(menu4.jpg)」をメイン画像の下に横並びで配置したいのですが、教えていただけないでしょうか?
    宜しくお願い致します。

  24. dada permalink

    素晴らしいプラグインですね。早速使わせていただいています。
    ひとつ質問させていただきたいのですが、
    CCCさんも質問されていました、
    右のメイン画像なんですがメニューにマウスオーバーにしないときは常にAという画像が表示されるようにできますか?
    最初はAという画像が表示されていて、メニューにカーソルを乗せると切り替わり
    メニューからカーソルを外すとAが表示されるような。

    もし可能なら教えて頂けないでしょうか?
    よろしくお願いいたします。

  25. katsu permalink

    はじめまして、とても良いスクリプトに感動です。

    しかし、複数設置しようとしてもふたつめが動かない不具合がありました。

    今後の参考になればと投稿させていただきます。

  26. nana permalink

    素晴らしいプラグインです。ありがとうございます。
    以前より使わせていただいていますが、jQueryを1.6.1に
    アップグレードしたら動かなくなってしまいました。

    もし解決策をご存知でしたらご教授いただけないでしょうか?
    どうぞよろしくお願いします。

  27. otuma permalink

    お世話になります。
    素晴らしいプラグインです!FLASHでよく作成してたのですが
    Ipadで表示されないのが困ってまして。
    これだと表示されてうれしいです!

    一つ質問が。
    実際ボタンは4つですが2つにへらして表示しようかと思います。
    この場合はそのままナビとイメージを2つにすればよいのでしょうか?

    実際そのようにカスタマイズしてみたのですが、
    無事動いたものの、ページを表示させると2つ目の画像を
    最初読み込んでから1枚目の画像を表示してしまうのです。

    この場合の対策があればぜひ教えてください。

  28. himitu permalink

    Katieさん

    cssのボタンのaタグに
    position:relative;
    をいれれば解決しましたよ

  29. HAL permalink

    シンプルでいいプラグインです!探してました!
    …それで1つ質問があるのですが…。

    今現在製作中のウェブサイトに組み込んでテストし、組み込みはうまくできました。が、選択メニュー、表示画像共にマウスオーバーするとクリックできる状態で、実際にクリックすると、同ページのトップまでジャンプしてしまいます。これをマウスオーバーのみで、クリック出来ないようにすることは可能でしょうか?

  30. amesaku permalink

    初心者なのですが、教えてください。
    画像名や、画像の大きさを変えるにはどのようにすればいいのでしょうか?

  31. riontakashi permalink

    探していたトップページのナビゲーションにぴったりでした。早速利用させて頂きます。ありがとうございました。

  32. machi permalink

    素晴らしい & そして美しい。

    デモを見て、これは使わせて頂きたいと思いました。

    こういうプログラムが組める方って尊敬します。

  33. HJT permalink

    スクリプトをダウンロードさせて頂きました。
    質問なのですが、ボタンやメイン画像からマウスカーソルを外したときに最初の状態(デモではMENU A)へ戻す設定はできますか?

  34. 非常に興味深い、ありがとう

  35. plus permalink

    お世話になります。
    このようなサイト運営されているということ
    とても尊敬いたします。
    次回ぜひ使わせてください。
    ところで、オンクリックで画像が切り替わるという事は可能でしょか。

  36. akiran permalink

    探していたスクリプトが見つかりました。
    以外にこの動きをするものなく、是非、ご利用させていただきたく思います。
    当方、JQueryの知識がないので、あるものを組み込むことしかできないのですが
    ちなみにこのスクリプトに矢印画像をつけて、次の画像、前の画像に戻る機能をつけたいのですが、どのようにしたら宜しいでしょうか?
    もしよろしければお仕事として発注してもいいのですが、是非、ご連絡いただけますと助かります。それでは宜しくお願いいたします。

  37. 素晴らしいです!。
    まさに探していたスクリプトです。
    使わせていただきます。
    ありがとうございます。

  38. フラン permalink

    まさに探し求めていたスクリプトです!
    ネットの海をさまよい、諦め掛けていたときにこちらのを見つけて歓喜しております!

    しかも中もスッキリとしていて、とても素晴らしいスクリプトでした!
    早速ダウンロードさせて頂きました、ありがとうございます。

    ところで、1点質問させてください。

    大バナーと小バナーを左右入れ替えたい場合はどうすればよいでしょうか?
    レイアウト上、左右を入れ替えれたら嬉しいなぁと思いまして。

    CSS初心者のためあれやこれややりましたがどうにもうまくいかず、
    お忙しいかと思いますがご回答頂けましたら幸いです。

  39. はじめまして、イメージにピッタリのプラグイン、最高です(^^♪
    早速組み込ませて頂きました、ありがとうございます。

    複数ページを作成し、ajaxで読み込んでるのですが
    1ページ目以外は2度目の閲覧で動かなくなります。

    対処法があれば教えて下さい、よろしくお願いします。

  40. メニューにマウスオーバーするとメイン画像が切り替わるナビゲーションjQueryプラグイン「ImageNavigation」 http://blog.net-king.com/#post-132 このjQueryプラグインがそれに近いですね。このプラグインもそうですが、順次画像を切り替え表示して行くプログラムのことを「スライドショー」といって問題ないと私は思います。 「JAVA スライドショー」で検索するとJavaScriptではない別言語がヒットしてしまいますから、次からは「JavaScript スライドショー」で検索して下さい。

  41. SHIBA permalink

    まさに探し求めていたものです!
    とても使いやすく大感謝です!

  42. 初心者です。。 メニューにマウスオーバーするとメイン画像が切り替わるナビゲーションjQueryプラグイン「ImageNavigation」 http://blog.net-king.com/ 上記を参考にページに載せたいと考えています。 そこで、ページの構造上、サンプルでは左側にあるメニューを右側に配置したいのですが可能でしょうか。 無知なもので、試しにcssの一部を書き換えてみたりしてみましたが大きくレイアウトが崩れてしまい上手くいきません。 よろしくお願いします!

  43. green permalink

    はじめまして。このようなプラグインを探していて
    たどり着きました。

    便利で使いやすそうで、
    ぜひ使わせていただきたいと考えているものです。

    1点質問なのです。

    デモ通り右エリアに画像を4枚設定しているのですが、
    ページを読み込むときに一瞬4枚目が出てから1枚目に戻ります。
    この4枚目が読み込み時に一瞬でないようにすることはできますでしょうか。

    どうぞ、よろしくお願い致します。

  44. ひろ permalink

    こんにちわ。

    javascript初心者なのですが、どうしてもこのテンプレートを使ってみたく思いました。

    ですが、ftpでアップロードするとどうしてもエラーが起きてしまいます。

    javascriptやhtmlを理解できていないので、わからないのだと思います。

    どうやったら、ftpアップロード後画像を表示させることができるのでしょうか?

    ちなみに、

    のように設定しています。

  45. fucchi permalink

    素晴らしいプラグインを利用させております。
    質問ですがイメージ画像をクリックしたら、その中で動画を再生したいのですが、
    イメージとしてはamazingsliderのような感じで再生できると良いです。
    どなたか実際にimagenavigastionの中で動画を再生している方はいないでしょうか。

  46. 初心者です。。 メニューにマウスオーバーするとメイン画像が切り替わるナビゲーションjQueryプラグイン「ImageNavigation」 http://blog.net-king.com/ 上記を参考にページに載せたいと考えています。 そこで、ページの構造上、サンプルでは左側にあるメニューを右側に配置したいのですが可能でしょうか。 無知なもので、試しにcssの一部を書き換えてみたりしてみましたが大きくレイアウトが崩れてしまい上手くいきません。 よろしくお願いします!

  47. 初心者です。。 メニューにマウスオーバーするとメイン画像が切り替わるナビゲーションjQueryプラグイン「ImageNavigation」 http://blog.net-king.com/ 上記を参考にページに載せたいと考えています。 そこで、ページの構造上、サンプルでは左側にあるメニューを右側に配置したいのですが可能でしょうか。 無知なもので、試しにcssの一部を書き換えてみたりしてみましたが大きくレイアウトが崩れてしまい上手くいきません。 よろしくお願いします!

  48. 初心者です。。 メニューにマウスオーバーするとメイン画像が切り替わるナビゲーションjQueryプラグイン「ImageNavigation」 http://blog.net-king.com/ 上記を参考にページに載せたいと考えています。 そこで、ページの構造上、サンプルでは左側にあるメニューを右側に配置したいのですが可能でしょうか。 無知なもので、試しにcssの一部を書き換えてみたりしてみましたが大きくレイアウトが崩れてしまい上手くいきません。 よろしくお願いします!

  49. 初心者です。。 メニューにマウスオーバーするとメイン画像が切り替わるナビゲーションjQueryプラグイン「ImageNavigation」 http://blog.net-king.com/ 上記を参考にページに載せたいと考えています。 そこで、ページの構造上、サンプルでは左側にあるメニューを右側に配置したいのですが可能でしょうか。 無知なもので、試しにcssの一部を書き換えてみたりしてみましたが大きくレイアウトが崩れてしまい上手くいきません。 よろしくお願いします!

Trackbacks & Pingbacks

  1. Tweets that mention メニューにマウスオーバーするとメイン画像が切り替わるナビゲーションjQueryプラグイン「ImageNavigation」 | NET-KING -- Topsy.com
  2. メニューにマウスオーバーするとメイン画像が切り替わるナビゲーションjQueryプラグイン「ImageNavigation」 | NET-KING | とっても! ちゅどん(雑記帳)
  3. ITキヲスク | 2010年10/3~10/9の週間ブックマーク
  4. [jquery]おしゃれなイメージナビゲーションをご紹介 | whyデザインブログ
  5. links for 2010-10-14 | inD Labs

Comments are closed.