탭, 내용과 같이 자동롤링

탭이 있고 탭에 해당된 내용이 있고 탭이 자동롤링 되야 한다.
그럼 탭이 자동롤링이 되면서 해당 내용도 보여줘야 할 것이다.
그리고 onmouseover 가 되면 자동롤링이 멈추며 onmouseout 이벤트에 다시 자동롤링이 되어야 할 것 이다.

전역변수 cnum에 현재 보여 주는 탭의 index number를 계속해서 저장해 주며 1씩 증가 시켜 준다.
탭의 갯수만큼 늘어 났다면 다시 1로 돌려 준다.
나머지는 cnum과 탭과 탭내용이 일치하면 className을 on으로 변경해 주고
setInterval 로 반복적으로 다시 호출한다. clearTimeout 은 setInterval를 정지 시켜 준다.

스크롤을 따라다니는 메뉴(고정 되어 있는 메뉴)

스크롤을 따라 다니는 메뉴 소스를 많이 보았을 것 이다.
허나 보통 돌아 다니는 스크립트는 일단 dotype을 선언 했을때 먹통이 되는 스크립트도 많고
간단해 보이는 것이 왜케 소스가 긴 것 인지.. -_-;
지금 설명 하려는 것은 css으로만 해당 기능을 구현 하는 방법 이다.
따라다니는 부드러운 느낌 보다는 고정 되어 있다는 느낌이 드는 것임으로 참고 하자.

일단 IE6.0을 제외한 다른 브라우저는 position: fixed 라는 속성으로 간단히 구현 할수 있다.
그런데 역시나 IE6.0은 다들 아시다시피 꼴통이라 이놈을 인지 하지 못한다.
그래서 넣어 준것이 top:expression(documentElement.scrollTop+10); 이놈.
documentElement.scrollTop 이것이 현재 스크롤의 높이 값을 던져 주고 +10 은
스타일에서 보면 top, left 를 각각 10px 씩 띄었다. 현재 스크롤 값에 10px를 더한 값이 top 속성 값이 되는 것이다.
<!–[if (IE 6)]> 이놈 안에 들어가 있는 소스는 IE6.0 에서만 불러온다.

투명이미지(png) IE6.0에서도 보이게 하기

png 이미지는 gif와 다르게 투명 이미지로 사용할 수 있다.
허나 IE6.0 버젼에서는 fiter를 사용해야 png의 특징을 살려서 사용할수 있다.

예제에서 사용한 이미지는 빨간색 동그라미에 투명한 그림자가 들어간 이미지 입니다.
보시다시피 그림자가 투명해서 바탕의 노란색을 살짝 살짝 보여주는 걸 볼수 있습니다.