웹페이지
JAVASCRIPT STEP 23 - 응용 예제2
IT의 큰손
2023. 4. 24. 16:21
728x90
★ 문제 1
- 아래와 같은 문서를 생성하시오.
- 조건
- 롤 오버 이미지를 구현하시오.
- 고양이 <-> 강아지
- cat01.jpg <-> dog01.jpg
■ HTML 코드
<div>
<img src="images/cat01.jpg" name="cat1">
<img src="images/cat02.jpg" name="cat2">
<img src="images/cat03.jpg" name="cat3">
<img src="images/cat04.jpg" name="cat4">
<img src="images/cat05.jpg" name="cat5">
</div>
■ CSS 코드
<style>
img {
width : 200px;
height : 200px;
margin : 5px;
}
</style>
■ JavaScript
<script>
cat1.onmouseover = m1;
cat1.onmouseout = m2;
cat2.onmouseover = m3;
cat2.onmouseout = m4;
cat3.onmouseover = m5;
cat3.onmouseout = m6;
cat4.onmouseover = m7;
cat4.onmouseout = m8;
cat5.onmouseover = m9;
cat5.onmouseout = m10;
function m1() {
cat1.src = 'images/dog01.jpg';
}
function m2() {
cat1.src = 'images/cat01.jpg';
}
function m3() {
cat2.src = 'images/dog02.jpg';
}
function m4() {
cat2.src = 'images/cat02.jpg';
}
function m5() {
cat3.src = 'images/dog03.jpg';
}
function m6() {
cat3.src = 'images/cat03.jpg';
}
function m7() {
cat4.src = 'images/dog04.jpg';
}
function m8() {
cat4.src = 'images/cat04.jpg';
}
function m9() {
cat5.src = 'images/dog05.jpg';
}
function m10() {
cat5.src = 'images/cat05.jpg';
}
</script>
■ 실행 결과
★ 문제 2
- 아래와 같은 문서를 생성하시오.
- 조건
- 롤 오버 이미지를 구현하시오.
- 버튼을 클릭하면 새창으로 이미지를 띄우시오.
- dog01.jpg(기본 크기)
- dog01_big.jpg(큰 크기)
■ HTML 코드
<table>
<tr>
<td>
<a href="#" data-no="1" id="dog1">강아지1</a>
<a href="#" data-no="2" id="dog2">강아지2</a>
<a href="#" data-no="3" id="dog3">강아지3</a>
<a href="#" data-no="4"
id="dog4">강아지4</a>
<a href="#" data-no="5"
id="dog5">강아지5</a>
</td>
<td><img src="images/dog01.jpg" name="img"></td>
</tr>
</table>
■ CSS 코드
<style>
<style>
body {
margin: 25px;
}
table {
border: 1px solid #A9A9A9;
border-collapse: collapse;
width: 600px;
}
table td {
border: 1px solid #A9A9A9;
text-align: center;
}
table tr td a {
display: block;
margin: 10px;
text-decoration: none;
color: #444;
border: 1px solid #A9A9A9;
border-radius: 5px;
background-color: #eee;
padding: 5px 10px;
}
</style>
■ JavaScript
<script>
var img = document.all.img;
document.all.dog1.onmouseover = m1;
document.all.dog2.onmouseover = m2;
document.all.dog3.onmouseover = m3;
document.all.dog4.onmouseover = m4;
document.all.dog5.onmouseover = m5;
function m1() {
img.src = 'images/dog01.jpg';
}
function m2() {
img.src = 'images/dog02.jpg';
}
function m3() {
img.src = 'images/dog03.jpg';
}
function m4() {
img.src = 'images/dog04.jpg';
}
function m5() {
img.src = 'images/dog05.jpg';
}
</script>
■ 실행 결과
★ 문제 3
- 아래와 같은 문서를 생성하시오.
- 조건
- 롤 오버 이미지를 구현하시오.
- img01.jpg <-> img04.jpg
- img02.jpg <-> img05.jpg
- img03.jpg <-> img06.jpg
- 이미지에 맞게 텍스트를 변경하시오.
■ HTML 코드
<div>
<img src="images/img01.jpg" id="ski" value = "스키">
<img src="images/img02.jpg" id="flower" value = "해바라기" >
<img src="images/img03.jpg" id="tree" value ="나무">
</div>
<input type="text" id="txt" value="">
■ CSS 코드
<style>
div {
border : 1px solid black;
width : 540px;
margin : 10px;
padding : 10px;
}
#txt {
width : 540px;
margin : 10px;
padding : 10px;
color : red;
font-size : 20px;
border : 0px solid white;
font-weight: bold;
}
</style>
■ JavaScript
<script>
var img1 = document.all.ski;
var img2 = document.all.flower;
var img3 = document.all.tree;
var txt = document.all.txt;
img1.onmouseover = m1;
img1.onmouseout = m2;
img2.onmouseover = m3;
img2.onmouseout = m4;
img3.onmouseover = m5;
img3.onmouseout = m6;
function m1() {
img1.src = 'images/img04.jpg'
txt.value = '\'스키\'타는 사람이 \'당근\'으로 변했습니다.'
}
function m2() {
img1.src = 'images/img01.jpg'
txt.value = ''
}
function m3() {
img2.src = 'images/img05.jpg'
txt.value = '\'해바라기\'가 \'피망\'으로 변했습니다.'
}
function m4() {
img2.src = 'images/img02.jpg'
txt.value = ''
}
function m5() {
img3.src = 'images/img06.jpg'
txt.value = '\'나무\'가 \'개\'가 됐습니다.'
}
function m6() {
img3.src = 'images/img03.jpg'
txt.value = ''
}
</script>
■ 실행 결과
★ 문제 4
- 아래와 같은 문서를 생성하시오
- 조건
- 패턴을 그리고 입력 버튼을 누르시오.
- Password : 'L'
■ HTML 코드
<h1>Pattern Lock</h1>
<div style="text-align: center;">
<img src="images/rect_icon01.png" data-no="1">
<img src="images/rect_icon02.png" data-no="2">
<img src="images/rect_icon03.png" data-no="3"><br>
<img src="images/rect_icon04.png" data-no="4">
<img src="images/rect_icon05.png" data-no="5">
<img src="images/rect_icon06.png" data-no="6"><br>
<img src="images/rect_icon07.png" data-no="7">
<img src="images/rect_icon08.png" data-no="8">
<img src="images/rect_icon09.png" data-no="9">
</div>
<div style="text-align: center;">
<input type="button" value="RESET" onclick="reset();">
<input type="button" value="INPUT" onclick="input();">
</div>
■ CSS 코드
<style>
h1 {
text-align: center;
color : gray;
}
img { border: 10px solid #A9A9A9; margin: 10px; }
input { border: 10px solid #A9A9A9; padding: 5px 70px; font-size: 1.7em; margin: 10px 5px; }
</style>
■ JavaScript
<script>
var list;
var pw = "";
window.onload = function() {
list = document.images;
for (var i=0; i<list.length; i++) {
list[i].onmouseover = function(event) {
pw += getNum(event.target.dataset['no']);
event.srcElement.src = "images/rect_icon10.png";
};
}
};
function reset() {
for (var i=0; i<list.length; i++) {
list[i].src = "images/rect_icon0" + (i+1) + ".png";
}
pw = "";
}
function input() {
if (pw == "14789") {
location.href = "https://maengmo.tistory.com/";
} else {
alert("패턴이 올바르지 않습니다!!");
reset();
}
}
function getNum(url) {
var index = url.lastIndexOf(".");
return url.substr(index-1, 1);
}
</script>
■ 실행 결과
728x90