스타일 시트를 이용한 롤오버 버튼 메뉴 효과 나타내기
롤오버 버튼 효과를 구현하려면 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>
게시글 목록
| 번호 | 제목 |
|---|---|
| 9921 | |
| 28612 |
HTML
사용자 웹브라우저의 이름 알려주기
|
| 28611 | |
| 28605 | |
| 9920 |
JavaScript
Samba 설정
|
| 9916 | |
| 9915 | |
| 28596 | |
| 9906 |
JavaScript
Ajax(Asynchronous JavaScript and XML)란?
8
|
| 28572 |
HTML
if
23
|
| 28564 |
HTML
iinclude와 조건문
7
|
| 9898 | |
| 24744 | |
| 24742 | |
| 24741 | |
| 24736 | |
| 28558 | |
| 9896 | |
| 9893 | |
| 9892 |
JavaScript
웹문서에 주소창 넣기 스크립트
|
| 9891 | |
| 9890 | |
| 28557 | |
| 9889 | |
| 9888 |
JavaScript
폼 항목중 입력하지 않을때 경고창 띄우기
|
| 9887 | |
| 9885 | |
| 9884 |
JavaScript
아기창 자동으루 띄우고 엄마창 자동으루 죽이기
|
| 28555 | |
| 9883 | |
| 9881 |
MySQL
rrdtool 사용하기
1
|
| 9880 | |
| 9879 | |
| 9878 |
MySQL
메일,홈계정 쿼터 적용하기
|
| 9877 |
기타
파일을 분할 압축방법
|
| 9876 |
MySQL
mysql 부팅시 실행 시키기
|
| 9873 |
JavaScript
mod_rewrite 모듈 설치
2
|
| 9871 |
MySQL
phpMyadmin 웹호스팅 설정
1
|
| 9864 | |
| 9840 |
기타
머리카락 패스따기
23
|
| 9836 | |
| 9834 | |
| 9832 |
Flash
초짜의 Fade_Out_Effect 연습
1
|
| 9830 |
Flash
초짜의 Shadow_Effect 연습
1
|
| 9828 | |
| 9826 |
Flash
초짜의 Typo_Graphy 트위닝 연습
1
|
| 9797 | |
| 9754 | |
| 9709 | |
| 9686 | |
| 9646 | |
| 9634 | |
| 9617 | |
| 9615 | |
| 9613 | |
| 28553 | |
| 9611 | |
| 9607 | |
| 24726 | |
| 24725 | |
| 24721 | |
| 9569 | |
| 9567 |
Flash
플래시강좌 진행중입니다.
1
|
| 9550 | |
| 9531 | |
| 9527 |
JavaScript
접속자 아이피 출력(1원짜리 팁)
3
|
| 28550 | |
| 9493 | |
| 9479 | |
| 9431 | |
| 9418 | |
| 9372 | |
| 9331 | |
| 9267 | |
| 9216 | |
| 9215 | |
| 9214 |
JavaScript
리눅스 설치 후 해야 할 일
|
| 28549 | |
| 28548 |
HTML
데이터베이스의 생성, 선택, 보기
|
| 9213 |
JavaScript
[PHP동영상강좌] 프로그래밍 본격 시작 - 01
|
| 28543 |
HTML
포토샵 CS 브러쉬 툴 강좌
4
|
| 9211 | |
| 9210 | |
| 9208 | |
| 24718 | |
| 24706 | |
| 24702 |
기획서
[엑셀] 웹기획서
3
|
| 24701 | |
| 24698 |
견적서
쇼핑몰 제작 견적서
2
|
| 24695 |
계약서
쇼핑몰 계약서
2
|
| 9202 |
JavaScript
시원한 테이블 메뉴 스크립트
5
|
| 28540 | |
| 24688 | |
| 9194 |
Flash
IE 패치에 따른 플래시 이용방식 변경
7
|
| 24679 |
계약서
홈페이지 계약서
8
|
| 24674 | |
| 24670 | |
| 9193 |
정규표현식
[브라우저]브라우저명을 정확히 알아내기
|
| 9191 |
JavaScript
[위치관련]팝업창을 브라우저 해상도 구분없이 항상 중앙에 띄우기
1
|
| 9190 |
댓글 작성
댓글을 작성하시려면 로그인이 필요합니다.
로그인하기