クリックで切替

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

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

[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" id="area1" alt="説明図" />
</p>

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

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

imgタグ内には赤い部分の id でこの画像が表示されている領域に名前をつけています。これはこのページにひとつだけの名前にしなければなりません(つまり2つ目のidにはid="area2"などと別の名前をつけなければなりません)

htmlの文法ではこのような時にidではなく name を使っていました。xhtmlになってからこの方法は廃止になりましたが、idではうまく動かず、nameにしなければならないブラウザもあります。

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

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

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

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

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

今回の内容は１行だけで現在のページ（document）の中の area1 というid をもつ要素の ソース を images の中にある img1.png にするというものです。文の終わりにはセミコロンを書きます。

課題 ファイル名 click.html

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

index.htmlからは「クリック」という名前のリンクから行けるようにすること。

　 　

いろいろなボタンの表現

onclick の設定はほとんどのタグで可能です。span の例を最初に出したのは、一番書くことが少なくなるので、骨組みが見えやすいからです。一般的には、ボタンが引っ込むとか、マウスの形が指に変わるとかボタンであることがよくわかるように form や a タグを使うことが多かったのですが、これからはcssで表現するのが楽でしょう。また、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" id="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