이미지스크롤바만들기

 

 

소스 다운 받기

imgscroll.zip

 

 

bg.gif, drag.gif- 이런식으로 백그라운드 이미지 하나 드래그 할 수 있는 이미지하나를 만들어 주세여

style.css - 글씨색,크기,스크롤바색등을 수정해준다

scroll.js - 한글로 설명이 써져있는 부분만 맞게 수정해준다.

imgscroll -
< TABLE cellSpacing=0 cellPadding=0 width=300 border=0> ->테이블넓이

 

  <TBODY>

  <TR>

    <TD>

<IMG height=300 src="bg.gif" width=300 border=0> ㅡ>배경이미지주소, 넓이 높이

</TD></TR></TBODY></TABLE>

<SPAN id=up style="Z-INDEX: 1; LEFT: 286px; WIDTH: 9px; POSITION: absolute; TOP:10px; HEIGHT: 1px"></SPAN> -> 스크롤될 이미지가 떨어져 있는 위치 왼쪽에서 286필셀

<SPAN id=down style="Z-INDEX: 2; LEFT:286px; WIDTH: 9px; POSITION: absolute; TOP: 319px; HEIGHT: 1px"></SPAN> -> 스크롤될 이미지가 떨어져 있는 위치 왼쪽에서 286필셀

<SPAN id=drag style="Z-INDEX: 3; LEFT:286px; WIDTH: 9px; POSITION: absolute; TOP: 23px; HEIGHT: 13px"> -> 스크롤될 이미지가 떨어져 있는 위치 왼쪽에서 286필셀, 높이 위에서 23픽셀

<IMG src="drag.gif"></SPAN>

<SPAN id=ruler style="Z-INDEX: 4; LEFT: 286px; WIDTH: 9px; POSITION: absolute; TOP:23px; HEIGHT: 13px"></SPAN> -> 스크롤될 이미지가 떨어져 있는 위치 왼쪽에서 286필셀, 높이 위에서 23픽셀

<SPAN id=contentClip style="Z-INDEX: 5; LEFT: 9px; VISIBILITY: visible; OVERFLOW: hidden; WIDTH: 275px; CLIP: rect(0px 275px 280px 0px); POSITION: absolute; TOP: 18px; HEIGHT: 280px"> ->  내용이 보여질 부분의 위치 LEFT - 왼쪽에서 떨어진 넓이, TOP - 위에서 떨어진 높이, WIDTH - 넓이, HEICHT - 높이, (0px 275px 280px 0px) - 275 - 넓이, 280- 높이