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

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

使用方法
(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」サンプル

sponsors

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

記事作成:
記事URL:

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