IT Study/Web

[JavaScript] JavaScript 사진 변환 기본 예제

도뿌리 2018. 8. 6. 14:08



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
56
57
58
59
60
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
body{
    background-color: black;
    link: red;
    vlink:blue;
}
#header,#nav{
    color: white;
}
 
</style>
</head>
<body>
<div id="header" align="center">
<h1>타히티의 사진</h1>
</div>
 
<div id="nav" align="center">
다음 사진을 클릭하면 확대 사진을 볼 수 있습니다.
<br><br>
<img alt="이미지 없음" src="tahiti01s.jpg" onclick="tahiti01()" >
<img alt="이미지 없음" src="tahiti02s.jpg" onclick="tahiti02()">
<img alt="이미지 없음" src="tahiti03s.jpg" onclick="tahiti03()">
<img alt="이미지 없음" src="tahiti04s.jpg" onclick="tahiti04()">
<img alt="이미지 없음" src="tahiti05s.jpg" onclick="tahiti05()">
 
</div>
<br><br>
 
<div id="big_picture" align="center">
    <img alt="이미지 없음" src="tahiti01.jpg">
</div>
 
<script type="text/javascript">
var picture = document.getElementById("big_picture");
 
function tahiti01() {
    picture.innerHTML="<img src='tahiti01.jpg'>";
}
function tahiti02() {
    picture.innerHTML="<img src='tahiti02.jpg'>";    
}
function tahiti03() {
    picture.innerHTML="<img src='tahiti03.jpg'>";
}
function tahiti04() {
    picture.innerHTML="<img src='tahiti04.jpg'>";
}
function tahiti05() {
    picture.innerHTML="<img src='tahiti05.jpg'>";
}
</script>
</body>
</html>
cs


결과 화면


저작자표시 비영리 동일조건