웹개발
[명품 웹 프로그래밍] 9장 예제 9-14, onload로 이미지 크기 알아내기
hatch
2021. 12. 11. 18:05
728x90
반응형
실행 화면
 |
 |
 |
<자바스크립트 코드>
<!DOCTYPE html>
<html><head><meta charset="UTF-8">
<title>x</title>
</head>
<body onload="changeImg()">
<h3>onload로 이미지 출력</h3>
<hr>
<form>
<select id="sel" onchange="changeImg()">
<option value="media/apple.png">사과
<option value="media/banana.png" selected>바나나
<option value="media/mango.png">망고
</select>
<span id="mySpan">이미지 크기</span>
</form>
<img id="myImg" src="media/apple.png">
<script>
function changeImg() {
var img = document.getElementById("myImg");
var sel = document.getElementById("sel");
//선택된 옵션 인덱스, 0 1 2
var index = sel.selectedIndex;
img.src = sel.options[index].value;
img.onload = function() {
var mySpan = document.getElementById("mySpan");
mySpan.innerHTML = img.width + "x" + img.height;
}
}
</script></body></html>1. 복습(필)
- 인덱스 selectedIndex; 를 활용해 선택 옵션 인덱스 보이기
- sel.options[index].value; - option의 value 값 출력
- img.onload = function() { ;} - 이미지 로딩 완료되면 발생