Java Applet メニュー

トップページ
文字打ちゲーム
細々と Java で Macromedia Flash™ に対抗するために作ったゲームです。
15 パズル
Java Applet 版の 15 パズルです。任意の画像を、任意の分割でトライできます。
立方体メニュー
使いづらいキューブ型のメニューです。マウスの位置で立方体がぐるぐると回転します。
画像表示
地図等を表示して、どこに何があるか示すときに地図上に目印をつけておく事ができます

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); を呼び出すと２倍に拡大ができます。

設置例#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 で２倍に拡大である。-->
[<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 が入っています。読みたい方は、どうぞ。

All rights reserved. Copyright © 2005–2024 uncorrelated@yahoo.co.jp