ブログデザイン備忘録～イメージ情報の取得

今回はページ内のイメージ（画像など）の情報を取得するjavascript関数やボタンなどを用いてイメージの表示切替などの制御する方法について紹介する。

1. テスト画像と表示

テスト画像として以下の画像を使用する。imgタグを用いて画像の保存先(PCのディレクトリやURL)を指定および表示サイズをwidth,heightを用いて指定する。

<p>
<img name="test1" src="https://cdn-ak.f.st-hatena.com/images/fotolife/A/ATATAT/20200812/20200812144206.png" alt="test1" width="300" height="150" >
</p>

<p>
<img name="test2" src="https://cdn-ak.f.st-hatena.com/images/fotolife/A/ATATAT/20200812/20200812153334.png" alt="test2" width="300" height="150" >
</p>

2. イメージ情報の取得

　イメージ情報として画像ソースのURLなど取得するにはdocument.name.srcを用いる。nameはimgタグ内で指定した画像の名前であり、上の例ではtest1およびtest2となる。 上の画像ソースのURLを取得するにはdocument.test1.srcとしてdocument.write()で表示すればよい。

<script>
var url1 = document.test1.src;
var url2 = document.test2.src;
document.write('test1のurl: ');
document.write(url1+"<br>\n");

document.write('test2のurl: ');
document.write(url2+"<br>\n");
</script>

以下に実行結果を示す。

　ページ内のイメージの数を返すには document.images.length;で取得することができる。

<script>
var inum = document.images.length;

document.write("イメージの数:");
document.write(inum);
</script>

以下の実行結果が返ってくる。

3. イメージの制御

document.name.srcはイメージ情報の取得だけでなく、書き込むことができる。例えばボタン等を押すことで画像を切り替える際に使用する。

<script>
function test_img1() {
   document.test3.src = "https://cdn-ak.f.st-hatena.com/images/fotolife/A/ATATAT/20200812/20200812144206.png";
}

function test_img2() {
   document.test3.src ="https://cdn-ak.f.st-hatena.com/images/fotolife/A/ATATAT/20200812/20200812153334.png";
}
</script>

<p style="font-weight:bold;"> 画像切り替え </p>
<img name="test3" src="https://cdn-ak.f.st-hatena.com/images/fotolife/A/ATATAT/20200812/20200812144206.png"  alt="test1" width="400" height="300" >
<p>
<button type=button onclick="test_img1()">test1表示</button>
<button type=button onclick="test_img2()">test2表示</button>
</p>

実行結果は以下の通りになり、test2表示ボタンを押すとtest1からtest2に画像が切り替わりtest2表示ボタンを押すとtest2からtest1に画像が切り替わる。

画像切り替え

test1表示 test2表示

3. まとめ

　今回はページ内のイメージ（画像など）の情報を取得するjavascript関数やボタンなどを用いてイメージの表示切替などの制御する方法について紹介した。