| ポイント |
<![CDATA[
function change(iName,imgA,imgB)
{
iObj = document.images[iName];
n = iObj.src.lastIndexOf("/") + 1;
iSrc = iObj.src.substring(n,iObj.src.length);
if (iSrc == imgA) iObj.src = imgB; else iObj.src = imgA;
}
<img src="a1.gif" name="img1" onClick="change('img1','a1.gif','a2.gif')"><br>
]]>
|
| 説 明 |
DOM (Document Object Model)対応ブラウザではタグ内に直接イベントハンドらを記述することができます。クリックされたら切り換える場合はonClickイベントを使い、onClick="実行関数名()"と記述します。複数の画像で、それぞれ異なる画像を切り替えるには現在の画像ファイル名を調べて切り替える方法とフラグ変数を用意して切り替える方法などがあります。サンプルでは画像のファイル名を調べて２枚の画像を切り替えています。画像のsrcプロパティにはファイル名でなくURLが入っているため、URLの末尾から/の後ろまでの文字列を取り出し、ファイル名とする処理を行っています。 |
| サンプル |
<![CDATA[
<html>
<head>
<title>クリックで複数画像の画像を個別に切り替える（DOM [Document Object Model]）</title>
<script language="JavaScript"><!--
function change(iName,imgA,imgB)
{
iObj = document.images[iName];
n = iObj.src.lastIndexOf("/") + 1;
iSrc = iObj.src.substring(n,iObj.src.length);
if (iSrc == imgA) iObj.src = imgB; else iObj.src = imgA;
}
// --></script>
</head>
<body>
画像をクリックしてください。クリックするたびに変わります。<br>
<br>
<img src="a1.gif" name="img1" onClick="change('img1','a1.gif','a2.gif')"><br>
<img src="b1.gif" name="img2" onClick="change('img2','b1.gif','b2.gif')"><br>
</body>
</html>
]]>
|
| 補足説明 |
なし |
|
■サンプルスクリプトを実行する >>実行
■各ブラウザでの動作結果を見る >>View!
|
クリックで複数画像の画像を個別に切り替える（DOM [Document Object Model]）