- 이미지 선택하기
function drawimg(sel, img) {
//sel : select 태그
//img : name="img2"인 img 태그
//img.src : <img src = ""...>
//sel.value : select 태그의 선택 값
img.src = "../img/"+sel.value;
}
<select name="s" onchange="drawimg(this,document.img2)">
onchange : select 태그의 선택값이 달라지는 경우 발생되는 이벤트
this : 현재 객체. 이벤트가 발생된 객체. select 태그
document.img2 : document의 하위 객체 중 name 속성의 값이 img2인 객체
📌
<!DOCTYPE html>
<!-- src/main/webapp/20220922/javascript7.html
-->
<html>
<head>
<meta charset="UTF-8">
<title>이미지 선택하기</title>
<script type="text/javascript">
function drawimg(sel, img) {
//sel : select 태그
//img : img 태그
img.src = "../img/"+sel.value; //../img/apple.gif
}
</script>
</head>
<body>
<form name="f">
<table>
<!-- this : 현재객체. 이벤트 발생 객체. select 태그
document.img2 : name="img2"인 객체. <img 객체
-->
<tr><td><select name="s" onchange="drawimg(this,document.img2)">
<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>
</tr></table>
</form>
</body>
</html>
- 마우스를 이용한 이미지 변경
<a href="#" onmouseover="mover(0)" onmouseout="mout(0)">
# : 다른 페이지로 이동 안됨
onmouseover : 마우스 커서가 영역 내부에 있는 경우
onmouseout : 마우스 커서가 영역 외부에 있는 경우
📌
<!DOCTYPE html>
<!--src/main/webapp/20220922/javascript7.html
-->
<html>
<head>
<meta charset="UTF-8">
<title>마우스를 이용한 이미지 변경</title>
<script type="text/javascript">
function mover(n) { //mouseover 이벤트 발생시 호출되는 함수
//document.images : 문서내부의 모든 img 태그들. 이미지 태그의 배열 객체
document.images[n].src = "../img/"+n+"_over.jpg"
}
function mout(n) { //mouseout 이벤트 발생시 호출되는 함수
document.images[n].src = "../img/"+n+"_out.jpg"
}
</script></head><body>
<table> <tr><td height="60" align="center">
<a href="#" onmouseover="mover(0)"
onmouseout="mout(0)">
<img name="m0" src="../img/0_out.jpg" > <!-- document.images[0] -->
</a></td></tr>
<tr><td height="60" align="center">
<a href="#" onmouseover="mover(1)" onmouseout="mout(1)">
<img name="m1" src="../img/1_out.jpg" > <!-- document.images[1] -->
</a></td></tr>
<tr><td height="60" align="center">
<a href="#" onmouseover="mover(2)" onmouseout="mout(2)">
<img name="m2" src="../img/2_out.jpg" > <!-- document.images[2] -->
</a>
</td></tr>
<tr><td height="60" align="center">
<a href="#" onmouseover="mover(3)" onmouseout="mout(3)">
<img name="m3" src="../img/3_out.jpg" > <!-- document.images[3] -->
</a></td></tr>
</table>
</body>
</html>
'수업(국비지원) > JavaScript' 카테고리의 다른 글
| [JavaScript] 문자열 함수 (0) | 2023.04.18 |
|---|---|
| [JavaScript] TTS(Text to Speech) 연습 (0) | 2023.04.18 |
| [JavaScript] Math 클래스 사용, onchange 이벤트 (0) | 2023.04.18 |
| [JavaScript] prompt 메세지 (0) | 2023.04.18 |
| [JavaScript] window 객체 (0) | 2023.04.18 |