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

Trackbacks & Pingbacks

Comments are closed.