javascriptオブジェクトで画像を表示する　２　json記述

javascriptのお勉強のメモ

さくっと、javascript（オブジェクト）で画像を表示する　２

json記述で画像を指定して、URLを付与する。

for文で画像（URL）の数だけ回して表示する。

画像を押すと指定のURLにとぶ。

altを追加した。

<script>

//json記述
var imgList = [
  { url: 'http://aaa/', img: 'img0.jpg', alt: 'AAA' },
  { url: 'http://bbb/', img: 'img1.jpg', alt: 'BBB' },
  { url: 'http://ccc/', img: 'img2.jpg', alt: 'CCC' },
  { url: 'http://ddd/', img: 'img3.jpg', alt: 'DDD' }
];

var src = imgList.length;
console.log(src);

for (var i = 0; i < src; i++ ){
document.write("<p>");
document.write("<a href='" + imgList[i].url + "'>");
document.write("<img src='" + imgList[i].img + "' alt='" + imgList[i].alt + "'>");
document.write("</a>");
document.write("</p>");
}
</script>

スタイルを調整して、四分割してみた。

<style>
/*div{
	width: 10%;
	overflow: hidden;
}
p img{
	width: 50%;
	float: left;
}*/
</style>
<script>

//json記述
var imgList = [
  { url: 'http://aaa/', img: 'img0.jpg', alt: 'AAA' },
  { url: 'http://bbb/', img: 'img1.jpg', alt: 'BBB' },
  { url: 'http://ccc/', img: 'img2.jpg', alt: 'CCC' },
  { url: 'http://ddd/', img: 'img3.jpg', alt: 'DDD' }
];

var src = imgList.length;
console.log(src );

document.write("<div>");
for (var i = 0; i < src; i++ ){
document.write("<p>");
document.write("<a href='" + imgList[i].url + "'>");
document.write("<img src='" + imgList[i].img + "' alt='" + imgList[i].alt + "'>");
document.write("</a>");
document.write("</p>");
}
document.write("</div>");
</script>