롤오버 버튼 효과를 구현하려면 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>
게시글 목록
| 번호 | 제목 |
|---|---|
| 10331 | |
| 28724 |
HTML
싸이월드 둥근 테두리 만드는 방법
2
|
| 10329 | |
| 10328 | |
| 10326 |
JavaScript
히스토리 브러시 툴(History Brush Tool, 단축키 - Y)
1
|
| 10324 | |
| 10323 | |
| 28723 | |
| 10322 |
JavaScript
슬라이스 툴- Slice Tool (단축키 K)
|
| 10321 | |
| 10320 | |
| 28722 | |
| 10318 | |
| 28719 |
HTML
포토샵 레이어의 이해
2
|
| 10317 |
JavaScript
포토샵 해상도의 종류
|
| 10314 | |
| 10312 | |
| 28716 |
HTML
점선 그리는 법...
2
|
| 10308 |
Flash
포토샵에서 쓰이는 파일정보 입니다.
3
|
| 10307 |
JavaScript
♣ 영문으로 보이는 한글폰트를 한글명으로
|
| 10306 | |
| 10305 | |
| 28715 |
HTML
일러스트 단축키2
|
| 10304 |
JavaScript
일러스트 단축키
|
| 10303 | |
| 28714 | |
| 10302 |
Flash
자동으로 창크기 변환
|
| 28713 |
HTML
XP서비스팩2 무시하고 새창 띄우기
|
| 10301 |
MySQL
mysql table 유뮤 확인 코딩[펌]
|
| 10300 |
PHP
php환경 변수 출력
|
| 10299 | |
| 10296 |
기타
연합뉴스 뉴스티커
2
|
| 10294 | |
| 10293 | |
| 10292 | |
| 10291 |
JavaScript
ls 명령에서 LS_COLOR 환경변수로 확장자별 색 바꾸기
|
| 10289 |
JavaScript
php 날짜, 시간 함수 관련 팁
1
|
| 10285 |
PHP
PHP팁 (보안 등)
3
|
| 28711 |
HTML
개행문자 없애기[펌]
1
|
| 10281 |
Flash
swf 바탕빼서 적용하기
3
|
| 10279 |
Flash
mp3 play 플래시 소스입돠~
1
|
| 28710 | |
| 10278 | |
| 10277 | |
| 10276 | |
| 28709 | |
| 10273 | |
| 10270 |
JavaScript
돌맹이로 글자쓰기 ㅡㅡ;; 강좌...
2
|
| 10269 |
JavaScript
주소 보여주기 시를 때 제가 자주 쓰는 방법 이건 조회수 빵이다 ㅡ0ㅡ;
|
| 10267 | |
| 28708 | |
| 10266 | |
| 10264 | |
| 10263 |
JavaScript
마우스 오버시에 텍스트 버튼느낌 style.css 와 자동 스크롤 기능
|
| 10261 | |
| 28707 |
HTML
웹 폰트 적용 시키기 - 초보자용 -
|
| 10260 |
JavaScript
접속때마다 음악 다르게 나오기
|
| 10256 |
JavaScript
img 태그에 border=0을 넣지 않고 적용
3
|
| 10255 | |
| 28706 |
HTML
페이지 자동 이동 방법 3가지!!!
|
| 10253 | |
| 28704 |
HTML
body옆의 스크롤바흔적없애기
1
|
| 10250 |
기타
소스훔쳐보기
2
|
| 28703 |
HTML
마우스 오른쪽 버튼 사용금지
|
| 28702 |
HTML
마우스 룰오버시 여러가지 효과내기
|
| 10249 |
Flash
스위시 무비를 플래시에서 들여오기할 때
|
| 10247 |
Flash
SWF 파일 용량 줄이기
1
|
| 10245 | |
| 10243 | |
| 10240 |
Flash
4. 자주 쓰는 플래시 액션스크립트 용어
2
|
| 10239 | |
| 10238 |
Flash
2. 무비 크기를 줄이기 위한 10가지 방법
|
| 10237 |
Flash
1. 메뉴보다 빠른 단축키(Hot Key)들
|
| 10235 |
Flash
여러가지팁
1
|
| 10225 | |
| 28700 |
HTML
포토샾 팁 72가지
1
|
| 10213 | |
| 10210 | |
| 10207 | |
| 10205 | |
| 10204 | |
| 28693 | |
| 10198 |
Flash
실시간채팅창 붙이기 플래시 버튼액션..
5
|
| 10195 |
JavaScript
php폼메일로 일본어 메일 보내기
2
|
| 10191 |
JavaScript
원하는 부분만 프린트하기.
3
|
| 24785 | |
| 28674 |
HTML
디렉토리 이미지 뷰어
18
|
| 24784 | |
| 10189 | |
| 10187 | |
| 10182 | |
| 28669 | |
| 10181 | |
| 10175 | |
| 24779 | |
| 24772 | |
| 10173 | |
| 10168 |
JavaScript
웹호스팅서버 보안 - Open DNS 막기
4
|
| 10163 | |
| 10160 |
JavaScript
자동 스크롤 메뉴 (끄기 기능)
2
|
댓글 작성
댓글을 작성하시려면 로그인이 필요합니다.
로그인하기