[java script] 스크롤 기능 + 하나의 이미지 절반...
본문
그누보드5 에 지금 보고 계시는 오른쪽 하단에 화살표키를 코드를 구현하고 싶은데, 쉽지 않네요...
그림을 보니, top_btn.png,center_btn.png,bottom_png 화일로 구성되어 있고
top_btn.png화일을 놓고 보면, 그림이미지를 세로로 반으로 놓아, 마우스가 떠나면 위의 절반(회색)으로
표시되고, 마우스가 떠나면 아래의 절반(보라색)으로 출력되게 하는게 잘 안되네요...(onmouseover 를 쓰는것 같은데....)
그리고 버튼을 클릭했을때 각각 위,중간,아래로 가게 만들고 싶습니다..
혹시 누가 힌트라도 주시면 감사하겠습니다.
width:100%;height:50%로 줄이면 그림자체가 반으로 줄어들어서....
답변 1
css에서 해당 이미지를 background 처리하고 background-position 으로 위치 잡아주면 됩니다 :)
background-position 의 값은 x(가로),y(세로) 좌표순서입니다.
ex)
상 하 로 구성된 이미지를 버튼으로 만들 경우 (높이값 : 한 이미지 당 높이값 50px = total 100px)
마우스 오버 하기 전 이미지는 해당 영역의 좌측 상단을 기준으로 0, 0 이어야 하고
오버시에는 상단으로 -50px만큼 이동해야해서 0, -50 이어야 합니다.
마우스 오버 전 : background:버튼이미지; background-position: 0px 0px; background-repeat:no-repeat;
마우스 오버 후 : background:버튼이미지; background-position: 0px -50px; background-repeat:no-repeat;
