728x90
반응형
1. 자바스크립트 코드
<!DOCTYPE html>
<html><head><meta charset="UTF-8">
<title>x</title>
</head>
<body onload="changeImg()">
<h3>new Image()로 이미지 로딩</h3>
<hr>
<img style="border: 20px ridge wheat"
src="media/penguins.png" width="267" height="200" onclick="change(this)">
<script>
//배열에 저장된 이름 이미지를 미리 로딩
var files = ["media/penguins.png", "media/Tulips.png", "media/Desert.png", "media/Koala.png"];
//img 배열 및 객체 생성 후, files와 연결
var imgs = new Array();
for(var i = 0; i<files.length; i++) {
imgs[i] = new Image();
imgs[i].src = files[i];
}
var next = 1;
function change(img) {
img.src = imgs[next].src;
next ++;
next %= imgs.length;
}
</script>
</body>
</html>
'웹개발' 카테고리의 다른 글
| [명품 웹 프로그래밍] 9장 예제 9-18, 체크박스로 선택 물품 계산 (0) | 2021.12.12 |
|---|---|
| [명품 웹 프로그래밍] 9장 예제 9-17, 선택된 라디오버튼 알아내기 (0) | 2021.12.12 |
| [명품 웹 프로그래밍] 9장 예제 9-14, onload로 이미지 크기 알아내기 (0) | 2021.12.11 |
| [명품 웹 프로그래밍] 8장 실습문제 9, 라면 끓이는 순서 입력받기 (0) | 2021.12.11 |
| [명품 웹 프로그래밍] 8장 실습문제 7, 클릭할 때마다 그림 회전 (0) | 2021.12.11 |
