티스토리 뷰


참고링크 : http://jaweb.co.kr/study/35.php

리스트 사진 (1.jpg)




실제 이미지 사진 (2.jpg)






사진은 상당히 허접한데...

내용이 뭐냐면

2.jpg 라는 파일이 있다고 쳤을때

위에처럼 보여지게 하는 소스다.

마우스 오버시 우측에 있는 모양이 보여지게 된다.

소스는 간단하게만 작성해둔상태.. 정리할거 하고 class 로 묶은 뒤 position 만 바꿔서 쓰면 문제가 없을거로 보인다.

아래 펑션은

bol 값이 true인 경우 50px 우측으로. false 인 경우 0으로 움직이게끔 작업 해놓은 것이다.

이는 스크립트의 style.backgroundPosition 속성을 이용해 작업한 것..

pos 는 원래의 position height 값을 적어주면 된다.


<style type="text/css">
 
   #gm {
      width:50px;
      height:25px;
      background: url(./image/2.jpg);
      cursor:pointer;
   }
 
   #gm2 {
      width:50px;
      height:25px;
      background: url(./image/2.jpg);
   background-position:0 -25px;
      cursor:pointer;
   }
 
   #gm3 {
      width:50px;
      height:25px;
      background: url(./image/2.jpg);
   background-position:0 -50px;
      cursor:pointer;
   }
 
</style>
 
<script type="text/javascript">
 
<!--
 function on_spr(bol,val,pos){
  num=(bol ? 50:0);
  val.style.backgroundPosition = num + "px "+ pos +"px";
 }
//-->
 
</script>
 
<div id="gm" onmouseover="on_spr(true,this,0);" onmouseout="on_spr(false,this,0);"></div>
<div id="gm2" onmouseover="on_spr(true,this,-25);" onmouseout="on_spr(false,this,-25);"></div>
<div id="gm3" onmouseover="on_spr(true,this,-50);" onmouseout="on_spr(false,this,-50);"></div>
 
</div>
댓글
댓글쓰기 폼