웹마스터 팁
page_full_width" class="col-xs-12" |cond="$__Context->page_full_width">
마우스 오버시에 텍스트 버튼느낌 style.css 와 자동 스크롤 기능
2002.06.27 11:31
<style>
<!--
body {
scrollbar-face-color:#F0F0F0;
scrollbar-shadow-color:gray;
scrollbar-highlight-color:#ffffff;
scrollbar-3dlight-color:#F0F0F0;
scrollbar-darkshadow-color:#ffffff;
scrollbar-track-color:#F0F0F0;
scrollbar-arrow-color:#F0F0F0
}
a:link { color: #595959; text-decoration: none}
a:visited { color: #595959; text-decoration: none}
a:active { color: #595959; text-decoration: none}
A:hover { color: #0099FF; text-decoration:none; position:relative; top:1; left:1;}
-->
</style>
<SCRIPT LANGUAGE="javascript">
function winscroll(){
window.scroll(window.event.clientX - 30,window.event.clientY -30)
}
document.onmousemove = winscroll
</SCRIPT>
위 스타일과 스크립트는 마우스가 텍스트에 오버시에 텍스트가 왼쪽으로1픽셀 그리고 위로 1픽셀 정도 움직여서 버튼에 느낌이 들게 하는 것입니다.
제 홈에 사용한 스크롤도 같이 올립니다.
그리고 스타일 밑에 스크립트는 마우스 움직임 만으로 스크롤을 움직일수 있는 스크립트입니다.
이 소스는 제로보드 관리자 모드에서 "그룹설정" 에서 "게시판 상단에 출력할 내용" 에 그대로 복사해서
넣으시면 그 효과를 보실수 있습니다.
스크립트의 경우 보드를 인클루트사용시에는 그 효과가 나타나지 않습니다.
많은 분들이 간단한 스크립트 만으로 홈페이지를 이쁘게 꾸미실수있습니다.
<!--
body {
scrollbar-face-color:#F0F0F0;
scrollbar-shadow-color:gray;
scrollbar-highlight-color:#ffffff;
scrollbar-3dlight-color:#F0F0F0;
scrollbar-darkshadow-color:#ffffff;
scrollbar-track-color:#F0F0F0;
scrollbar-arrow-color:#F0F0F0
}
a:link { color: #595959; text-decoration: none}
a:visited { color: #595959; text-decoration: none}
a:active { color: #595959; text-decoration: none}
A:hover { color: #0099FF; text-decoration:none; position:relative; top:1; left:1;}
-->
</style>
<SCRIPT LANGUAGE="javascript">
function winscroll(){
window.scroll(window.event.clientX - 30,window.event.clientY -30)
}
document.onmousemove = winscroll
</SCRIPT>
위 스타일과 스크립트는 마우스가 텍스트에 오버시에 텍스트가 왼쪽으로1픽셀 그리고 위로 1픽셀 정도 움직여서 버튼에 느낌이 들게 하는 것입니다.
제 홈에 사용한 스크롤도 같이 올립니다.
그리고 스타일 밑에 스크립트는 마우스 움직임 만으로 스크롤을 움직일수 있는 스크립트입니다.
이 소스는 제로보드 관리자 모드에서 "그룹설정" 에서 "게시판 상단에 출력할 내용" 에 그대로 복사해서
넣으시면 그 효과를 보실수 있습니다.
스크립트의 경우 보드를 인클루트사용시에는 그 효과가 나타나지 않습니다.
많은 분들이 간단한 스크립트 만으로 홈페이지를 이쁘게 꾸미실수있습니다.
댓글 5
-
☺Lifestory™
2002.08.12 11:46
좋은 팁 감사합니다 ^-^ -
김지현
2002.10.19 21:24
감사드려요~ 이쁘게 쓸게요^-^ -
양은우
2003.01.06 15:45
감사합니다. 잘쓰겠습니다. -
장군:P
2004.02.12 15:19
좋은팁 감사합니다. -
뒤엉킬늪
2008.11.12 03:12
멋지네요 이쁩니다:)
제목 | 글쓴이 | 날짜 |
---|---|---|
갑자기 관리자 페이지가 안보이거나 330 오류가 날 때는 이렇게 해결! [2] | 세라오빠 | 2011.04.13 |
[Css]필터 관련 스타일시트 속성 [1] | 웹엔진 | 2011.04.13 |
업데이트 어떻게 해야 오류 없이 되나요? [1] | 김농주 | 2011.04.12 |
1.4.5.2로 업데이트 후 짧은 주소가 제대로 되지 않으실때... [8] | 라르게덴 | 2011.04.12 |
레이아웃 위젯 권한 넣기 [14] | 해피해킹 | 2011.04.12 |
텍스타일 카테고리 글목록수 수정 | 신군임니돠 | 2011.04.12 |
내 PC에서 XE 빠르게 설치하는 방법 [7] | 차오이 | 2011.04.10 |
[모바일] 모바일웹에서 Pc버전갔다가 다시 모바일버전으로 갈라면 [1] | 푸름빠 | 2011.04.07 |
[XE] 1.4.5.x 업데이트 후 레이아웃 오류 수정법 [7] | SeklutZ | 2011.04.07 |
IE9에서 xeed 사용하기(파일첨부 및 Enter키) [2] | 전승남508 | 2011.04.05 |
P 개행처리를 BR처럼 | Garon | 2011.04.04 |
1.4.5 업데이트후 로그인 안되시는 분들 [3] | BlogJh | 2011.04.03 |
데이터이전 회원관련해서 알아야 할 사항 [2] | 푸름빠 | 2011.04.03 |
관리자페이지 레이아웃에 게시판을 달아보자 [3] | 푸름빠 | 2011.03.29 |
"현재 xe코어1.4.4.4버전에서는 익스플로어에서 페이지수정 등의 작업을 할때 에러가 자주 발생하곤 합니다." | 유샤인 | 2011.03.29 |
모두 새로 코딩된 선우님의 새로운 레이아웃.... | 유샤인 | 2011.03.28 |
게시판에 회원확장변수정보 받아서 표시하기 [3] | burster | 2011.03.26 |
BGM 넣기 및 간단한 제어 [2] | Elinoa | 2011.03.26 |
블루호스트(Bluehost)에서 XE 제로보드 및 텍스타일 블로그 서브도메인에 설치하기 [4] | TELSTER | 2011.03.25 |
1.4.4.2부터 게시판 신규게시물 작성이 안되던 문제 [2] | 운상유희 | 2011.03.25 |