롤오버 버튼 효과를 구현하려면 2개의 이미지가 필요하지만, 스타일 시트를 이용하여 한개의 이미지로 3가지 (보통,오버,클릭) 버튼의 효과를 구현할 수 있습니다
샘플을 참고 하세요
<!doctype html public "-//w3c//dtd html 4.0 transitional//en">
<html>
<head>
<title> jasko sample script </title>
<!---- [1단계] 아래 코드를 <HEAD> 와 <HEAD> 태그 사이에 붙여 넣으세요 --->
<style type="text/css">
<!--
/* 배경색을 지정합니다. 이 배경색을 바꾸려면 아래 버튼(.btnout)의 색상도 같이 수정해 주어야 합니다 */
body { background:gold;}
/* 버튼 메뉴 전체의 위치와 크기를 설정 합니다 */
#btn { position:absolute; top:10px; left:10; width:150px; z-index:1;}
/* 평상시 보여지는 버튼의 모양입니다 */
.btnout {
border:gold 1px solid;
padding:2 0 0 0;
margin:2px;
}
/* 마우스를 대었을때 보여질 버튼의 보양입니다 */
.btnup {
border-top: white 1px solid;
border-right: green 1px solid;
border-bottom: green 1px solid;
border-left: white 1px solid;
padding:0 0 0 0;
margin:2px;
}
/* 마우스를 클릭 했을때 보여질 모양입니다 */
.btndown {
border-top: black 1px solid;
border-right: white 1px solid;
border-bottom: white 1px solid;
border-left: black 1px solid;
padding:0 0 0 0;
margin:2px;
}
-->
</style>
</head>
<body>
<!---- [2단계] 아래의 방법으로 <BODY> 와 <BODY> 태그 사이에 붙여 넣으세요 --->
<div id=btn>
<a href="#" target="_blank"><span id=menu0 class=btnout><img src="button.gif" border=0 alt=""></span></a><br>
<a href="#" target="_blank"><span id=menu1 class=btnout><img src="button.gif" border=0 alt=""></span></a><br>
<a href="#" target="_blank"><span id=menu2 class=btnout><img src="button.gif" border=0 alt=""></span></a><br>
<a href="#" target="_blank"><span id=menu3 class=btnout><img src="button.gif" border=0 alt=""></span></a><br>
<a href="#" target="_blank"><span id=menu4 class=btnout><img src="button.gif" border=0 alt=""></span></a><br>
<a href="#" target="_blank"><span id=menu5 class=btnout><img src="button.gif" border=0 alt=""></span></a><br>
<a href="#" target="_blank"><span id=menu6 class=btnout><img src="button.gif" border=0 alt=""></span></a><br>
<a href="#" target="_blank"><span id=menu7 class=btnout><img src="button.gif" border=0 alt=""></span></a>
</div>
<SCRIPT language=JavaScript>
<!--
menuNumber = 8; // 전체 버튼의 갯수를 적어 주세요
maxWidth = 0;
for(i=0; i < menuNumber; i++){
menu = eval('menu' + i);
maxWidth = Math.max(maxWidth, menu.innerText.length);
menu.onselectstart = function(){return false}
menu.onmouseout = function(){
this.className = 'btnout';
}
menu.onmouseover = function(){
this.className = 'btnup';
}
menu.onmouseup = function(){
this.className = 'btnup';
}
menu.onmousedown = function(){
this.className = 'btndown';
}
}
for (i=0 ; i < menuNumber ; i++){
menu = eval('menu' + i);
menu.style.pixelWidth = maxWidth * 8;
}
-->
</SCRIPT>
<!------------------------- 여기까지 ------------------------------------>
</body>
</html><div class='small'>[이 게시물은 관리자님에 의해 2011-10-31 17:16:08 PHP & HTML에서 이동 됨]</div>
샘플을 참고 하세요
<!doctype html public "-//w3c//dtd html 4.0 transitional//en">
<html>
<head>
<title> jasko sample script </title>
<!---- [1단계] 아래 코드를 <HEAD> 와 <HEAD> 태그 사이에 붙여 넣으세요 --->
<style type="text/css">
<!--
/* 배경색을 지정합니다. 이 배경색을 바꾸려면 아래 버튼(.btnout)의 색상도 같이 수정해 주어야 합니다 */
body { background:gold;}
/* 버튼 메뉴 전체의 위치와 크기를 설정 합니다 */
#btn { position:absolute; top:10px; left:10; width:150px; z-index:1;}
/* 평상시 보여지는 버튼의 모양입니다 */
.btnout {
border:gold 1px solid;
padding:2 0 0 0;
margin:2px;
}
/* 마우스를 대었을때 보여질 버튼의 보양입니다 */
.btnup {
border-top: white 1px solid;
border-right: green 1px solid;
border-bottom: green 1px solid;
border-left: white 1px solid;
padding:0 0 0 0;
margin:2px;
}
/* 마우스를 클릭 했을때 보여질 모양입니다 */
.btndown {
border-top: black 1px solid;
border-right: white 1px solid;
border-bottom: white 1px solid;
border-left: black 1px solid;
padding:0 0 0 0;
margin:2px;
}
-->
</style>
</head>
<body>
<!---- [2단계] 아래의 방법으로 <BODY> 와 <BODY> 태그 사이에 붙여 넣으세요 --->
<div id=btn>
<a href="#" target="_blank"><span id=menu0 class=btnout><img src="button.gif" border=0 alt=""></span></a><br>
<a href="#" target="_blank"><span id=menu1 class=btnout><img src="button.gif" border=0 alt=""></span></a><br>
<a href="#" target="_blank"><span id=menu2 class=btnout><img src="button.gif" border=0 alt=""></span></a><br>
<a href="#" target="_blank"><span id=menu3 class=btnout><img src="button.gif" border=0 alt=""></span></a><br>
<a href="#" target="_blank"><span id=menu4 class=btnout><img src="button.gif" border=0 alt=""></span></a><br>
<a href="#" target="_blank"><span id=menu5 class=btnout><img src="button.gif" border=0 alt=""></span></a><br>
<a href="#" target="_blank"><span id=menu6 class=btnout><img src="button.gif" border=0 alt=""></span></a><br>
<a href="#" target="_blank"><span id=menu7 class=btnout><img src="button.gif" border=0 alt=""></span></a>
</div>
<SCRIPT language=JavaScript>
<!--
menuNumber = 8; // 전체 버튼의 갯수를 적어 주세요
maxWidth = 0;
for(i=0; i < menuNumber; i++){
menu = eval('menu' + i);
maxWidth = Math.max(maxWidth, menu.innerText.length);
menu.onselectstart = function(){return false}
menu.onmouseout = function(){
this.className = 'btnout';
}
menu.onmouseover = function(){
this.className = 'btnup';
}
menu.onmouseup = function(){
this.className = 'btnup';
}
menu.onmousedown = function(){
this.className = 'btndown';
}
}
for (i=0 ; i < menuNumber ; i++){
menu = eval('menu' + i);
menu.style.pixelWidth = maxWidth * 8;
}
-->
</SCRIPT>
<!------------------------- 여기까지 ------------------------------------>
</body>
</html><div class='small'>[이 게시물은 관리자님에 의해 2011-10-31 17:16:08 PHP & HTML에서 이동 됨]</div>
게시글 목록
| 번호 | 제목 |
|---|---|
| 9186 |
Flash
플래시 프리로딩 소스
3
|
| 9168 | |
| 9167 |
JavaScript
[FLV동영상] FLV 반복재생하기
|
| 28537 | |
| 9163 | |
| 28532 | |
| 9160 | |
| 9155 |
Flash
wmode
4
|
| 28530 |
HTML
특정 IP 차단하기...
1
|
| 9150 |
Flash
플래시 flv(동영상) 사용경험담
4
|
| 9144 | |
| 28529 | |
| 9143 |
기타
Top으로 ver2
|
| 9141 |
JavaScript
제목에 첫 글자만 스타일적용과 문장의 첫라인 스타일 적용
1
|
| 9138 | |
| 28523 |
HTML
전화 번호 숫자만 빼오기
5
|
| 9132 | |
| 28521 | |
| 9131 | |
| 9130 |
Flash
창크기 자동 조절
|
| 9129 |
Flash
플래시 메뉴
|
| 28517 |
HTML
사진을 액자에 넣기(액자 만들기)
3
|
| 9126 | |
| 28515 |
HTML
초간단 스크롤
1
|
| 9123 |
JavaScript
메모하지 않으면 깜빡깜빡 잊어버리는 것들
2
|
| 9122 |
기타
빈 무비클립 만들기
|
| 9119 | |
| 9118 | |
| 9114 |
JavaScript
euc-kr 문서를 utf-8 로 변환
3
|
| 9111 | |
| 28514 |
HTML
잘되는 센드메일 수신이 안될때...
|
| 9109 | |
| 9108 |
기타
Ajax 흉내 내기
|
| 9105 |
JavaScript
포토샵에서 트랜스폼과 카피를 동시에 하는 방법
2
|
| 9100 | |
| 9097 |
JavaScript
mod_rewrite 설치 법
2
|
| 9096 | |
| 9093 |
JavaScript
포토샵의 블렌딩 모드
2
|
| 9089 |
JavaScript
opacity(투명도) 값 쉽게 먹이기.
3
|
| 9083 | |
| 28511 | |
| 9081 |
기타
서버정보검색
1
|
| 9077 |
기타
텍스트시계
3
|
| 9073 | |
| 9070 |
기타
Key 관련
2
|
| 28510 |
HTML
textarea 에 Tab기능 넣기
|
| 9069 | |
| 9068 |
MySQL
초보일지 FC4에서 가상호스트설정과정
|
| 9067 |
기타
pop3서버 설치 방법
|
| 9065 |
JavaScript
메뉴 생성 클래스
1
|
| 9064 | |
| 9063 |
JavaScript
qpopper(pop3) 설치
|
| 9061 | |
| 9060 | |
| 9059 | |
| 28509 |
HTML
자바스크립트 오류 메시지 감추기
|
| 9058 |
JavaScript
RTL8201BL 랜카드 잡으려면
|
| 9057 |
MySQL
mysql 설치후 실행오류 처리
|
| 9056 | |
| 28508 | |
| 9055 |
JavaScript
RedHat(레드햇) 9 설치 후 yum 설치
|
| 9054 | |
| 28507 |
HTML
삼바 설정 간단 쉬운 쉽게
|
| 9053 | |
| 9052 |
JavaScript
메일 릴레이 테스트
|
| 9051 | |
| 9050 | |
| 9049 | |
| 9048 | |
| 9038 | |
| 9033 |
JavaScript
브러시 집안들 브러시 지름을 쉽고 빠르게 조절하자~~~
4
|
| 9032 |
정규표현식
페도라 코어 3에서 APM 설치하기
|
| 9031 |
Linux
rsync를 이용한 미러링
|
| 9029 | |
| 9026 | |
| 9024 |
기타
vi 서비스 편집
1
|
| 9023 |
MySQL
리눅스에서 mysql DB설정
|
| 9022 |
MySQL
리눅스 에서 아파치와 php 설치
|
| 9017 |
Flash
일러스트 CS2와 플래시에서 패스따기
4
|
| 9015 | |
| 28502 | |
| 9013 | |
| 9001 | |
| 8998 |
MySQL
exif 사용하기 (ms 윈도우용)
2
|
| 8994 |
JavaScript
Apache 보안 팁...--;;;
3
|
| 8993 |
기타
[펌] $_FILES
|
| 8992 | |
| 8989 |
JavaScript
scp 사용법
2
|
| 8988 | |
| 8987 |
Flash
선따라 움직이기(초보)
|
| 8981 |
JavaScript
옥션처럼 소스보기 안되는곳에 적용하니까, 소스 보이는 방법
5
|
| 8978 | |
| 8974 |
MySQL
실수로 삭제한 mysql DB 복구방법
3
|
| 8973 |
JavaScript
mozilla DHTML ROWS INSERT & DELETE
|
| 8971 | |
| 8970 | |
| 8963 |
JavaScript
제가 집에서 사용하는 서버를 살짝 공개합니다.^^
6
|
| 8959 | |
| 8953 |
JavaScript
ssh 무차별 로그인 공격 막기
5
|
| 8950 |
댓글 작성
댓글을 작성하시려면 로그인이 필요합니다.
로그인하기