스타일 시트를 이용한 롤오버 버튼 메뉴 효과 나타내기
롤오버 버튼 효과를 구현하려면 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>
게시글 목록
| 번호 | 제목 |
|---|---|
| 8624 |
기타
소유권변경
|
| 8623 | |
| 8617 | |
| 8615 | |
| 28464 | |
| 8613 | |
| 8612 | |
| 8611 |
JavaScript
vim 의 들여쓰기 + 색상 눈 덜피곤 c++ php 등.. (리눅스용)
|
| 8610 |
JavaScript
vim 의 간단한 사용법
|
| 8609 |
JavaScript
[자바스크립트] 상태표시줄 제어 + 간단한 복사 제어
|
| 8606 |
Linux
/etc 디렉토리 아래의 파일들
2
|
| 8605 |
기타
shadow 잠금 해제
|
| 8604 | |
| 8603 |
JavaScript
yum 업데이트 되는곳 7.3 or 페도라
|
| 8602 |
MySQL
mysql 링크하기
|
| 8601 | |
| 8600 |
MySQL
mysql.sock 삭제 하였을 경우
|
| 8599 | |
| 8598 | |
| 8597 |
JavaScript
ps 시 화면 짤리는부분 보이게 하기
|
| 8596 | |
| 8595 | |
| 8594 |
기타
chmod 의 스틱키
|
| 8593 |
JavaScript
tripwire 의 twr 파일 보기
|
| 8592 |
JavaScript
최근 사용자 접속 리스트 보기
|
| 8591 | |
| 8590 | |
| 8589 |
JavaScript
atd 데몬
|
| 28463 | |
| 8588 |
JavaScript
portmap
|
| 8587 | |
| 8586 | |
| 8585 |
JavaScript
md5sum 사용방법
|
| 8584 |
JavaScript
TAR 압축방법
|
| 8583 | |
| 8581 | |
| 8580 |
기타
crontab 사용하기
|
| 8579 |
JavaScript
umask 설정법
|
| 8578 | |
| 8577 |
기타
Find 명령어 활용
|
| 8576 |
기타
zip 압축 해제
|
| 8575 |
JavaScript
삼바(samba)에서 내부만 들어오게 하기
|
| 8574 | |
| 8572 | |
| 8571 |
JavaScript
quota 젠체 용량 확인
|
| 8570 | |
| 8569 | |
| 8568 |
JavaScript
런레벨 편집
|
| 8567 |
기타
리눅스에서 문자찾기
|
| 8566 | |
| 8565 |
JavaScript
삼바로 리눅스에서 윈도우로 공유하기
|
| 8564 |
JavaScript
shadow 패스워드 잠금 해제 하기
|
| 8563 | |
| 8562 | |
| 8561 |
JavaScript
vim에서 컬러는 나오게 하기
|
| 8560 | |
| 8558 | |
| 8557 |
MySQL
my.cnf 파일은 어디에?
|
| 8556 | |
| 8555 |
MySQL
cron 설정
|
| 8554 |
JavaScript
호스트네임 바꾸기
|
| 8553 |
JavaScript
하드링크와 심볼릭링크?
|
| 28462 |
HTML
콘솔의 화면보호기능을 끄려면?
|
| 8552 |
기타
스틱키
|
| 8551 |
JavaScript
날짜 바꾸기 date 명령을 이용
|
| 28461 |
HTML
스왑 사용 안하기
|
| 8549 | |
| 8548 |
기타
SSH
|
| 8547 |
JavaScript
rsync 백업
|
| 8545 |
JavaScript
저 사양 PC로 리눅스 라우터 만들기
1
|
| 8544 |
Linux
Tripwire
|
| 8543 | |
| 8542 | |
| 8541 | |
| 8540 |
JavaScript
링크 시킨 파일 찾기
|
| 8539 |
JavaScript
리눅스 하드웨어 정보 보기
|
| 8538 | |
| 8537 | |
| 8536 |
MySQL
my.cnf 파일은 위치..
|
| 8535 |
MySQL
부팅시 자동으로 mysql 서버 자동실행
|
| 8533 |
MySQL
MySQL 루트비번 분실시 대처요령
1
|
| 8532 |
MySQL
mysql에서 log 파일 남기기
|
| 8531 |
MySQL
ALTER 테이블 추가,변경
|
| 8530 |
MySQL
sql 파일로 테이블 간단히 만들기
|
| 8529 |
MySQL
mysql 4.1 의 password()
|
| 8528 |
MySQL
mysql 에서 최대 사용자 수
|
| 8525 | |
| 8524 | |
| 8523 |
기타
핑(ping) 막기
|
| 8522 | |
| 8521 |
JavaScript
su 사용자 제한하기
|
| 8520 | |
| 8519 |
JavaScript
기본적인 삼바 설정
|
| 8518 |
기타
실시간 로그 보기..
|
| 8517 | |
| 8516 |
JavaScript
부팅 로고 삭제
|
| 8515 |
JavaScript
콘솔에서 해상도 높이기
|
| 8514 | |
| 8513 | |
| 8512 |
JavaScript
ssh로 접속할때 메시지를 보여주는 방법..
|
댓글 작성
댓글을 작성하시려면 로그인이 필요합니다.
로그인하기