마우스 오버 이미지 배너 만들기

마우스 오버 이미지 배너 만들기



1. CSS의 background 

 <div id="rightBanner"></div>



<style>

    #rightBanner {

        width: 250px;   /* 배너의 가로 사이즈 설정 */

        height: 167px;  /* 배너의 세로 사이즈 설정 */

        background: url('http://cfile25.uf.tistory.com/T250x250/197E8B3E4F52C12926118A') no-repeat center;  /* 배너의 기본 이미지를 백그라운드로 설정 */ 

    }

    #rightBanner:hover {

        background: url('http://cfile24.uf.tistory.com/T250x250/176CF9414F493C56141FD9') no-repeat center;  /* 배너의 마우스오버 이미지를 백그라운드로 설정 */

    }

</style>





2. <img> 태그와 inline 자바스크립트 

<img id="leftBanner" src="http://cfile24.uf.tistory.com/T250x250/155E5D044B71F5D55435A2" onmouseover="this.src='http://cfile21.uf.tistory.com/T250x250/156F9E0D4B876FBD50FCD6'" onmouseout="this.src='http://cfile24.uf.tistory.com/T250x250/155E5D044B71F5D55435A2'"></img>





3. <img> 태그와 자바스크립트 

<img id="centerBanner" src="http://cfile1.uf.tistory.com/T250x250/163A8B274C350DAF3C9E6E"></img>

<script>

(function(d) {

    var img = d.getElementById("centerBanner");

    img.onmouseover = function () {

        this.src = "http://cfile2.uf.tistory.com/T250x250/113A8B274C350DAB3B45C1";

    };

    img.onmouseout = function () {

        this.src = "http://cfile1.uf.tistory.com/T250x250/163A8B274C350DAF3C9E6E";

    };

}(document));

</script>







4. <img> 태그 2개와 자바스크립트

<div id="bannerWrapper">

        <img id="frontImage" src="http://cfile22.uf.tistory.com/T250x250/2002CD414F4869192D99FA"/>

        <img src="http://cfile24.uf.tistory.com/T250x250/203E5A424F471E3025FA01"/>

</div>





<style>

    #bannerWrapper {

        position: relative;     /* 하위 태그가 상대적인 위치를 가질 수 있도록 설정 */

    }

    #bannerWrapper img {

        position: absolute;   /* img 태그들이 겹쳐질 수 있게, 다른 태그에 영향을 주지 않게 설정 */

    }

    #bannerWrapper #frontImage {

        z-index: 1;    /* 앞에 나올 이미지를 설정 */

    }

    #bannerWrapper:hover #frontImage {

        display: none;  /* 마우스오버가 되면 앞에 나온 이미지를 숨김 */

    }

</style>



5.  <div> 태그의 overflow:hidden과 <img> 태그 1개와 CSS 



<div id="verticalBannerWrapper">

        <img id="verticalBannerImg" src="http://cfile28.uf.tistory.com/image/2347025052E59D691D96CF"/>

</div>

<style>

    #verticalBannerWrapper {

        overflow: hidden;   /* div의 높이/넓이보다 커지는 경우 보여주지 않도록 설정*/

        height: 400px;      /* 보여줄 배너의 높이 */

        width: 265px;       /* 보여줄 배너의 넓이 */

        position: relative; /* 내부의 태그가 상대적으로 움직일 수 있도록 설정 */

    }

    #verticalBannerImg {

        position: absolute; /* 위치 변경이 다른 태그에 영향을 주지 않도록 설정 */

    }



    #verticalBannerWrapper:hover #verticalBannerImg {

        top: -400px;    /* 마우스 오버가 됐을 때 img 태그를 400px만큼 올리도록 설정 */

    }

</style>







저작권 : http://unikys.tistory.com/336