백그라운드 이미지 바꾸기
마우스 오버 하면 백그라운드 이미지 바꾸기
함수명 changeBg로 만들고
바디에서선택할 때 0번째 바디 중 css 스타일 백그라운드 이미지를 받아와서 그 이미지로 호출
onmouseover 하면 함수 changeBg를 호출 여기서 ('')안 내용은 바로 bimg가 됨
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>008 - 백그라운드 이미지 바꾸기</title>
<style type="text/css">
img {
width: 100px;
border: 2px solid white;
}
body {
background-image: url("img1.jpg");
background-size: 100%;
}
</style>
<script>
function changeBg(bimg){
var body=document.getElementsByTagName("body");
body[0].style.backgroundImage="url(" + bimg + ")";
}
</script>
</head>
<body>
<img src="mg1.jp2" onmouseover="changeBg('mg2.jpg')">
<img src="mg3.jpg" onmouseover="changeBg('mg3.jpg')">
<img src="mg4.jpg" onmouseover="changeBg('mg4.jpg')">
</body>
</html>
이렇게 배경으로 img1.jpg가 나오고
작은 이미지 위에 마우스를 올리면 배경이 그 이미지로 바뀐다
3번째 이미지에 마우스를 올린 모습
'JavaScript' 카테고리의 다른 글
| JavaScript for문 사용해 구구단 나타내자 (0) | 2017.03.30 |
|---|---|
| 이미지 토글 (0) | 2015.11.10 |
| for문 (0) | 2015.11.06 |
| 자바스크립트로 CSS 변경하기 (0) | 2015.11.05 |
| 홀짝 구분 (0) | 2015.11.05 |