지루한 배경. 랜덤하게 바꾸자!
웹사이트의 고정된 배경이미지를 랜덤하게 보여주면, 방문하는 이들도 지루하지도 않고 신선함을 줄 수 있습니다.
가끔 생각하다가 요즘 제작하는 웹사이트에 적용해보고 괜찮아서 공유해볼까 올려 봅니다.
테스트 서버 링크에 예제 걸려있습니다. F5 새로고침하면 확인됩니다.
아래 팁외에 첨부된 압축파일에 해당 소스가 있으니 적용할 분들은 이미지찾아 헤매지말고 바로 올려 테스트해보세요.
아래 스크립트 중 이미지의 경로와 수열/처리할 이미지의 갯수 4개 /적용할 대상(body,id,class)만 확인하고 변화를 주면 됩니다. 어느 브라우저에서나 잘 처리됩니다.
<head>에 삽입된 내용
<script src="http://code.jquery.com/jquery-1.8.3.js"></script>
<script>
$(document).ready(function(){
var numberOfImages=4;
var imageNum = Math.round(Math.random()*(numberOfImages-1))+1;
var imgPath=('./images/randombg_'+imageNum+'.png');
$('#mainbgs').css('background-image', ('url("'+imgPath+'")'));
});
</script>
<style type="text/css">
#mainbgs {
height: 500px;
padding: 20px 0 0 20px;
font-family: "맑은 고딕";
font-size: 20pt;
color: #099;
font-weight: bold;
letter-spacing: -1pt;
background-repeat: no-repeat;
background-position: center top;
}
</style>
-------------------------------------------------------------------
<body>에 삽입된 내용
<div id="mainbgs">
배경이미지가 랜덤하게 바뀌는 DIV
</div>
찾던분들에게 도움이 될랑가 모르겠네요. 이상입니다.
가끔 생각하다가 요즘 제작하는 웹사이트에 적용해보고 괜찮아서 공유해볼까 올려 봅니다.
테스트 서버 링크에 예제 걸려있습니다. F5 새로고침하면 확인됩니다.
아래 팁외에 첨부된 압축파일에 해당 소스가 있으니 적용할 분들은 이미지찾아 헤매지말고 바로 올려 테스트해보세요.
아래 스크립트 중 이미지의 경로와 수열/처리할 이미지의 갯수 4개 /적용할 대상(body,id,class)만 확인하고 변화를 주면 됩니다. 어느 브라우저에서나 잘 처리됩니다.
<head>에 삽입된 내용
<script src="http://code.jquery.com/jquery-1.8.3.js"></script>
<script>
$(document).ready(function(){
var numberOfImages=4;
var imageNum = Math.round(Math.random()*(numberOfImages-1))+1;
var imgPath=('./images/randombg_'+imageNum+'.png');
$('#mainbgs').css('background-image', ('url("'+imgPath+'")'));
});
</script>
<style type="text/css">
#mainbgs {
height: 500px;
padding: 20px 0 0 20px;
font-family: "맑은 고딕";
font-size: 20pt;
color: #099;
font-weight: bold;
letter-spacing: -1pt;
background-repeat: no-repeat;
background-position: center top;
}
</style>
-------------------------------------------------------------------
<body>에 삽입된 내용
<div id="mainbgs">
배경이미지가 랜덤하게 바뀌는 DIV
</div>
찾던분들에게 도움이 될랑가 모르겠네요. 이상입니다.
첨부파일
|
댓글 작성
댓글을 작성하시려면 로그인이 필요합니다.
로그인하기
댓글 5개
http://bikedb.co.kr/ver2/shop
집의 컴퓨터에서는 안보이더니 회사컴에서는
http://jeong6612.cafe24.com/
에서 이렇게 보입니다.
디폴트css에 이미지주소를 절대주소로 처리하니까 보이네요.
head.php 에 이렇게 해봐도 안되고
<script>
.body { background:url('http://jeong6612.cafe24.com/images/bg_1.jpg ')no-repeat center top; }
</script>
shop.css 와 스킨의 shop 의 style.css 에도 코드를 넣어봐도 쇼핑몰페이지에는 안나오네요.
좀 도와 주세요.