クリックで切替

クリックすると画像が切替わるようにする

●あらかじめ３つの画像を用意しておき、クリックすることにより画像が切り替わるようにします。

[img1]　 [img2]　 [img3]

上記の青い部分はボタンになっています。

●これを実現するために、上記の部分のhtmlはつぎのようになっています。

<p>
<span onclick="showimg1()">[img1]</span>　
<span onclick="showimg2()">[img2]</span>　
<span onclick="showimg3()">[img3]</span>
</p>
<p>
<img src="images/img1.png" name="area1" alt="説明図">
</p>

スタイルでマージンをとったり文字色を変えたりしている部分を省略しています。青と赤の部分を除けばいままでにつくったものと全く変わりません。

ボタンにしたい文字を span で囲んでいます。青い部分の onclick がキーワードで、マウスがクリックされたときに=以下の関数（手続き）を実行しなさいという命令になっています。

画像には赤い部分の name でこの画像が表示されている領域に名前をつけています。

src="images/img1.png" は普通の画像表示と同じですが、はじめに表示しておく画像を指定していることになります。

●その領域を書き換える「関数」（手順書）をHEAD部に書きます。スタイルシートと似ています。STYLE の代わりに SCRIPT タグでくくり、type="text/css" の代わりにtype="text/javascript" と書きます。JavaScriptはスクリプト言語と呼ばれるプログラム言語の一つです。

<SCRIPT type="text/javascript">
<!--
function showimg1(){
     document.area1.src = "images/img1.png";
}
function showimg2(){
     document.area1.src = "images/img2.png";
}
function showimg3(){
     document.area1.src = "images/img3.png";
}
-->
</SCRIPT>

function showimg1() で showimg1 という関数を宣言します。showimg1 の部分は関数の名前で自由につけることができます。（半角英数という文字種制限あり）

つづく { } の中に実際の手続きを書きます。

今回の内容は１行だけで現在のページ（document）の中の area1 の画像の ソース を images の中にある img1.png にするというものです。文の終わりにはセミコロンを書きます。（document. は省略できる場合もありますが、書いておきましょう）

課題 ファイル名 click.html

●次の img1.png img2.png img3.png をダウンロードして、クリックで切り替えるページをつくりなさい。うまくいったら、自分で３つの画像を書き換えてもよい。３つの画像の大きさは任意でよいが、３つの大きさは同じほうがよい。

　 　

いろいろなボタンの表現

●onclick の設定はほとんどのタグで可能です。span の例を最初に出したのは、一番書くことが少なくなるので、骨組みが見えやすいからです。一般的には、ボタンが引っ込むとか、マウスの形が指に変わるとかボタンであることがよくわかるように form や a タグを使うことが多いのです。また、img タグを使って、自分で作った画像をボタンに仕立てることもできます。

以下に３つの方法を書きましたが、これからはcssを使った（１）がお勧めです。でも残念ながらIEではボタンに見えてくれません。そこで（２）や（３）を使うこともあるのですが、将来を考えれば（１）がスマートです。

（１）cssをつかって

headのスタイルシートにに

span{
  border:outset;
  background:#cccccc;
  margin:4px;
  padding:2px 4px 2px 4px;
  }
span:active{
  border:inset;
}

bodyに(上記の例とまったくおなじ)

<P>
<span onclick="showimg1()">[img1]</span>　
<span onclick="showimg2()">[img2]</span>　
<span onclick="showimg3()">[img3]</span>
</p>
<p>
<img src="images/img1.png" name="area1" alt="説明図">
</p>

spanタグのcssの中に次のように書くと、マウスカーソルがポインタになります。

cursor: pointer;

カーソルの指定はこの他に、次のものを指定できます。規定値はautoです。

crosshair
default
pointer
move
text
wait
help
e-resize, ne-resize, nw-resize, n-resize,
se-resize, sw-resize, s-resize, w-resize

（２）a タグをつかって

●リンクで使用する a タグでもできます。

<a href="javascript:void(0);" onclick="showimg1()">[img1]</a>　
<a href="javascript:void(0);" onclick="showimg2()">[img2]</a>　
<a href="javascript:void(0);" onclick="showimg3()">[img3]</a>

この場合、a タグの本来持っているリンクの機能を殺すために href="javascript:void()" と指定して、どこにもリンクしないようにしています。

[img1]　 [img2]　 [img3]