ボタン連動
この例は、ボタン操作で動作を制御するものです
ソースとしては、以下の通りです
<![CDATA[
<!DOCTYPE html public "-//W3C//DTD HTML 3.2 Final//EN">
<HTML>
<HEAD>
<META http-equiv="content-type" content="text/html; charset=Shift_JIS">
<TITLE>HTML勉強会テキスト</TITLE>
</HEAD>
<BODY bgcolor="#c0c0c0" text="#000000" link="#0000ff" vlink="#800080">
<LAYER z-index="1" name="lay1"><IMG src="pic1.gif" width="150" height="100"></LAYER>
<LAYER z-index="2" name="lay2"><IMG src="pic2.gif" width="150" height="100"></LAYER>
<LAYER z-index="3" name="lay3">
<SCRIPT language="javascript">
<!--
var img1 = new Image();
var img2 = new Image();
var img3 = new Image();
img1.src = "pic3.img";
img2.src = "pic4.img";
img3.src = "pic5.img";
function cloudaction() {
document.images["targetimages"].src="pic3.gif";
}
function fineaction() {
document.images["targetimages"].src="pic4.gif";
}
function rainaction() {
document.images["targetimages"].src="pic5.gif";
}
// -->
</SCRIPT>
<IMG src="pic3.gif" width="150" height="100" name="targetimages">
<BR clear="all">
<FORM>
天気を選択して下さい<BR>
<UL>
<INPUT type="radio" name="weather" value="C" onClick="cloudaction()" checked>曇り<BR>
<INPUT type="radio" name="weather" value="F" onClick="fineaction()">晴れ<BR>
<INPUT type="radio" name="weather" value="R" onClick="rainaction()">雨<BR>
</UL>
</FORM>
</LAYER>
</BODY>
</HTML>
]]>
function cloudaction()、function fineaction()、function rainaction()はそれぞれ、画像の切り替えを行います
<FORM>タグの中の、<INPUT>タグで、onClickを指定し、クリックされた時、先の３つのfunctionの何れかを呼び出しています
最初にある、varの部分は、画像を先に読み込んでおくための処置です
これがないと、初回のみですが、ボタンクリック時、画像の読み込みが発生し、レスポンスが悪くなります
ここをクリックすると、この画面の実行結果が見れます