롤오버 버튼 효과를 구현하려면 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>
게시판 목록
프로그램
| 번호 | 제목 | 글쓴이 | 날짜 | 조회 |
|---|---|---|---|---|
| 1330 | 18년 전 | 1478 | ||
| 1329 | 18년 전 | 1702 | ||
| 1328 | 18년 전 | 995 | ||
| 1327 | 18년 전 | 1398 | ||
| 1326 | 18년 전 | 2244 | ||
| 1325 | 18년 전 | 1129 | ||
| 1324 | 18년 전 | 1297 | ||
| 1323 | 18년 전 | 1563 | ||
| 1322 | 18년 전 | 1175 | ||
| 1321 | 18년 전 | 964 | ||
| 1320 | 18년 전 | 1186 | ||
| 1319 | 18년 전 | 1521 | ||
| 1318 | 18년 전 | 1640 | ||
| 1317 | 18년 전 | 1595 | ||
| 1316 | 18년 전 | 1206 | ||
| 1315 |
 뜨락의이름 |
18년 전 | 8597 | |
| 1314 | 18년 전 | 1897 | ||
| 1313 | 18년 전 | 1489 | ||
| 1312 | 18년 전 | 1483 | ||
| 1311 | 18년 전 | 1770 | ||
| 1310 | 18년 전 | 1831 | ||
| 1309 | 18년 전 | 1215 | ||
| 1308 | 18년 전 | 977 | ||
| 1307 | 18년 전 | 2743 | ||
| 1306 | 18년 전 | 3102 | ||
| 1305 | 18년 전 | 2165 | ||
| 1304 | 18년 전 | 1553 | ||
| 1303 | 18년 전 | 1408 | ||
| 1302 | 18년 전 | 855 | ||
| 1301 | 18년 전 | 1771 | ||
| 1300 | 18년 전 | 5134 | ||
| 1299 | 18년 전 | 2845 | ||
| 1298 |
mixdesign
|
18년 전 | 2098 | |
| 1297 | 18년 전 | 3077 | ||
| 1296 | 18년 전 | 2538 | ||
| 1295 | 18년 전 | 2234 | ||
| 1294 |
onweb
|
18년 전 | 4553 | |
| 1293 |
onweb
|
18년 전 | 3487 | |
| 1292 | 18년 전 | 3449 | ||
| 1291 | 18년 전 | 4031 | ||
| 1290 | 18년 전 | 1905 | ||
| 1289 | 18년 전 | 1754 | ||
| 1288 | 18년 전 | 1721 | ||
| 1287 | 18년 전 | 1414 | ||
| 1286 | 18년 전 | 1262 | ||
| 1285 | 18년 전 | 1155 | ||
| 1284 | 18년 전 | 1159 | ||
| 1283 | 18년 전 | 1511 | ||
| 1282 | 18년 전 | 902 | ||
| 1281 | 18년 전 | 1269 | ||
| 1280 | 18년 전 | 1121 | ||
| 1279 | 18년 전 | 1137 | ||
| 1278 | 18년 전 | 3018 | ||
| 1277 | 18년 전 | 944 | ||
| 1276 | 18년 전 | 1152 | ||
| 1275 | 18년 전 | 2090 | ||
| 1274 | 18년 전 | 2222 | ||
| 1273 | 18년 전 | 1314 | ||
| 1272 | 18년 전 | 1900 | ||
| 1271 | 18년 전 | 1150 | ||
| 1270 | 18년 전 | 2485 | ||
| 1269 | 18년 전 | 6592 | ||
| 1268 |
페이지팩트
|
18년 전 | 3820 | |
| 1267 |
페이지팩트
|
18년 전 | 2223 | |
| 1266 |
뜨락의이름 |
18년 전 | 6292 | |
| 1265 | 18년 전 | 2569 | ||
| 1264 | 18년 전 | 2614 | ||
| 1263 | 18년 전 | 2116 | ||
| 1262 | 18년 전 | 2107 | ||
| 1261 |
페이지팩트
|
18년 전 | 2116 | |
| 1260 | 18년 전 | 3873 | ||
| 1259 |
 hanpedro |
18년 전 | 3933 | |
| 1258 |
 PhotoFly |
18년 전 | 5033 | |
| 1257 | 18년 전 | 4126 | ||
| 1256 | 18년 전 | 2566 | ||
| 1255 | 18년 전 | 1796 | ||
| 1254 | 18년 전 | 2778 | ||
| 1253 | 18년 전 | 2711 | ||
| 1252 | 18년 전 | 2232 | ||
| 1251 | 18년 전 | 5413 | ||
| 1250 |
jbsstyle
|
18년 전 | 4752 | |
| 1249 |
 친절한서기 |
18년 전 | 3759 | |
| 1248 | 18년 전 | 3446 | ||
| 1247 | 18년 전 | 2127 | ||
| 1246 | 18년 전 | 2130 | ||
| 1245 | 18년 전 | 3632 | ||
| 1244 |
hanpedro |
18년 전 | 2266 | |
| 1243 |
hanpedro |
18년 전 | 2492 | |
| 1242 | 18년 전 | 1759 | ||
| 1241 | 18년 전 | 4456 | ||
| 1240 | 18년 전 | 2149 | ||
| 1239 | 18년 전 | 2299 | ||
| 1238 | 18년 전 | 4035 | ||
| 1237 |
hwatta
|
18년 전 | 3886 | |
| 1236 | 18년 전 | 2110 | ||
| 1235 | 18년 전 | 2758 | ||
| 1234 | 18년 전 | 5140 | ||
| 1233 | 18년 전 | 2401 | ||
| 1232 |
hanpedro |
18년 전 | 2943 | |
| 1231 | 18년 전 | 8498 |
댓글 작성
댓글을 작성하시려면 로그인이 필요합니다.
로그인하기