728x90
반응형
<!-- src/main/webapp/2/imgex1.html -->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>이미지 선택하기</title>
<script type="text/javascript">
/*
function drawimg(sel,img) {
//sel : select 태그.
//img : name="img2"인 img 태그.
//img.src : <img src = ""...>
//sel.value : select 태그의 선택 값
img.src = "../img/" + sel.value;
}
*/
function drawimg() {
let sel = document.f.s //select 태그. name 속성으로 접근
let img = document.img2 //img 태그. name 속성으로 접근
img.src = "../img/" + sel.value;
}
</script>
</head>
<body>
<form name="f">
<table>
<tr><td>
<!--
onchange : select 태그의 선택값이 달라지는 경우 발생되는 이벤트
this : 현재 객체. 이벤트가 발생된 객체. select 태그
document.img2 : document의 하위 객체 중 name속성의 값이 img2인 객체
-->
<!-- <select name="s" onchange="drawimg(this,document.img2)"> -->
<select name="s" onchange="drawimg()">
<option value="strawberry.gif">딸기</option>
<option value=banana.jpg>바나나</option>
<option value="apple.gif">사과</option>
</select></td>
<td><img name="img2" src="../img/strawberry.gif" width="100"></td>
</table>
</form>
</body>
</html>Javascript 03 조건문.pdf
0.69MB
apple.gif
0.08MB
banana.jpg
0.02MB
strawberry.gif
0.09MB
728x90
반응형