<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
#result img{
max-width: 300px;
}
</style>
</head>
<body>
<!-- 이미지출력이라는 버튼 생성 후 버튼 클릭시 prompt로 출력할
이미지의 번호를 입력해 주세요, 0번 입력시 0번 이미지 출력(총5개의 이미지를 배열로 넣기)
5번 이후 입력시 해당번호의 이미지는 없습니다 -->
<button type="button" onclick="writeImage()">이미지출력</button>
<!-- onclick 또는 id 둘 중하나로 -->
<hr>
<div id="result"></div>
<script type="text/javascript">
//배열에 이미지
var imgarr=new Array();
//imgarr[0]="";
//imgarr.push(""); 둘 중 하나로
imgarr.push("../cat/IMG_5126.JPG");
imgarr.push("../cat/IMG_5188.JPG");
imgarr.push("../cat/IMG_5507.JPG");
imgarr.push("../cat/IMG_6535.JPG");
imgarr.push("../cat/IMG_6600.JPG");
var r=document.getElementById("result");
function writeImage() {
var idx=prompt("출력할 이미지의 번호 입력",0);
if(idx<0 || idx>4)
r.innerHTML="해당번호 불가능";
else
r.innerHTML="<img src=img'"+imgarr[idx]+"'>";
}
</script>
</body>
</html>
'JavaScript' 카테고리의 다른 글
210927_button,onchange (0) | 2021.09.27 |
---|---|
210927_image,button,zoom-in/out, (0) | 2021.09.27 |
210927_image,innerHTML,confirm,button (0) | 2021.09.27 |
210927_button,image(절대주소,상대주소) (0) | 2021.09.27 |
210927_button,location.href (0) | 2021.09.27 |