롤오버 버튼 효과를 구현하려면 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>
게시판 목록
프로그램
| 번호 | 제목 | 글쓴이 | 날짜 | 조회 |
|---|---|---|---|---|
| 7830 | 10년 전 | 462 | ||
| 7829 |
 gilynh |
10년 전 | 649 | |
| 7828 | 10년 전 | 573 | ||
| 7827 | 10년 전 | 476 | ||
| 7826 | 10년 전 | 498 | ||
| 7825 | 10년 전 | 529 | ||
| 7824 | 10년 전 | 487 | ||
| 7823 | 10년 전 | 431 | ||
| 7822 | 10년 전 | 406 | ||
| 7821 | 10년 전 | 348 | ||
| 7820 | 10년 전 | 370 | ||
| 7819 |
 ABC디자인 |
10년 전 | 770 | |
| 7818 | 10년 전 | 428 | ||
| 7817 | 10년 전 | 608 | ||
| 7816 | 10년 전 | 447 | ||
| 7815 | 10년 전 | 642 | ||
| 7814 | 10년 전 | 479 | ||
| 7813 | 10년 전 | 434 | ||
| 7812 | 10년 전 | 444 | ||
| 7811 | 10년 전 | 419 | ||
| 7810 | 10년 전 | 622 | ||
| 7809 | 10년 전 | 553 | ||
| 7808 | 10년 전 | 434 | ||
| 7807 | 10년 전 | 445 | ||
| 7806 |
프로그래머7
|
10년 전 | 1364 | |
| 7805 | 10년 전 | 1310 | ||
| 7804 |
zahir1312
|
10년 전 | 805 | |
| 7803 |
ABC디자인 |
10년 전 | 1405 | |
| 7802 | 10년 전 | 507 | ||
| 7801 | 10년 전 | 885 | ||
| 7800 | 10년 전 | 1111 | ||
| 7799 | 10년 전 | 594 | ||
| 7798 | 10년 전 | 541 | ||
| 7797 | 10년 전 | 561 | ||
| 7796 | 10년 전 | 399 | ||
| 7795 | 10년 전 | 550 | ||
| 7794 | 10년 전 | 592 | ||
| 7793 | 10년 전 | 1090 | ||
| 7792 | 10년 전 | 518 | ||
| 7791 | 10년 전 | 612 | ||
| 7790 | 10년 전 | 537 | ||
| 7789 |
fbastore
|
10년 전 | 1488 | |
| 7788 | 10년 전 | 591 | ||
| 7787 | 10년 전 | 449 | ||
| 7786 | 10년 전 | 655 | ||
| 7785 | 10년 전 | 629 | ||
| 7784 | 10년 전 | 693 | ||
| 7783 | 10년 전 | 513 | ||
| 7782 | 10년 전 | 538 | ||
| 7781 | 10년 전 | 938 | ||
| 7780 | 10년 전 | 847 | ||
| 7779 | 10년 전 | 799 | ||
| 7778 | 10년 전 | 393 | ||
| 7777 | 10년 전 | 506 | ||
| 7776 | 10년 전 | 502 | ||
| 7775 | 10년 전 | 437 | ||
| 7774 | 10년 전 | 648 | ||
| 7773 | 10년 전 | 404 | ||
| 7772 | 10년 전 | 778 | ||
| 7771 | 10년 전 | 437 | ||
| 7770 | 10년 전 | 674 | ||
| 7769 | 10년 전 | 434 | ||
| 7768 | 10년 전 | 655 | ||
| 7767 | 10년 전 | 1207 | ||
| 7766 | 10년 전 | 537 | ||
| 7765 | 10년 전 | 599 | ||
| 7764 |
잘살아보자
|
10년 전 | 455 | |
| 7763 |
 foxrain |
10년 전 | 1505 | |
| 7762 |
Tosea
|
10년 전 | 1089 | |
| 7761 | 10년 전 | 692 | ||
| 7760 |
잘살아보자
|
10년 전 | 765 | |
| 7759 |
잘살아보자
|
10년 전 | 604 | |
| 7758 |
잘살아보자
|
10년 전 | 660 | |
| 7757 | 10년 전 | 1293 | ||
| 7756 |
ITBANK
|
10년 전 | 1290 | |
| 7755 | 10년 전 | 1945 | ||
| 7754 | 10년 전 | 1106 | ||
| 7753 | 10년 전 | 923 | ||
| 7752 | 10년 전 | 1426 | ||
| 7751 |
잘살아보자
|
10년 전 | 581 | |
| 7750 |
잘살아보자
|
10년 전 | 510 | |
| 7749 |
잘살아보자
|
10년 전 | 536 | |
| 7748 |
잘살아보자
|
10년 전 | 561 | |
| 7747 |
잘살아보자
|
10년 전 | 639 | |
| 7746 |
잘살아보자
|
10년 전 | 702 | |
| 7745 |
잘살아보자
|
10년 전 | 951 | |
| 7744 |
잘살아보자
|
10년 전 | 441 | |
| 7743 | 10년 전 | 972 | ||
| 7742 |
starbros
|
10년 전 | 867 | |
| 7741 |
잘살아보자
|
10년 전 | 709 | |
| 7740 |
잘살아보자
|
10년 전 | 599 | |
| 7739 |
잘살아보자
|
10년 전 | 488 | |
| 7738 |
잘살아보자
|
10년 전 | 565 | |
| 7737 |
잘살아보자
|
10년 전 | 543 | |
| 7736 |
잘살아보자
|
10년 전 | 563 | |
| 7735 |
잘살아보자
|
10년 전 | 900 | |
| 7734 |
잘살아보자
|
10년 전 | 456 | |
| 7733 |
잘살아보자
|
10년 전 | 566 | |
| 7732 |
잘살아보자
|
10년 전 | 731 | |
| 7731 |
잘살아보자
|
10년 전 | 655 |
댓글 작성
댓글을 작성하시려면 로그인이 필요합니다.
로그인하기