지루한 배경. 랜덤하게 바꾸자! > 그누보드5 팁자료실

그누보드5 팁자료실

지루한 배경. 랜덤하게 바꾸자! 정보

지루한 배경. 랜덤하게 바꾸자!

첨부파일

random_bg.zip (55.9K) 140회 다운로드 2014-03-05 00:31:58

본문

웹사이트의 고정된 배경이미지를 랜덤하게 보여주면, 방문하는 이들도 지루하지도 않고 신선함을 줄 수 있습니다.
가끔 생각하다가 요즘 제작하는 웹사이트에 적용해보고 괜찮아서 공유해볼까 올려 봅니다. 
테스트 서버 링크에 예제 걸려있습니다. 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>



찾던분들에게 도움이 될랑가 모르겠네요. 이상입니다.
추천
7

댓글 5개

그냥 배경 이미지를 넣어 보려니까 잘 안되네요.
 집의 컴퓨터에서는 안보이더니 회사컴에서는
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 에도 코드를 넣어봐도 쇼핑몰페이지에는  안나오네요.

좀 도와 주세요.
전체 2,411 |RSS
그누보드5 팁자료실 내용 검색

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIRSOFT