クリックで切替

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

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

[img1]　 [img2]　 [img3]

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

これを実現するために、上記の部分のhtmlはつぎのようになっています。(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 で囲んでいます。青い部分の onclick がキーワードで、マウスがクリックされたときに=以下の関数（手続き）を実行しなさいという命令になっています。

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

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

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

<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 を使ったのは、一番書くことが少なくなるので、骨組みが見えやすいからです。ボタンが引っ込むとか、マウスの形が指に変わるとかボタンであることがよくわかるようするには css を使えばいいのです。また、img タグを使って、自分で作った画像をボタンに仕立てることもできます。

次の方法はcssを使ったボタンです。でも残念ながら古いIEではボタンに見えてくれません。

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
pointer
move
text
wait
help
nw-resize n-resize ne-resize
w-resize           e-resize
sw-resize s-resize se-resize
default
auto

一般的なDOMを使って

htmlだけでなく上位のxmlに使えるやり方があります。一般のjavascriptよりもブラウザによる差が少ない方法です。しかし、一部IEでは使えない場合もあります。検証が十分でないので、参考までに掲載します。

タグの中の A=B という部分をアトリビュート(Attribute)といいます。imgタグの src="images/img1.png" もアトリビュートです。

Aの値をBにするためには、setAttribute("A","B") とします。

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

2つの書き方を比べます。上がhtml限定の書き方、下がDOMの一般的な書き方です。

document.getElementById("area1").src = "images/img1.png";
document.getElementById("area3").setAttribute("src","images/img1.png");

さらに

3つの関数 showimg1() showimg2() showimg3() はほとんど同じです。引数を使えば一つにまとめられます。動作は同じです。

function showimg(id,n){
   var koreni = "images/img"+n+".png";
   document.getElementById(id).setAttribute("src",koreni);
}

これを実現するためにはbodyの中の記述も変えます。

<p>
<span onclick="showimg('area1','1')">[img1]</span>　
<span onclick="showimg('area1','2')">[img2]</span>　
<span onclick="showimg('area1','3')">[img3]</span>
</p>
<p>
<img src="images/img1.png" id="area1" alt="説明図" />
</p>