第54回 「画像を入れ替える」
今回は画像を入れ替える方法について説明します。
画像はHTMLでは以下のように書きます。
<img src="画像URL">
JavaScriptで操作するためにはname属性またはid属性で名前またはIDを指定しておく必要があります。Internet Explorer 5.0、Netscape 6.0以前のブラウザや、それ以外の多くのブラウザなどでも対応させる場合にはname属性で名前を指定します。
<img src="画像URL" name="myIMG">
Internet Explorer 5.0、Netscape 6.0以降でDOM (Document Object Model)に対応したブラウザであれば以下のようにidで指定してもJavaScriptから操作できます。２つを併用する事もできます。
<img src="画像URL" id="myIMG">
JavaScriptで操作する場合、name属性では以下のように書きます。
（１）：document.myIMG
（２）：document.images["myIMG"]
またページ内での（HTMLタグでの）出現順番が分かっている場合には以下のように参照番号を使うこともできます。
（３）：document.images[参照番号]
参照番号は0から始まります。つまりページ内で一番最初に現れた画像（<img>タグで定義されたもの）が0になり、その次の画像が1と連番になります。
id属性を使って指定する場合にはgetElementByIdを使います。
（４）：document.getElementById("myIMG")
DOMに対応しているブラウザでは上記（１）〜（４）でなく直接名前を使うこともできます。
（５）：myIMG
画像を入れ替えるには上記の方法で指定された画像オブジェクトのsrcに入れ替えたい画像URLを入れます。それぞれの書き方で以下のようになります。
■（１）の場合
<html>
<head>
<title></title>
<script language="JavaScript"><!--
function setImgSrc(imgURL)
{
document.myIMG.src = imgURL;
}
// --></script>
</head>
<body>
<img src="photo1.jpg" name="myIMG"><br>
<a href="javascript:setImgSrc('photo1.jpg')">photo1.jpgに入れ替える</a><br>
<a href="javascript:setImgSrc('photo2.jpg')">photo2.jpgに入れ替える</a><br>
</body>
</html>
■（２）の場合
<html>
<head>
<title></title>
<script language="JavaScript"><!--
function setImgSrc(imgURL)
{
document.images["myIMG"].src = imgURL;
}
// --></script>
</head>
<body>
<img src="photo1.jpg" name="myIMG"><br>
<a href="javascript:setImgSrc('photo1.jpg')">photo1.jpgに入れ替える</a><br>
<a href="javascript:setImgSrc('photo2.jpg')">photo2.jpgに入れ替える</a><br>
</body>
</html>
■（３）の場合
<html>
<head>
<title></title>
<script language="JavaScript"><!--
function setImgSrc(imgURL)
{
document.images[0].src = imgURL;
}
// --></script>
</head>
<body>
<img src="photo1.jpg" name="myIMG"><br>
<a href="javascript:setImgSrc('photo1.jpg')">photo1.jpgに入れ替える</a><br>
<a href="javascript:setImgSrc('photo2.jpg')">photo2.jpgに入れ替える</a><br>
</body>
</html>
■（４）の場合
<html>
<head>
<title></title>
<script language="JavaScript"><!--
function setImgSrc(imgURL)
{
document.getElementById("myIMG").src = imgURL;
}
// --></script>
</head>
<body>
<img src="photo1.jpg" id="myIMG"><br>
<a href="javascript:setImgSrc('photo1.jpg')">photo1.jpgに入れ替える</a><br>
<a href="javascript:setImgSrc('photo2.jpg')">photo2.jpgに入れ替える</a><br>
</body>
</html>
■（５）
<html>
<head>
<title></title>
<script language="JavaScript"><!--
function setImgSrc(imgURL)
{
myIMG.src = imgURL;
}
// --></script>
</head>
<body>
<img src="photo1.jpg" id="myIMG"><br>
<a href="javascript:setImgSrc('photo1.jpg')">photo1.jpgに入れ替える</a><br>
<a href="javascript:setImgSrc('photo2.jpg')">photo2.jpgに入れ替える</a><br>
</body>
</html>
次回はマウスが画像に乗ったら入れ替える方法について説明します。