今回はマウスオーバするとメインの画像が切り替わるjavascriptを紹介いたします。
FLASHなどではこのような動きをするものはあるのですが、jQueryではなかなかありそうでない動きですので、重宝するのではないかと思われます。
レスポンシブデザインのホームページにも使用可能です。
実装方法
step1:ファイルを公式サイトよりダウンロード
使用するファイルを公式サイトよりダウンロードします。
↓ダウンロード先URLを記載しておきます。
http://blog.net-king.com/downloads/imagenavigation/imagenavigation1.0.zip
step2:head内に以下のように記述
[html]
<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>
[/html]
オプション値によって様々な設定ができるようです。公式サイトの転載ですが、こちらにも記載しております。
step3:表示させたい箇所に以下のよう記述
[html]
<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>
[/html]
オプション値
▼time
スライドショーで次の画像に移動する時間です。
▼animationTime
スライドショーで次の画像に切り替わるフェードの時間です。
▼rolloverTime
ナビゲーションのロールオーバーが完了する間の時間です。
▼rolloverTime
ナビゲーションのロールアウトが完了する間の時間です。
▼autoPlay
falseにすると自動切り替えしません。
▼rolloverImage
falseにすると画像ナビゲーションを使用しません。テキストでナビゲーションを表示したい場合に。
参考
オプション値は以下のように使用します。
[javascript]
$(function(){
$("#image-navigation").imageNavigation({
time:2000,
animationTime:500,
rolloverTime: 0,
rolloutTime: 500
});
});
[/javascript]
とても素晴らしい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/