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

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

sponsors

使用方法

(mb)ImgNavigator 1.0からファイル一式をダウロードします。

<link href="/test/css/mbImgNav.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="/test/js/jquery-1.3.js"></script>
<script type="text/javascript" src="/test/js/ui.core.min.js"></script>
<script type="text/javascript" src="/test/js/ui.draggable.min.js"></script>
<script type="text/javascript" src="/test/js/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の意味です。

sponsors

サンプル

Javascriptサンプルページ一覧
skuare.net