ywork2020.com

Title

メディア要素のソースを操作する

目次 (INDEX)

srcとは

ここで説明する src とは次の語句からなる javascript のプロパティです。
source
読み: ソース
意味: 源、資源、元

目次に戻る

srcプロパティの概要

このプロパティは、メディア要素の情報源であるURLを取得、または設定することができます。

ソースとは「源」という意味の単語です。 メディアエレメントのソースとは、その媒体要素の情報源を格納するプロパティという意味になります。 つまり、媒体要素のsrcプロパティにアクセスすることで、その要素のメディアソースのURLを取得したり変更することができるということです。

具体例を挙げると、img要素のsrc属性にアクセスして画像ファイルのURLを取得したり変更したりできるということです。

目次に戻る

構文

サンプルを見る前に構文を確認しておきます。

var mediaUrl = HTMLMediaElement.src;
HTMLMediaElement.src = mediaUrl;

目次に戻る

サンプルコードと実行結果

ここでは、6つのimg要素を使用しています。 1つは拡大画像の媒体として使用し、残りの5つはサムネイルの媒体として使います。 サムネイルのimg要素にはonmouseover属性があり、サムネイルの上にマウスポインタが乗れば、指定した関数を実行します。 関数の名前はonMouseOverとしています。このonMouseOverには引数があり、this.srcとしています。 これは、このサムネイルのsrc属性のURLを関数に渡すということになり、scriptコードのreceiveSourceにデータが渡されます。

つまり、サムネイルの上にマウスポインタが乗れば、scriptで作成してあるonMouseOver関数が実行され、その関数にサムネイルのsrc属性のURLが渡されます。 onMouseOver関数では、識別子にidImgBigをもつ要素をmedElmImgBigという変数で参照できるようにしておき、そのsrcプロパティにreceiveSourceの値を代入しています。

サンプルコード: HTML
<body>
	<div>
		サムネイル:<br>
		<img src="cat1.jpg" alt="猫のイラストサムネイル1" width="15%" onmouseover="onMouseOver(this.src)">
		<img src="cat2.jpg" alt="猫のイラストサムネイル2" width="15%" onmouseover="onMouseOver(this.src)">
		<img src="cat3.jpg" alt="猫のイラストサムネイル3" width="15%" onmouseover="onMouseOver(this.src)">
		<img src="cat4.jpg" alt="猫のイラストサムネイル4" width="15%" onmouseover="onMouseOver(this.src)">
		<img src="cat5.jpg" alt="猫のイラストサムネイル5" width="15%" onmouseover="onMouseOver(this.src)">
	</div>
	<div>
		拡大画像:<br>
		<img src="cat1.jpg" alt="猫のイラスト拡大画像" width="50%" id="idImgBig">
	</div>
</body>
  • 04-08: img (各img要素には予め src にサムネイル画像のURLを設定しています。また onmouseover 属性で onMouseOver 関数を呼び出すようにしています。関数に引き渡されるデータはthis.srcであり、その要素のsrc属性の値です。)
  • 12: img (このimg要素は拡大画像を表示する為の媒体です。script の onMouseOver 関数で、この要素の src の値を変更します。)
サンプルコード: script
<script>
	let medElmImgBig = document.getElementById("idImgBig");
	function onMouseOver(receiveSource){
		medElmImgBig.src = receiveSource;
	}
</script>
  • 02: medElmImgBig (これは変数です。これに idImgBig の識別子をもつ要素の参照機能を代入します。)
  • 03-05: onMouseOver (これは関数です。コード04行の内容を実行します。)
  • 04: medElmImgBig (idImgBig の識別子をもつ要素です。この要素の src プロパティに receiveSource の値を代入します。receiveSource の値はhtmlコードの this.src の値のことです。)
実行結果:
サムネイル:
猫のイラストサムネイル1 猫のイラストサムネイル2 猫のイラストサムネイル3 猫のイラストサムネイル4 猫のイラストサムネイル5
拡大画像:
猫のイラスト拡大画像

目次に戻る