| ポイント |
<![CDATA[
num ^= 1;
document.myIMG1.src = "type"+num+".jpg";
document.myIMG2.src = "type"+num+".jpg";
<img src="btn.gif" border="0" onClick="change()">
]]>
|
| 説 明 |
DOM (Document Object Model)対応ブラウザではタグ内に直接イベントハンドらを記述することができます。クリックされたら切り換える場合はonClickイベントを使い、onClick="実行関数名()"と記述します。切り替える画像にはimgタグのname属性で名前を付けておきます。入れ替える画像は「document.画像名.src = 入れ替える画像のURL」として指定します。サンプル中でnum ^= 1という記述がありますが、これは排他的論理和で0の場合は1、1の場合は0に値（ビット）が切り替わります。 |
| サンプル |
<![CDATA[
<html>
<head>
<title>クリックすると複数画像を入れ替える（その３：DOM [Document Object Model]）</title>
<script language="JavaScript"><!--
num = 0;
function change()
{
num ^= 1;
document.myIMG1.src = "type"+num+".jpg";
document.myIMG2.src = "type"+num+".jpg";
}
// --></script>
</head>
<body>
<img src="btn.gif" border="0" onClick="change()">
<br>
<br>
<img src="type0.jpg" name="myIMG1"><br>
<img src="type0.jpg" name="myIMG2"><br>
</body>
</html>
]]>
|
| 補足説明 |
IEの場合はonclick="change()"のように直接IMGタグ内に記述しても動作します。 |
|
■サンプルスクリプトを実行する >>実行
■各ブラウザでの動作結果を見る >>View!
|
クリックすると複数画像を入れ替える（その３：DOM [Document Object Model]）