- Q10
- いろいろ調べて、記述してみました…が
- 画像ファイル名を任意に設定する方法はないものかと。
- この場合は、ファイル名が0から始まるという縛りがあります。
- CSSに cursor:pointer; を記述するとそれっぽいね。
- CSSのリセットを忘れるとバチが当たるね。
<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Q10</title>
<style>
html, body, img, p{
margin: 0;
padding: 0;
line-height: 1.0;
}
img{
vertical-align: bottom;
cursor: pointer;
}
#container{
width: 840px;
margin: 0 auto;
padding-top: 120px;
}
</style>
</head><body>
<div id="container">
<p><img id="imageArea" onclick="imgChange()" src="img/ph0.jpg"></p>
</div>
<script>
var img=new Array;
for(i=0; i<=4; i++ )
{
img[i]=new Image();
img[i]='img/ph'+i+'.jpg';
console.log(img[i]);
}
var i=0;
function imgChange()
{
if(i==4)
{
i=0
}
else
{
i++
};
document.getElementById('imageArea').src=img[i];
};
</script></body>
</html>
