DIV 배경이미지를 자바스크립트로 랜덤 제어 예제
배경이미지 변경하기 예제를 통해 DIV사용법 및 CSS 배경설정 속성 학습, 자바스크립트 난수발생 함수 등을 학습 해 보도록 하겠습니다.
추가로 자바스크립트 배열도 사용하게 됩니다.
학습내용
- DIV 영역 CSS를 통한 배경 설정 하기
- 자바스크립트 난수 발생 함수를 통한 이미지 선택하기
- DIV 태그 설정 id를 통한 배경 이미지 경로 변경하기
소스
<!DOCTYPE html>
<html>
<head>
<title>테스트</title>
<script>
var fileNm = ['이미지1.png', '이미지2.png', '이미지3.png'];
function imgChange(){
var url = "url(" + fileNm[Math.floor(Math.random() * 3)] + ")";
document.getElementById("bgGround").style.backgroundImage = url;
}
</script>
</head>
<body>
<div id="bgGround" style="width:100%; height:500px; background-color:#464646; background-repeat:no-repeat; background-position:center;"></div>
<br>
<input type="button" value="이미지 변경" onclick="imgChange();" />
</body>
</html>
소스설명
- background-color:#464646 배경색상을 설정 합니다.
- background-repeat:no-repeat 배경에 이미지를 반복해서 표시하지 않도록 설정 합니다.
- background-position:center 배경이미지를 가운데로 정렬합니다.
- var fileNm = ['이미지1.png', '이미지2.png', '이미지3.png'] 이미지 경로 값을 담은 배열을 생성합니다.
- Math.floor(Math.random() * 3) 0~2까지의 난수를 발생 시킵니다.
- document.getElementById("bgGround").style.backgroundImage div 설정 id값으로 해당 객체에 접근하여 배경이미지 값을 변경 합니다.
실습
- 이미지1
-이미지2
-이미지3
- DIV 영역(배경이미지가 변경 될 영역)
클릭하게 되면 난수를 발생하여 랜덤으로 DIV의 배경이미지가 변경 되는 것을 확인 할 수 있습니다.
'프로그래밍 > HTML, CSS, JavaScript' 카테고리의 다른 글
| [HTML/CSS] 카테고리 DIV 박스 만들기 (2) | 2018.06.17 |
|---|---|
| CSS를 이용한 문자열(제목) 자르기 / white-space, text-overflow (1) | 2018.05.27 |
| 자바스크립트 배열의 선언 및 사용법 예제 (10) | 2018.04.24 |
| 자바스크립트 배열(array)이란 무엇인가? (0) | 2018.04.23 |
| Margin, Padding 태그를 통한 DIv 여백 설정 알아보기 (4) | 2018.04.14 |
