Computer Programing

2004-09


マウス操作を利用してみよう

 今回はマウスによる操作を利用してみましょう.まず,文字列の上でクリックをすると文字の色が変わるようにしてみます.

<HTML>
<HEAD>
<SCRIPT language="JavaScript">
<!--
var color;

function change()
{
  if( document.all.item("title").style.color == 'black' )
  {
    document.all.item("title").style.color = 'blue';
  }
  else
  {
    document.all.item("title").style.color = 'black';
  }
}
-->
</SCRIPT>
</HEAD>

<BODY>
<P>
<SPAN ID="title" STYLE="color:black;" onclick="change()">わたしのホームページ </SPAN>
</P>
</BODY>
</HTML>

表示される「わたしのホームページ」の上でクリックしてみてください.黒色で表示されていた文字列が青色になったと思います.もう一度クリックすると黒に戻ります.

 SPAN タグのオプションとして書かれている

onclick="change()"

は,SPAN タグで囲まれている文字列の上でマウスボタンが押されると関数 change を呼び出す役目を持っています.そして,関数 change の中では現在の色を表す変数 color が黒色(black)であれば青色(blue)に,青色(blue)なら黒色(black)に変更する処理を行っています.

 これ以外にもマウス操作が起きたときに関数を呼び出す方法として,マウスカーソルが文字列の上にあるときに関数を呼び出したいときに使う onmouseover,マウスカーソルが文字列の上からはずれたときに関数を呼び出したいときに使う onmouseout などがあります.次のコードはマウスカーソルが文字列の上にあるときは青色に,それ以外のときは黒色になるものです.

<HTML>
<HEAD>
<SCRIPT language="JavaScript">
<!--
function mover()
{
  document.all.item("title").style.color = 'blue';
}
function mout()
{
  document.all.item("title").style.color = 'black';
}
--->
</SCRIPT>
</HEAD>

<BODY>
<P>
<SPAN ID="title" STYLE="color:black;" onmouseMove="mover()" onmouseOut="mout()">わたしのホームページ</SPAN>
</P>
</BODY>
</HTML>

文字列を好きな場所へ移動してみよう

 次にマウスをクリックするとその場所に文字列が移動するようにしてみます.前の例ではマウスクリックが起こるときに関数を呼び出すために

<SPAN ID="title" STYLE="color:black;" onclick="change()">わたしのホームページ

と書きました.この場合,「わたしのホームページ」という文字列をクリックすると関数 mclick が呼び出されました.今回はクリックした場所に文字列を移動させたいので,文字列を囲む SPAN タグのオプションとして onclick=... を書くことはできません.今回クリックが想定されるのはドキュメントが表示されている場所全体なので,

<BODY onclick="change()">

と BODY タグに書けばよいのです.クリックされた位置は

X座標:event.clientX
Y座標:event.clientY

で取得することができますので,関数 change の中で,位置をこの値に書き換えてあげれば,文字列を移動させることができます.次にコード全体を示します.

<HTML>
<HEAD>
<SCRIPT language="JavaScript">
<!--
function change()
{
  document.all.item("title").style.left = event.clientX + 'px';
  document.all.item("title").style.top = event.clientY + 'px';
}
--->
</SCRIPT>
</HEAD>

<BODY onclick="change()">
<P>
<SPAN ID="title" STYLE="color:black; position:absolute;">わたしのホームページ</SPAN>
</P>
</BODY>
</HTML>

 さて,文字列の位置を指定させるのに,前回教えた方法を使って,

document.all.item("title").style.left = event.clientX + 'px';
document.all.item("title").style.top = event.clientY + 'px';

と書いてありますが,これを

document.all.item("title").style.pixelLeft = event.clientX;
document.all.item("title").style.pixelTop = event.clientY;

と書くこともできます.pixelLeft と pixelTop は,ピクセル単位で指定することが決まっている属性なので,代入する値に "px" を加える必要がありません.


文字列を隠したり表示したりしてみよう

 マウスの動きをとる方法を学びましたので,ある文字列の上にマウスカーソルをのせると,その説明が表示されるようにしてみましょう.表示を制御するためには,SPAN タグの STYLE オプションの中に visibility; を入れます.たとえば,

<SPAN ID="title" STYLE="visibility:hidden">わたしのホームページ</SPAN>

とすると表示されません.また,

<SPAN ID="title" STYLE="visibility:visible">わたしのホームページ</SPAN>

とすると表示します.JavaScript で表示を制御する場合,表示するときは

document.all.item("title").style.visibility = 'visible';

非表示にするときは

document.all.item("title").style.visibility = 'hidden';

とします.マウスカーソルが文字列の上にのっているときには説明が表示され,のっていないときには説明が消えるコードを次に示します.

<HTML>
<HEAD>
<SCRIPT language="JavaScript">
<!--
function mover()
{
  document.all.item("info").style.visibility = 'visible';
}
function mout()
{
  document.all.item("info").style.visibility = 'hidden';
}
-->
</SCRIPT>
</HEAD>

<BODY>
<P>
<SPAN ID="title" onmouseover="mover()" onmouseout="mout()">わたしのホームページ</SPAN><BR>
<SPAN ID="info" STYLE="visibility:hidden;">  わたしのホームページはまだ未完成です</SPAN>
</P>
<P>
あなたのホームページ
</P>
<HR>
</BODY>
</HTML>

 これだと,説明を消してもその場所はきちんととってあり,説明が長いと空白の場所が大きくなりかっこが悪いです.そこで表示しないときはその場所を詰めるようにしてみます.このときは visibility の代わりに display を使います.表示したいときは block,非表示にしたいときは none を設定します.

<HTML>
<HEAD>
<TITLE>JavaScript</TITLE>
<SCRIPT language="JavaScript">
<!--
function mover()
{
  document.all.item("info").style.display = 'block';
}
function mout()
{
  document.all.item("info").style.display = 'none';
}
--->
</SCRIPT>

<BODY>
<P>
<SPAN ID="title" onmouseover="mover()" onmouseout="mout()">わたしのホームページ</SPAN><BR>
<SPAN ID="info" STYLE="display:none;">  わたしのホームページはまだ未完成です </SPAN>
</P>
<P>
あなたのホームページ
</P>
<HR>
</BODY>
</HTML>

このようにすると,下に表示される文字列が,説明が表示されるかされないかで動くと思います.


演習

 下のコードを変更して,マスの中をクリックすると○が消えるようにしてみよう.

<HTML>
<HEAD>
<SCRIPT language="JavaScript">
<!---
--->
</SCRIPT>
</HEAD>

<BODY>
<P>
<table border=1>
<tr>
<td><SPAN ID='id11' STYLE="visibility:visible;">○</SPAN></td>
<td><SPAN ID='id12' STYLE="visibility:visible;">○</SPAN></td>
<td><SPAN ID='id13' STYLE="visibility:visible;">○</SPAN></td>
</tr>
<tr>
<td><SPAN ID='id21' STYLE="visibility:visible;">○</SPAN></td>
<td><SPAN ID='id22' STYLE="visibility:visible;">○</SPAN></td>
<td><SPAN ID='id23' STYLE="visibility:visible;">○</SPAN></td>
</tr>
<tr>
<td><SPAN ID='id31' STYLE="visibility:visible;">○</SPAN></td>
<td><SPAN ID='id32' STYLE="visibility:visible;">○</SPAN></td>
<td><SPAN ID='id33' STYLE="visibility:visible;">○</SPAN></td>
</tr>
</table>
</P>
</BODY>
</HTML>

消す対象となる○には id11, id12, id13, id21, id22, id23, id31, id32, id33 という名前がついています.それぞれを消す9つの関数を作るのではなく,「名前を引数で受け取ると,その名前を持った○を消す」という関数を1つだけ作って,関数を呼び出すときに,

<SPAN ID='id21' STYLE="visibility:visible;" onclick="change('id21')">

という感じに,それぞれの名前を引数として渡すようにすると,きれいなコードになります.


発展課題

演習で作ったプログラムで,消した○が2秒後に復活するようにしてみよう.