롤오버 버튼 효과를 구현하려면 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>
게시판 목록
프로그램
| 번호 | 제목 | 글쓴이 | 날짜 | 조회 |
|---|---|---|---|---|
| 7530 | 10년 전 | 792 | ||
| 7529 |
파랑새1597
|
10년 전 | 1214 | |
| 7528 |
파랑새1597
|
10년 전 | 1315 | |
| 7527 |
integrity7
|
10년 전 | 1400 | |
| 7526 | 10년 전 | 2410 | ||
| 7525 |
다빈치코드777
|
10년 전 | 1103 | |
| 7524 | 10년 전 | 1572 | ||
| 7523 | 10년 전 | 960 | ||
| 7522 |
 나는웹디다 |
10년 전 | 992 | |
| 7521 |
blackkil
|
10년 전 | 1873 | |
| 7520 | 10년 전 | 1298 | ||
| 7519 |
Gaumi
|
10년 전 | 1082 | |
| 7518 | 10년 전 | 1485 | ||
| 7517 | 10년 전 | 836 | ||
| 7516 | 10년 전 | 1287 | ||
| 7515 | 10년 전 | 1403 | ||
| 7514 |
 돼지코구뇽 |
10년 전 | 4486 | |
| 7513 |
멋진남자임
|
10년 전 | 1136 | |
| 7512 |
다빈치코드777
|
10년 전 | 875 | |
| 7511 |
 LaRuota |
10년 전 | 3398 | |
| 7510 | 10년 전 | 1366 | ||
| 7509 | 10년 전 | 1144 | ||
| 7508 | 10년 전 | 716 | ||
| 7507 |
senseme
|
10년 전 | 746 | |
| 7506 |
멋진남자임
|
10년 전 | 1640 | |
| 7505 | 10년 전 | 4012 | ||
| 7504 | 10년 전 | 2144 | ||
| 7503 | 10년 전 | 992 | ||
| 7502 | 10년 전 | 518 | ||
| 7501 | 10년 전 | 1443 | ||
| 7500 | 10년 전 | 1494 | ||
| 7499 | 10년 전 | 3390 | ||
| 7498 | 10년 전 | 1218 | ||
| 7497 |
dethos79
|
10년 전 | 2965 | |
| 7496 | 10년 전 | 2154 | ||
| 7495 | 10년 전 | 870 | ||
| 7494 |
CHAVO
|
10년 전 | 1130 | |
| 7493 | 10년 전 | 2648 | ||
| 7492 | 10년 전 | 1272 | ||
| 7491 | 10년 전 | 1484 | ||
| 7490 | 10년 전 | 2336 | ||
| 7489 | 10년 전 | 2123 | ||
| 7488 |
toptopon
|
10년 전 | 891 | |
| 7487 |
 Terrorboy |
10년 전 | 1032 | |
| 7486 | 10년 전 | 3357 | ||
| 7485 | 10년 전 | 1313 | ||
| 7484 | 10년 전 | 1375 | ||
| 7483 | 10년 전 | 1024 | ||
| 7482 | 10년 전 | 652 | ||
| 7481 | 10년 전 | 858 | ||
| 7480 | 10년 전 | 1232 | ||
| 7479 | 10년 전 | 2602 | ||
| 7478 | 10년 전 | 1173 | ||
| 7477 |
멋진남자임
|
10년 전 | 1524 | |
| 7476 |
zeppeto
|
10년 전 | 1143 | |
| 7475 |
200점아빠
|
10년 전 | 912 | |
| 7474 | 10년 전 | 4004 | ||
| 7473 | 10년 전 | 999 | ||
| 7472 |
나르시스1
|
10년 전 | 1244 | |
| 7471 | 10년 전 | 874 | ||
| 7470 | 10년 전 | 1281 | ||
| 7469 |
플라이SINJI
|
10년 전 | 983 | |
| 7468 |
Terrorboy |
10년 전 | 552 | |
| 7467 |
Terrorboy |
10년 전 | 668 | |
| 7466 | 10년 전 | 1120 | ||
| 7465 | 10년 전 | 1186 | ||
| 7464 |
Terrorboy |
10년 전 | 1191 | |
| 7463 | 10년 전 | 1252 | ||
| 7462 |
진짜별사탕
|
10년 전 | 858 | |
| 7461 | 10년 전 | 948 | ||
| 7460 | 10년 전 | 3734 | ||
| 7459 |
멋진남자임
|
10년 전 | 1556 | |
| 7458 |
멋진남자임
|
10년 전 | 482 | |
| 7457 | 10년 전 | 923 | ||
| 7456 | 10년 전 | 764 | ||
| 7455 | 10년 전 | 2160 | ||
| 7454 | 10년 전 | 630 | ||
| 7453 | 10년 전 | 827 | ||
| 7452 |
중국어사이트제작
|
10년 전 | 506 | |
| 7451 | 10년 전 | 905 | ||
| 7450 | 10년 전 | 630 | ||
| 7449 |
울라라라우
|
10년 전 | 952 | |
| 7448 | 10년 전 | 1634 | ||
| 7447 |
멋진남자임
|
10년 전 | 510 | |
| 7446 | 10년 전 | 549 | ||
| 7445 |
네이비칼라
|
10년 전 | 1675 | |
| 7444 |
senseme
|
10년 전 | 1408 | |
| 7443 | 10년 전 | 1342 | ||
| 7442 | 10년 전 | 729 | ||
| 7441 |
멋진남자임
|
10년 전 | 1437 | |
| 7440 | 10년 전 | 910 | ||
| 7439 |
Terrorboy |
10년 전 | 763 | |
| 7438 |
Terrorboy |
10년 전 | 938 | |
| 7437 |
basement
|
10년 전 | 1037 | |
| 7436 |
잘살아보자
|
10년 전 | 1128 | |
| 7435 | 10년 전 | 1087 | ||
| 7434 | 10년 전 | 3791 | ||
| 7433 |
Terrorboy |
10년 전 | 2740 | |
| 7432 |
alexkim
|
10년 전 | 860 | |
| 7431 |
이웃집초보
|
11년 전 | 1312 |
댓글 작성
댓글을 작성하시려면 로그인이 필요합니다.
로그인하기