CSS 롤오버
옛날 부터 잘알려진 롤오버효과 링크에 마우스를 가져갔을떄 변화이다.텍스트와배경색을 이용한 간단한것부터 이미지를 이용하는 것까지 알아보자
텍스트 와 배경색이용
롤오버는 마우스를 올렸을때다 따라서 당연히a:hover이사용된다.먼저 간단한예로 텍스트와 배경이미지 변화를보자
a{ background:#fcc; color:#0f0;}
a:hover{background:#0F0; color:#fcc;}
위그림과 같이 마우스에 올렸을떄 변화이다
배경이미지이용
a:link, a:visited{
display:block; width:140px; heigth:30px;
/*이미지크기에 맞추기위해 가로세로 지정*/
background: url(image.gif) no- reapeat 0 0;}
a:hover{background: url(image_hover.gif) no- reapeat 0 0;}
이경우는 링크일 경우 윗그림(140*30) image.gif 로있고 마우스를 올리경우 image_hover.gif로 바뀌는 것이다. 이미지를 새로 만들고 경로만 바꿔주면 되니 간단하다. 자 그런데 좀더 주목해보자 "이미지를 새로"만든다고 말했듯이 이미지 두개가 필요하게 된다 그러면 만들기도 귀찮고, 또 여러 이미지가 있을경우 페이지 로딩시간도 길어진다.이를 해결할 방법이 픽시(pixy) 방법이다
픽시(pixy) 롤오버
그림을 두개상요안하는 방법은 뭘까? 당연히 하나로 합치는것 그리고 포지션을 바꿔주면 된다.예제를 보자
윗그림은 하나로 합친 모습이다 따라서 크기는 (280*30) 이다
a:link, a:visited{
display:block; width:140px; heigth:30px;
/*원하는 만큼 나올크기지정 전채이미지가 280*30이니까 반틈이 필요하다. */
background: url(image.gif) no-reapeat left top; /*평소는 이미지위치를 왼족으로*/}
a:hover{background: url(image_hover.gif) no-reapeat right top ;/*마우스를 올렸을떄 이미지를 오른쪽으로}
위와같이 한이미지에 적용할수 있다. 참고로 여기서는 그림을 가로로 합쳤지만 세로로합지고 이미지 위치를 평소는 top 마우스를 올렸을떄 bottom 해도 무방하다. 그리고 IE6의경우인데 다른 브라우저는 중복된경우 쓰지 않아도되지만 (예로 no-reapeat) 경우 a{}, a:hover{}에 모두 반드시 써줘야 한다
롤오버 :hover인 경우만 아니라 :visited ,:active경우도 위와같이 응용하면된다
댓글