Jsp - 이미지 제어
2020. 6. 16. 11:01ㆍJsp
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
|
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
//window(창) - location(주소줄)
//- history(방문기록)
//- document(html문서) ->image,link,layer...
// - form(로그인창)->text,password,textarea
// -checkbox, radio
// -select - option
//window.history.변수 제목 document.title 배경색 document.bgColor
// 글자색 document.fgColor 링크색 document.linkColor
//window.history.함수() 문서안에 글자쓰기 document.write()
//
//window.document.images[0].변수
//document.images[0].src // document.images[0]name
//document.images[0]width// document.images[0]height // document.images[0]border
//window.document.images[0].함수()
function fun1() {
alert(document.images[0].src);
alert(document.images[0].name);
alert(document.images[0].width);
}
function fun2() {
document.img1.src="2.jpg";
document.img1.width="300";
document.img1.border="5";
}
function fun3() {
document.img2.src="4.jpg";
document.img2.width="300";
document.img2.border="5";
}
function fun4() {
document.img3.src="5.jpg";
}
function fun5() {
document.img3.src="4.jpg";
}
</script>
</head>
<body>
<h1>js2/test5.html</h1>
<img src="1.jpg" name="img1" width="500" height="300" border="1">
<input type="button" value="이미지정보" onclick="fun1()">
<input type="button" value="이미지정보변경" onclick="fun2()">
<img src="3.jpg" name="img2" width="500" height="300" border="1" onclick="fun3()">
<img src="4.jpg" name="img3" width="500" height="300" border="1" onmouseover="fun4()" onmouseout="fun5()">
</body>
</html>
|
cs |
이미지 하나로도 많은 걸 할 수 있다는 걸 배웠고
더블클릭과 마우스를 오버 하며 이미지 교체도 해보았는데 참 신기했다.
'Jsp' 카테고리의 다른 글
| Jsp - 버튼제어 (0) | 2020.06.16 |
|---|---|
| Jsp - input ,type (0) | 2020.06.16 |
| Jsp - 화면 색 변경 (0) | 2020.06.16 |
| Jsp - 페이지 이동 (0) | 2020.06.16 |
| Jsp - 주소확인 (0) | 2020.06.16 |