ひな形スクリプト講座12

早速始めます。

③マウス座標を取得します。

マウスポインタ（カーソル）の座標は、どの領域を基準にするかで、いくつか用意されています。
windowオブジェクトのeventオブジェクトのプロパティです。windowオブジェクトは最上位にあるため、windowは省略できます。

[1]モニタースクリーン上の位置の取得(画面の絶対座標）
window.event.screenX・・・x座標取得 window.event.screenY・・・Y座標取得(X,Yは大文字)
event.screenX・・・x座標取得 event.screenY・・・Y座標取得　　　　こちらでもOK。

以下windowは省略します。

[2]body（表示領域-ドキュメントのクライアント領域)上の位置の取得
event.x・・・x座標取得 event.y・・・Y座標取得（x,yは小文字)

[3]イベントを呼び出したエレメント上の位置の取得
event.offsetX・・・X座標取得 event.offsetY・・・Y座標取得(X,Yは大文字)

今回は包括エレメントgbox0をクリックすると、弾痕穴画像と赤い円画像をクリック位置が円の中心になるように位置を指定して追加表示させます。gbox0はbodyのサイズに合わせていますので、[2][3]どちらを使用してもいいのですが、[3]を使用することにしましょうか。

クリックすると画像をクリック座標を参考にして追加・・・この意味はクリックすると座標を取得して、その位置が円の中心になるようにleftとtopの位置を計算し、画像をgbox0エレメントに追加するということです。その際、gbox0には既に子エレメントとしてaki2.jpg画像がz-index:1で配置されています。弾痕穴画像はその上に重なるように配置、更に赤い円画像が一番上になるように配置する必要があります。そうしないと赤い画像が一番手前に来ないので、表示が隠れてしまう可能性があります。クロマキーフィルタで赤い部分が透明になるということを利用して、aki2.jpg画像を丸く切り抜くことが目的です。追加する弾痕穴画像のz-indexは2に、赤い円画像のz-indexは3にします。

クリックすると・・・onclickですね。このイベントハンドラで関数を実行させましょう。関数はimgadd()にしますか。gbox0をクリックすると、関数imgadd()を実行させる。

さあ関数imgadd()を定義しましょう。座標の取得はevent.offsetXとevent.offsetYですね。これをとりあえずzxとzyという変数を確保してその中に代入しておきましょう。そうそう取得した座標がわかるようにステータスバーに表示するようにしておきましょうか。

クリックすると・・・いろんなところをクリックして座標を確認してみてね。

④包括エレメント内に新しくサブエレメントを追加します。

エレメントにエレメントを追加するには、スクリプトでタグを書き出すわけですが、書き出す方法はいくつかあります。通常ドキュメントに書き出しするのはdocument.write()メソッドを使用しますが、関数にこの書き出しスクリプトを入れて、関数呼び出し時に実行される方法は、既にあるドキュメントの内容を書き換えてしまうため、使えません。document.write()は関数内ではまず使用しない（ポップアップウィンドウのドキュメント書き出しをする場合は除く）と思って間違いありません。

では他にあるかどうかですが、包括エレメントとなりうるエレメントにタグを追加したり、書き換えたりするプロパティやメソッドがちゃんと用意されています。

[1]object.innerHTMLプロパティを使用する。このプロパティは読み書きできるエレメントに対してのみ書き換えも可能です。次のエレメントは読み込みでのみ使用できます。COL,COLGROUP,FRAMESET,HTML,STYLE,TABLE,TBODY,TFOOT,THEAD,TITLE,TR

オブジェクトの内部HTML内容を読み出したり、書き換えたりします。

基本ソースが以下のようになっているとする。
<div id="div1">
<img src="aki.jpg">
</div>

・内容を読み出す・・・var str=div1.innerHTML・・・strは文字列"<img src="aki.jpg">"が入ります。

・内容を書き出す・・・div1.innerHTML="<img src='hoshino.jpg'>"
これが実行されるとdiv1の内部HTMLは書き換えられ次のようになる。
<div id="div1">
<img src='hoshino.jpg'>
</div>

・内容を追加・・・div1.innerHTML+="<img src='hoshino.jpg'>" ・・+=は加算代入
これが実行されるとdiv1の内部HTMLは書き換えられ次のようになる。
<div id="div1">
<img src="aki.jpg">
<img src='hoshino.jpg'>
</div>

[2]object.insertAdjacentHTML()メソッドを使用する。

解説：エレメントの中の指定された位置に、指定されたHTMLテキストを挿入する。テキストにHTMLタグが含まれる場合には、テキストは解析されフォーマットされてタグにしたがって表示される。

構文：object.insertAdjacentHTML(where, text)

パラメータ 解説

where HTMLテキストの挿入位置を指定する文字列で、以下のいずれかを指定できる。

BeforeBegin エレメントの直前にテキストを挿入する。

AfterBegin エレメントの開始位置の後にテキストを挿入する。ただし、そのエレメントの中の全てのコンテントよりも前に置かれる。

BeforeEnd エレメントの終了位置の直前にテキストを挿入する。ただし、そのエレメントの中の全てのコンテントよりも後に置かれる。

AfterEnd エレメントの終了位置の直後にテキストを挿入する。

text 挿入するHTMLテキストを指定する文字列。この文字列はテキストとHTMLタグの組み合わせになる。HTMLに誤りがあると、このメソッドは失敗する。

戻り値：戻り値なし。

注意事項：ドキュメントがロード中はテキストを挿入できない。このメソッドを呼ぶ前にonloadイベントを待たなければならない。

このメソッドは第二パラメータであるテキストをエレメント(objext)に追加しますが、追加する位置を第一パラメータで指定します。

<div>
   <div id="div1">
       <img id="img1" src="hoge.jpg">
   </div>
</div>
というソースがあるとします。

・div1.insertAdjacentHTML("BeforeBegin","<img id='img2' src='gazo.jpg'>")

実行すると
<div>
   <img id='img2' src='gazo.jpg'><div id="div1">
       <img id="img1" src="hoge.jpg">
   </div>
</div>
のようになります。

・div1.insertAdjacentHTML("AfterBegin","<img id='img2' src='gazo.jpg'>")

実行すると
<div>
   <div id="div1">
       <img id='img2' src='gazo.jpg'><img id="img1" src="hoge.jpg">
   </div>
</div>
のようになります。

・div1.insertAdjacentHTML("BeforeEnd","<img id='img2' src='gazo.jpg'>")

実行すると
<div>
   <div id="div1">
       <img id="img1" src="hoge.jpg"><img id='img2' src='gazo.jpg'>
   </div>
</div>
のようになります。

・div1.insertAdjacentHTML("AfterEnd","<img id='img2' src='gazo.jpg'>")

実行すると
<div>
   <div id="div1">
       <img id="img1" src="hoge.jpg">
   </div><img id='img2' src='gazo.jpg'>
</div>
のようになります。

さて今回の場合はgbox0の子エレメントとして追加します。内部的にはどの位置でも構わないのですが、追加するということで、"beforeEndを使うことにしましょう。勿論innerHTMLでもOKです。

gbox0に画像を追加する。=>imgタグをテキストにして追加します。z-indexは先に述べたとおりですが、さて位置が問題です。クリックした位置を円の中心にするということを処理します。

このana2.gif画像は118ピクセル×118ピクセルの真円なので中心はx座標が59ピクセル、y座標が59ピクセルです。

ところがana1.gif画像は152ピクセル×152ピクセルなのですが、中にある円部分の中心は(76,76)ではないんです（偏ってます）。

これは後で数値を変えて調整することにします。

中心が(cx,cy)の時、leftとtopはどうなるかを考えてみます。画像の真ん中が中心ならば、left=cx-(画像の横幅/2)、top=cy-(画像の縦幅/2)ですね。画像の半分だけ差し引けばいいのですから。

そこでgbox0にana1.gifを追加する式は
gbox0.insertAdjacentHTML("BeforeEnd","<img src='"+a1.src+"' style='position:absolute; left:"+(zx-76)+"px; top:"+(zy-76)+"px; z-index:1'>")

gbox0にana2.gifを追加する式は
gbox0.insertAdjacentHTML("BeforeEnd","<img src='"+a2.src+"' style='position:absolute; left:"+(zx-59)+"px; top:"+(zy-59)+"px; z-index:2'>")

これをひとつにまとめても構いません。

gbox0.insertAdjacentHTML("BeforeEnd","<img src='"+a1.src+"' style='position:absolute; left:"+(zx-76)+"px; top:"+(zy-76)+"px; z-index:1'><img src='"+a2.src+"' style='position:absolute; left:"+(zx-59)+"px; top:"+(zy-59)+"px; z-index:2'>")

テキスト部分には文字列と変数を使用した計算部分とが混在してますので、文字列の連結+を使用していることに注意ください。

"left:"+(zx-59)+"px"・・・これはzxが100ならば、"left:41px"となることはわかりますね。

さてこれをまとめましょう。

[ソース]

<HTML>
<head>
<meta http-equiv="content-type" content="text/html; charset=shift_jis">
<META http-equiv="Content-Style-Type" content="text/css">
<title>Gunshot</title>
</head>
<body id="body1" style="margin:0px; padding:0px; overflow:hidden">
<img src="aki1.jpg" id="gazou1" style="position:absolute; z-index:1; top:0px; left:0px; width:expression(document.body.clientWidth); height:expression(document.body.clientHeight)">
<div id="gbox0" onclick="imgadd()" style="position:absolute; z-index:2; left:0px; top:0px; filter:chroma(color=#ff0000); width:expression(document.body.clientWidth); height:expression(document.body.clientHeight)">
<img id="img2" src="aki2.jpg" style="position:absolute; z-index:1; top:0px; left:0px; width:expression(document.body.clientWidth); height:expression(document.body.clientHeight)"></div>

<img id="a1" src="ana1.gif" style="width:50px; height:50px; visibility: hidden;">
<img id="a2" src="ana2.gif" style="width:50px; height:50px; visibility: hidden;">

<script>
var zx
var zy
function imgadd(){
zx=event.offsetX
zy=event.offsetY
status="X座標="+zx+"; Y座標="+zy
gbox0.insertAdjacentHTML("BeforeEnd","<img src='"+a1.src+"' style='position:absolute; left:"+(zx-76)+"px; top:"+(zy-76)+"px; z-index:1'><img src='"+a2.src+"' style='position:absolute; left:"+(zx-59)+"px; top:"+(zy-59)+"px; z-index:2'>")
}
</script>
</body>
</html>

ここまでのHTML

テストしてみてください。クリックすると、若干弾痕穴画像(ana1.gif)が左上にずれてますね。ということは引き過ぎなので、数値を微調整して完成させます。

gbox0.insertAdjacentHTML("BeforeEnd","<img src='"+a1.src+"' style='position:absolute; left:"+(zx-74)+"px; top:"+(zy-72)+"px; z-index:1'><img src='"+a2.src+"' style='position:absolute; left:"+(zx-59)+"px; top:"+(zy-59)+"px; z-index:2'>")

ここまでのHTML

次回はこのひな形の問題点解決と、ダブルクリックで大きな穴が開くように、また音が出るようにしましょう。お楽しみに。