images.src とは
- ここで説明する images とは次の語句からなる javascript の配列です。
- image
- 読み: イメージ
意味: 画像、images = 画像の複数形
- ここで説明する src とは次の語句からなる javascript のプロパティです。
- source
- 読み: ソース
意味: 源、資源、元
images.src の概要
images は Document インターフェースが提供する、ドキュメント内にある画像要素のコレクションです。
このコレクションはドキュメント内にある画像要素を参照できる生きた配列であり、 配列セレクターに インデックス番号、もしくは name 属性の値か id 属性の値を指定することで、特定の画像要素を操作することができます。
これは Document オブジェクトのプロパティです。 Document オブジェクトは document 変数、または Window オブジェクトの document プロパティから参照します。
また、src プロパティは 呼び出し元の要素がもつ src 属性 の値を参照し、操作することができます。
サンプルコードと実行結果
ここでは、images コレクションとコレクションからアクセスできる src プロパティの使い方を中心にサンプルを作成しました。
サムネイル画像にマウスポインターを乗せるとサムネイルの src 値を拡大画像の src 値に代入します。 これにより拡大画像はマウスポインターが乗ったサムネイルの画像と同期します。
サンプルコード: CSS
<style>
img{
width: 60px;
}
#idImgBig{
width: 320px;
}
</style>
サンプルコード: HTML
<head>
<style>...</style>
</head>
<body>
<div>
< span> サムネイル < /span><br>
<img src="../images/sample1.jpg" alt="イラストのサムネイル">
<img src="../images/sample2.jpg" alt="イラストのサムネイル">
<img src="../images/sample3.jpg" alt="イラストのサムネイル">
<img src="../images/sample4.jpg" alt="イラストのサムネイル">
<img src="../images/sample5.jpg" alt="イラストのサムネイル">
</div>
<div>
< span> 拡大画像 < /span><br>
<img src="../images/sample1.jpg" alt="イラストの拡大画像" id="idImgBig">
</div>
<script>...</script>
</body>
- 07, 08, 09, 10, 11: img (画像要素です。サムネイル画像を表示しています。)
- 15: img (画像要素です。拡大画像を表示しています。)
サンプルコード: script
<script>
let elmsImg = document.images;
for(i = 0; i < elmsImg.length; i++){
elmsImg[i].addEventListener("mouseover", function(){
document.images["idImgBig"].src = this.src;
});
}
</script>
- 02: elmsImg = document.images (elmsImg という変数に document.images のコレクションを代入しています。)
- 03-07: for(){ 処理 } (繰り返し処理です。i は 0 から elmsImg.length 未満の数値で 1 ずつ 増加していきます。)
- 04-06: elmsImg[i].addEventListener( eventString , handler ) (elmsImg[i] に mouseover イベントをバインドして関数をアタッチしています。)
- 05: document.images["idImgBig"].src = this.src; (images["idImgBig"].src に this.src を代入しています。ここでの This は elmsImg[i] のことを指しています。)
サムネイル
拡大画像