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() { ;} - 이미지 로딩 완료되면 발생
'웹개발' 카테고리의 다른 글
[명품 웹 프로그래밍] 9장 예제 9-17, 선택된 라디오버튼 알아내기 (0) | 2021.12.12 |
---|---|
[명품 웹 프로그래밍] 9장 예제 9-15, new Image()로 이미지 로딩 (0) | 2021.12.12 |
[명품 웹 프로그래밍] 8장 실습문제 9, 라면 끓이는 순서 입력받기 (0) | 2021.12.11 |
[명품 웹 프로그래밍] 8장 실습문제 7, 클릭할 때마다 그림 회전 (0) | 2021.12.11 |
[명품 웹 프로그래밍] 8장 실습문제 5, 카드 넘기기 (0) | 2021.12.11 |