中途半端を極める

web関連で役に立ちそうなものを紹介いたします

javascript

【javascript】レスポンシブデザインにも使用できる!マウスオーバーするとメインの画像が切り替わるjQuery「ImageNavigation」

投稿日:

今回はマウスオーバするとメインの画像が切り替わるjavascriptを紹介いたします。
FLASHなどではこのような動きをするものはあるのですが、jQueryではなかなかありそうでない動きですので、重宝するのではないかと思われます。

レスポンシブデザインのホームページにも使用可能です。

実装方法

step1:ファイルを公式サイトよりダウンロード

使用するファイルを公式サイトよりダウンロードします。
↓ダウンロード先URLを記載しておきます。
http://blog.net-king.com/downloads/imagenavigation/imagenavigation1.0.zip

step2:head内に以下のように記述

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

オプション値によって様々な設定ができるようです。公式サイトの転載ですが、こちらにも記載しております。

step3:表示させたい箇所に以下のよう記述

<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>

オプション値

▼time
スライドショーで次の画像に移動する時間です。
▼animationTime
スライドショーで次の画像に切り替わるフェードの時間です。
▼rolloverTime
ナビゲーションのロールオーバーが完了する間の時間です。
▼rolloverTime
ナビゲーションのロールアウトが完了する間の時間です。
▼autoPlay
falseにすると自動切り替えしません。
▼rolloverImage
falseにすると画像ナビゲーションを使用しません。テキストでナビゲーションを表示したい場合に。

参考

オプション値は以下のように使用します。

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

とても素晴らしいjavascriptです。
公式サイト
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/

-javascript

執筆者:


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)

関連記事

ヘッダ固定時のページ内リンクのずれを解消する方法

position:fixedを使ってヘッダを固定した場合、ページ内リンクの位置がヘッダの高さ分ずれてしまいます。どのように調整すればいいか紹介いたします。

[javascript]exvalidation.jsが動作しない時必見!代わりとなるjavascriptを紹介

jqueryのバージョンによってはexvalidation.jsが動作しない場合があります。 ※特に新しいバージョンのjqueryを使用しているときに動作しなくなった方が多いのではないでしょうか? 動 …

【javascript】西暦を自動的に更新されるようにjavascriptで表示する

今回は西暦を自動的に更新されるようにできるjavascriptをメモしておきます。 ・現在の西暦を自動的に取得する方法。 ・最終更新日の西暦を取得する方法。 2パターンあります。 コピーライトの部分と …

【javascript】SWFObjectで配置したFlash下に、ドロップダウンメニューが隠れてしまう

jquery.droppy.jsなどのドロップダウンメニュー(プルダウンメニュー)の下にFlashを配置すると、プルダウンメニューがFlashの裏側に表示されてしまう。CSSでFlashコンテンツにz …

[javascript]レスポンシブデザインのWEBに使用できる!現在のウィンドウサイズの取得と判定をして処理を変更する方法

レスポンシブ対応のときウィンドウ幅でjavascriptの動きを変更したいと思ったことはないでしょうか。今回jQueryを用いてウィンドウ幅に合わせて処理を変更する方法を見つけましたので紹介いたします …