指定した画像にアクセスする

説明

画像にアクセスするにはいくつかの方法があります。古いブラウザでも新しいブラウザでも問題なくアクセスできる方法がimages配列（連想配列）を利用したものです。HTML文書内で<img>タグが出現した順番にimages配列に格納されていきます。images配列は参照番号または<img>タグのname属性で指定した名前を指定することができます。
DOMが利用できるブラウザでは<img>タグにID名を指定しdocument.getElementById()を使って直接アクセスすることができます。これは<img>タグだけではなく他の一般的なタグのアクセスと同様です。また、getElementsByTagName()を使って特定の領域の<img>タグだけを抽出することができます。他にもノードにアクセスすることで画像へのアクセスが可能です。
prototype.jsライブラリやjQueryなどのライブラリでは、スタイルシートのクラス名やHTMLタグの階層構造を指定してアクセスすることができます。prototype.jsライブラリでは$$()、jQuery()では$()を使いパラメータにクラス名／階層構造を指定します。

JavaScriptテクニック ブック 　詳しい解説などはJavaScriptテクニック ブックを参照してください。

サンプルコード [実行]

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<title>JavaScript Sample</title>
<link rel="stylesheet" type="text/css" href="main.css" media="all">
<script type="text/javascript" src="prototype.js"></script>
<script type="text/javascript" src="main.js"></script>
</head>
<body>
<h1>指定した画像にアクセスする</h1>
<form action="./check.cgi" method="get" name="mainForm">
<input type="button" id="setButton" value="画像を変更">
</form>
<div>
<img src="images/01.jpg" name="photo1"> (name1)<br>
<img src="images/01.jpg" name="photo2"> (name2)<br>
<img src="images/01.jpg" id="photo"> (id)<br>
<img src="images/01.jpg" class="HDV"> (class)<br>
</div>
<div id="photoAlbum">
<img src="images/01.jpg"><br>
<img src="images/01.jpg" class="HDV"> (class)<br>
</div>
</body>
</html>
window.onload = function(){
document.getElementById("setButton").onclick = function(){
var imgURL = "images/02.jpg";
document.images[0].src = imgURL;
document.images["photo2"].src = imgURL;
document.getElementById("photo").src = imgURL;
$$(".HDV").each(function(obj){
obj.src = "images/02.jpg";
});
var root = document.getElementById("photoAlbum");
var childImg = root.getElementsByTagName("img");
childImg[0].src = imgURL;
}
}