上側の画像ボタンにマウスカーソルを持っていくとボタンが画像が変わります。（画像は２種類用意しておく必要があります）
下側の画像ボタンはクリックすると画像が変わります。
（このスクリプトはIE3では動作しません）
以下で内容を解説します。
ソースコード
1:<SCRIPT LANGUAGE="JavaScript">
2:<!--
3:function makeArray(k){
4: this.length=k
5:}
6:
7:function Init(){
8: work=new makeArray(1)
9: work[0]=new Image()
10: work[0].src="on1.gif"
11: work[1]=new Image()
12: work[1].src="off1.gif"
13:}
14:function ButtonChange(number1,number2){
15: document.images[number1].src=work[number2].src
16:}
17:// -->
18:</SCRIPT>
19:<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=x-sjis">
20:</HEAD>
21:<BODY BGCOLOR=#FFFFFF onLoad="Init()">
22:<A HREF="index.html" onMouseOver="ButtonChange(0,0)" onMouseOut="ButtonChange(0,1)"><IMG SRC="off1.gif" border=0 ALT="BUTTON IMAGE"></A>
23:<A HREF="index.html" onmousedown="ButtonChange(1,0)"><IMG SRC="off1.gif" border=0 ALT="BUTTON IMAGE"></A>
左の数字は説明用の行番号です。
まず、HTMLファイルを読み込んだときにこのページで使う画像ファイルをロードしておきますので７行目からの関数をonLoadイベントハンドラで呼び出しておきます。
ここでは使う画像は２つだけですのでこれだけですが、数が増えればその分の設定が必要になります。（画像分だけ８行目の数字を増やして９，１０行目のような命令を増やしていけばよい）
あとは、２２行目のアンカータグの後半、onMouseOverイベントハンドラ及びonMouseOutイベントハンドラを書き足せばＯＫです。（２３行目だとonmouseoverイベントハンドラになります）
ButtonChange関数の引数は第１引数が画像の位置の番号になります。（表示される画像の番号）第２引数が表示したい画像の番号（Init関数で設定した配列の番号）になります。
戻る
メール