取扱説明(HTMLへの組込み方法)
アプレット SpareClothes.class
の機能と使用方法
●機能:
画像の一部分をマウスクリックすることにより、クリックした辺りの画像をクリック毎に変更する
●使用方法:
---使用例---------------------------------------------------
<applet code=SpareClothes.class
width=314 height=520>
<param name="baseimg"
value="hi20base.jpg">
<param name="parts0" value="hi20a- jpg 1 0
122">
<param name="parts1" value="hi20b- jpg 2 216
37">
<param name="parts2" value="hi20c- jpg 2 158
165">
<param name="parts3" value="hi20d- jpg 1 225
462">
</applet>
------------------------------------------------------------
使用例の説明
表示されるアプレットの大きさは幅314、高さ520(通常、基本画像と同じ大きさにします)
基本(下地)となる画像のファイル名は hi20base.jpg
表示される画像の中でマウスクリックすることにより変更可能な部分が4個所
1箇所目はparts0で指定、基本画像の表示変更のために使用される画像は
hi20a-1.jpg の1枚
画像は座標位置 x=0, y=122 の位置から変更される
またマウスクリックの反応範囲は、アプレットの座標中で左上(x=0,
y=122)から画像 hi20a-1.jpg
の大きさの範囲
仮に hi20a-1.jpg の画像の大きさが幅104ドット高さ58ドットであれば
左上x=0, y=122 右下x1=104[0 +104], y1=180[122 +58]
で囲まれた範囲内をクリックすることに
より画像を書き換える
2箇所目はparts1で指定、基本画像の表示変更のために使用される画像は
hi20b-1.jpg, hi20b-2.jpg の2枚
画像は座標位置 x=216, y=37 の位置から変更される
またマウスクリックの反応範囲は、アプレットの座標中で左上(x=216,
y=37)から画像 hi20b-1.jpg
の大きさの範囲
仮に hi20b-1.jpg の画像の大きさが幅81ドット高さ73ドットであれば
左上x=216, y=37 右下x1=297[216 +81], y1=110[37 +73]
で囲まれた範囲内をクリックすることに
より画像を書き換える
3箇所目はparts2で指定、変更で使用される画像は
hi20c-1.jpg, hi20d-2.jpg の2枚
(1箇所目、2箇所目と同様)
4箇所目はparts3で指定、変更で使用される画像は
hi20e-1.jpg の1枚
(1箇所目、2箇所目と同様)
パラメータの指定方法
(1)baseimg
は下地となる基本画像の指定
例:<param name="baseimg"
value="hi20base.jpg">
(2)partsN
は基本画像の表示を変更するために使用する画像ファイル,
変更画像数, 表示位置, マ
ウスクリックの有効範囲の指定です
例:<PARAM NAME="parts0"
VALUE="hi20c- jpg 4 158 165 130 250">
(2-a)画像ファイルの指定方法と変更画像数
上の例では hi20c- が基本のファイル名 jpg
が拡張子となり、パラメーター中の 4
が変更画像
数です
アプレットプログラムが画像を読み込む場合には次のようにファイル名を補完します
上記例のパラメーター指定の場合
hi20c-1.jpg hi20c-2.jpg hi20c-3.jpg hi20c-4.jpg
の4つのファイルを読み込む
*重要 ---> (変更画像のファイル名には1,2,3,4の順番に番号を付ければならない、また番号を飛
ばしてはならない)
マウスクリックによる画像の変更は5個所まで可能で
parts0 から parts4 までのパラメーター
を使用します.
また1個所あたり4回まで画像の変更が可能です
(2-b)変更画像の表示開始位置
上記例のパラメーターの例ではアプレット上の座標、x=158,
Y=165の位置から画像を変更します
(2-c)マウスクリックの有効範囲
上記例のパラメーターではアプレット上の座標、
横方向158〜288(158 +130), 縦方向165〜415(165 +250)の範囲内でのクリックを有効とします
なお、マウスクリックの有効範囲幅のパラメーターは省略することができます、その場合1枚目の
変更画像の幅と高さからクリック可能範囲を判断します
例: <PARAM NAME="parts0" VALUE="hi20c- jpg 4
158 165">
(3)soundN
はマウスクリックしたときに鳴らす効果音の指定です
例:<PARAM NAME="sound0"
VALUE="mokugyo.au">
(4)読み込み可能な画像形式
画像は .gif .jpg .xbm 形式を指定できます
(Javaが標準でサポートしている画像ファイル形式)
なお、XBM形式の画像ファイルは試したことがありませんがダイジョブでしょうJavaだから
(^_^;
次の条件の場合のアプレット組み込み方法
下地になる画像のファイル名が hi20base.jpeg
下地になる画像の大きさが横幅, 縦幅それぞれ 314, 520
表示変更に使う絵のファイル名が hi20b-1.jpeg hi20b-2.jpeg hi20b-3.jpeg の3つのファイル
下地の絵の中で、座標 X点が 216
Y点が 37
から画像の変更を行いたい
また、マウスクリックの有効範囲幅は横方向,
縦方向それぞれ 80, 70
にする
上記の条件の場合HTMLファイルには次のようにしてアプレットを組み込む
<APPLET CODE="SpareClothes.class" WIDTH=314
HEIGHT=520>
<PARAM NAME="baseimg"
VALUE="hi20base.jpeg">
<PARAM NAME="parts0" VALUE="hi20b- jpeg 3 216
37 80 70>
</APPLET>
●最後に:
だらだらと説明を書きましたが説明を読んでも初めての方には理解できないのではないかと思います?
サンプルのHTMLと画像ファイルを添付してありますのでサンプルのHTMLのソースと画像フ
ァイルの関係を見比べた方が理解が早いかも知れません