| ポイント |
<![CDATA[
num = 0;
function change()
{
num++;
num %= 4;
document.myIMG1.src = "type"+num+".jpg";
document.myIMG2.src = "type"+num+".jpg";
}
<a href="javaScript:change()">
<img src="type0.jpg" name="myIMG1" border="0"><br>
<img src="type0.jpg" name="myIMG2" border="0"><br>
]]>
|
| 説 明 |
クリックしたら複数の画像を変更するにはaタグのhref属性にjavascript:実行関数名()を記述するかonclick="実行関数名()"と記述します。切り替える画像にはimgタグのname属性で名前を付けておきます。切り替える画像の番号は変数にあらかじめ格納しておきクリック毎に1加算し指定枚数を超えたら0にします。この処理は剰余(%演算子)を求めることにより可能になります。入れ替える画像は「document.画像名.src = 入れ替える画像のURL」として指定します。 |
| サンプル |
<![CDATA[
<html>
<head>
<title>クリックすると複数画像を入れ替える</title>
<script language="JavaScript"><!--
num = 0;
function change()
{
num++;
num %= 4;
document.myIMG1.src = "type"+num+".jpg";
document.myIMG2.src = "type"+num+".jpg";
}
// --></script>
</head>
<body>
<a href="javaScript:change()">
<img src="type0.jpg" name="myIMG1" border="0"><br>
<img src="type0.jpg" name="myIMG2" border="0"><br>
</a>
</body>
</html>
]]>
|
| 補足説明 |
IEの場合はonclick="change()"のように直接IMGタグ内に記述しても動作します。 |
|
■サンプルスクリプトを実行する >>実行
■各ブラウザでの動作結果を見る >>View!
|
クリックすると複数画像を入れ替える