skuare.netはJavaScriptライブラリのjQuery,mootools,prototypeのプラグインを中心にWebサイト構築に関する技術を試す個人サイトです

アップ画像のどこを見ているかを表示するJavaScript「ImgNavigator」

｜ ｜ ｜ ｜ ｜ ｜ ｜

(mb)ImgNavigator 1.0大きな画像を表示したいし、その画像のどこを見ているか表示させたいという、あなたにお勧めです。
地図とか、商品画像に使用すると便利かもしれません。

使用方法
(mb)ImgNavigator 1.0からファイル一式をダウロードします。
<link href="/test/css/mbImgNav.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="jquery-1.3.js"></script>
<script type="text/javascript" src="ui.core.min.js"></script>
<script type="text/javascript" src="ui.draggable.min.js"></script>
<script type="text/javascript" src="mbImgNav.min.js"></script>
<script type="text/javascript">
$(function(){
$("#navArea").imageNavigator(
{
areaWidth: 700,
areaHeight:500,
draggerStyle:"1px dotted red",　//表示している部分の囲み
navOpacity:.8
})
})
</script>

あとは上記で指定したidに以下のように記述すれば完成です。
<div id="navArea">
<div imageUrl="画像パス" navPosition="BR" navWidth="100" style="display:none;" class="imagesContainer">
<span class="title">ナビゲーション</span>
<div class="description"><STRONG>説明</STRONG></div>
</div>
</div>
navPosition="BR"には、ナビの表示位置を入れてください。
BRはbottom、rightの意味です。
<アップ画像のどこを見ているかを表示するJavaScript「ImgNavigator」サンプル

記事作成：2009年01月26日

前の記事：コンテンツをスライド表示させるJavaScript「Slide box」
次の記事：jQueryでカレンダーを表示するプラグイン「jMonthCalendar」