Google
WWWを検索
サイト内を検索
ランキングナビ

画像にポインターを表示

このエントリーをはてなブックマークに追加 Check Clip to Evernote

地図を表示して、どこに何があるか示すときに地図上に目印をつけておくのは、基本的な表現方法です。しかし、これをサーバー・サイドの技術で実現しようとすると、複数の目印を切り替えて表わすたびにページのリロードが必要になります。そうするとサーバー負荷の高まりますし、何よりリロードが待たされるのが、ページ閲覧者にはちょっと苦痛でしょう。

そこで地図にポインターをつける JavaApplet を作成しました。HTML 内の JavaScript から制御させることができます。

Java Virtual Machine がインストールされていません。http://java.com/ja/ から Java Plug-in をダウンロードして、インストールしてください。
  1. キャップ
  2. エプロン
  3. スカート
【クリア】

設置

このメニューを、貴方のページに設置したいというかたは、ImageCursor.jar をダウンロードして、貴方のページにアップロードしてください。

次に ImageCursor.jar があるディレクトリーに以下のようなタグが含まれる html を書きましょう。

変数 Image で画像ファイル名を指定します。建物名から地図上の位置を示すときなどには、変数 Function を省略しましょう。マウス・クリックに反応しなくなります。マウス・ダウンで座標軸が移動すると困るときは、Tracking を false にするか省略すれば、座標軸は動きません。

設置例#1

<DIV Style="float:left; border:1px solid #000000; width:300px; height:220px; margin:0px 8px 0px 4px; padding:0px 0px 0px 0px; background:#FFFFFF; text-align:left;">
<DIV Style="float:left; margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px; width: 150px; height:220px;">
<!-- Appletタグを設置する。MAYSCRIPT を忘れずに。 -->
<applet Name="ICApplet" code="ImageCursor" archive="ImageCursor.jar" width="150" height="220" MAYSCRIPT>
<!-- 画像ファイル名を設定 -->
<param name="Image" value="K050023m.jpg">
<!-- マウスカーソルをトラッキングするか設定(true/false) -->
<param name="Tracking" value="true">
<!-- コールバック関数名を指定。省略時はコールバックされない -->
<param name="Function" value="callback">
Java Virtual Machine がインストールされていません。<A Href="http://java.com/ja/">http://java.com/ja/</A> から Java Plug-in をダウンロードして、インストールしてください。
</applet>
</DIV>
<DIV Style="margin:0px 0px 0px 150px; padding:0px 0px 0px 0px;">
<!-- document.[Appletタグ名].set(x,y);を呼ぶと(x,y)に座標が移る-->
<OL>
<LI><A Href="javascript:document.ICApplet.set(84,8);">キャップ</A></LI>
<LI><A Href="javascript:document.ICApplet.set(59,63);">エプロン</A></LI>
<LI><A Href="javascript:document.ICApplet.set(78,133);">スカート</A></LI>
</OL>
<DIV Style="text-align:center;">
<!-- document.[Appletタグ名].clear() を指定すると座標が表示されなくなる -->
<A Href="javascript:document.ICApplet.clear();">【クリア】</A></LI>
</DIV>
</DIV>
</DIV>

設置例#2 - 画像ファイルが大きな場合

Java Virtual Machine がインストールされていません。http://java.com/ja/ から Java Plug-in をダウンロードして、インストールしてください。
  1. 吉祥寺駅
  2. 天下寿司
  3. 牛鉄
  4. 大戸屋
  5. 伊勢屋
  6. 丸井

実際に地図を使っての設置例です。Applet サイズより、地図の画像ファイルのサイズが大きい場合は、一部分だけが表示されます。

Applet の端(外延からアップレットサイズの1/8の領域)にマウスが入ると、上下左右にスクロールしていきます。また、JavaScript で座標が指定されると、なるべく座標軸を中心にするように、表示位置を修正します。

なお、サンプルの地図は天下寿司様からお借りしました。

設置例#2

<DIV Style="float:left; border:1px solid #000000; width:300px; height:150px; margin:8px 8px 0px 4px; padding:0px 0px 0px 0px; background:#FFFFFF; text-align:left;">
<DIV Style="float:left; margin:0px 0px 0px 0px; padding:0px 0px 0px 0px; width: 180px; height:150px;">
<!-- Appletタグを設置する。MAYSCRIPT を忘れずに。 -->
<applet Name="Map" code="ImageCursor" archive="ImageCursor.jar" width="150" height="150" MAYSCRIPT>
<!-- 画像ファイル名を設定 -->
<param name="Image" value="map03.gif">
<!-- マウスカーソルをトラッキングするか設定(true/false) -->
<param name="Tracking" value="false">
Java Virtual Machine がインストールされていません。<A Href="http://java.com/ja/">http://java.com/ja/</A> から Java Plug-in をダウンロードして、インストールしてください。
</applet>
</DIV>
<OL Style="margin:0px 0px 0px 0px; padding:16px 0px 0px 16px;">
<LI><A Href="javascript:document.Map.set(234,178);">吉祥寺駅</A></LI>
<LI><A Href="javascript:document.Map.set(192,196);">天下寿司</A></LI>
<LI><A Href="javascript:document.Map.set(99,70);">牛鉄</A></LI>
<LI><A Href="javascript:document.Map.set(175,166);">大戸屋</A></LI>
<LI><A Href="javascript:document.Map.set(145,232);">伊勢屋</A></LI>
<LI><A Href="javascript:document.Map.set(214,255);">丸井</A></LI>
</OL>
</DIV>

設置例#3 - マーカー(目印)をセットする場合

Java Virtual Machine がインストールされていません。http://java.com/ja/ から Java Plug-in をダウンロードして、インストールしてください。
  1. 吉祥寺駅
  2. 天下寿司
  3. 牛鉄
  4. 大戸屋
  5. 伊勢屋
  6. 丸井

地図上のマーカー(マーカー)をクリックして、JavaScript でイベントを起こしたいケースのために、マーカー機能があります。

下記の設置例のように、MarkerImage、MarkerX、MarkerY、MarkerFunction の各パラメーターを設定すると、地図中にマーカーを設置できます。

クリックすると MarkerFunction で指定した JavaScript 関数を呼び出すので、そこでイベントを記述してください。典型的には、その地点にある店舗などのページに飛ぶことが多いでしょう。

なおマーカーに使った数字の画像はアイコン無料! WEB素材屋さんからお借りしました。

設置例#3

<DIV Style="float:left; border:1px solid #000000; width:300px; height:150px; margin:8px 8px 0px 4px; padding:0px 0px 0px 0px; background:#FFFFFF; text-align:left;">
<DIV Style="float:left; margin:0px 0px 0px 0px; padding:0px 0px 0px 0px; width: 180px; height:150px;">
<!-- マーカーをクリックしたときの為のコールバック関数を用意する -->
<SCRIPT Language="JavaScript">
<!--
// コールバック関数は座標 x y を引数に取る
function marker(n){
if(n==0)
alert("[1]東急がクリックされました。");
else if(n==1)
alert("[2]パルコがクリックされました。");
}
//-->
</SCRIPT>
<!-- Appletタグを設置する。MAYSCRIPT を忘れずに。 -->
<applet Name="Map" code="ImageCursor" archive="ImageCursor.jar" width="150" height="150" MAYSCRIPT>
<!-- 画像ファイル名を設定 -->
<param name="Image" value="map03.gif">
<!-- マウスカーソルをトラッキングするか設定(true/false) -->
<param name="Tracking" value="false">
<!-- スクロール速度を調整 -->
<param name="Speed" value="16">
<!-- マーカーの画像ファイルを指定 -->
<param name="MarkerImage" value="mkimg/009-001.gif,mkimg/009-002.gif">
<!-- マーカーのX座標を指定 -->
<param name="MarkerX" value="137,174">
<!-- マーカーのY座標を指定 -->
<param name="MarkerY" value="77,150">
<!-- マーカー用のコールバック関数を指定 -->
<param name="MarkerFunction" value="marker">

Java Virtual Machine がインストールされていません。<A Href="http://java.com/ja/">http://java.com/ja/</A> から Java Plug-in をダウンロードして、インストールしてください。
</applet>
</DIV>
<OL Style="margin:0px 0px 0px 0px; padding:16px 0px 0px 16px;">
<LI><A Href="javascript:document.Map.set(234,178);">吉祥寺駅</A></LI>
<LI><A Href="javascript:document.Map.set(192,196);">天下寿司</A></LI>
<LI><A Href="javascript:document.Map.set(99,70);">牛鉄</A></LI>
<LI><A Href="javascript:document.Map.set(175,166);">大戸屋</A></LI>
<LI><A Href="javascript:document.Map.set(145,232);">伊勢屋</A></LI>
<LI><A Href="javascript:document.Map.set(214,255);">丸井</A></LI>
</OL>
</DIV>

設置例#4 - 拡大・縮小、スケーラーの表示

Java Virtual Machine がインストールされていません。http://java.com/ja/ から Java Plug-in をダウンロードして、インストールしてください。
  1. 吉祥寺駅
  2. 天下寿司
  3. 牛鉄
  4. 大戸屋
  5. 伊勢屋
  6. 丸井
[縮小] [標準] [拡大]

スケーラーと、拡大縮小の機能をつけてみましょう。

引数 Scaler で画像ファイルを指定すると、それが縮尺表示に使われます。これは、スクロールをしても、拡大・縮小をしても表示位置は右下に固定です。

JavaScript で document.Scaler.scale(2); を呼び出すと半分に、.scale(0.5); を呼び出すと2倍に拡大ができます。

設置例#4

<DIV Style="float:left; border:1px solid #000000; width:360px; height:166px; margin:8px 8px 0px 4px; padding:8px 0px 0px 8px; background:#FFFFFF; text-align:left;">
<DIV Style="float:left; margin:0px 0px 0px 0px; padding:0px 0px 0px 0px; width: 180px; height:150px;">
<SCRIPT Language="JavaScript">
<!--
// コールバック関数は座標 x y を引数に取る
var URL = new Array('http://www.tokyu-dept.co.jp/kichijouji/' ,'http://www.parco-kichijoji.com/');
function wopen(n){
if(n<URL.length){
window.open(URL[n],'_blank');
}
}
//-->
</SCRIPT>
<!-- Appletタグを設置する。MAYSCRIPT を忘れずに。 -->
<applet Name="Scaler" code="ImageCursor" archive="ImageCursor.jar" width="150" height="150" MAYSCRIPT>
<!-- 画像ファイル名を設定 -->
<param name="Image" value="map03.gif">
<!-- マウスカーソルをトラッキングするか設定(true/false) -->
<param name="Tracking" value="false">
<!-- スクロール速度を調整 -->
<param name="Speed" value="16">
<!-- 距離表示の画像ファイルを指定 -->
<param name="Scaler" value="scaler.gif">
<!-- マーカーの画像ファイルを指定 -->
<param name="MarkerImage" value="mkimg/009-001.gif,mkimg/009-002.gif">
<!-- マーカーのX座標を指定 -->
<param name="MarkerX" value="137,174">
<!-- マーカーのY座標を指定 -->
<param name="MarkerY" value="77,150">
<!-- マーカー用のコールバック関数を指定 -->
<param name="MarkerFunction" value="wopen">
Java Virtual Machine がインストールされていません。<A Href="http://java.com/ja/">http://java.com/ja/</A> から Java Plug-in をダウンロードして、インストールしてください。
</applet>
</DIV>
<OL Style="margin:6px 0px 6px 0px; padding:0px 0px 0px 0px;">
<LI><A Href="javascript:document.Scaler.set(234,178);">吉祥寺駅</A></LI>
<LI><A Href="javascript:document.Scaler.set(192,196);">天下寿司</A></LI>
<LI><A Href="javascript:document.Scaler.set(99,70);">牛鉄</A></LI>
<LI><A Href="javascript:document.Scaler.set(175,166);">大戸屋</A></LI>
<LI><A Href="javascript:document.Scaler.set(145,232);">伊勢屋</A></LI>
<LI><A Href="javascript:document.Scaler.set(214,255);">丸井</A></LI>
</OL>
<!-- document.[Appletタグ名].scale([拡大率]); を呼ぶと拡大縮小する。拡大率 1 で標準、2 で半分に縮小、0.5 で2倍に拡大である。-->
[<A Href="javascript:document.Scaler.scale(2);">縮小</A>]
[<A Href="javascript:document.Scaler.scale(1);">標準</A>]
[<A Href="javascript:document.Scaler.scale(0.5);">拡大</A>]
</DIV>

問題点

印刷をすると、画像ファイルが表示されません。地図用途の場合は、印刷用のページが別途必要になります。JVM が起動していない場合、初回のロードにかなり時間がかかります。閲覧者のストレスを増すかも知れません。

ソースコード等

ImageCursor.jar の中に、ImageCursor.java が入っています。読みたい方は、どうぞ。