HTML·CSS야

이미지로 버튼 효과 주기

administrators 2010. 6. 10. 17:01 

<!doctype html public "-//w3c//dtd html 4.0 transitional//en"> 
<html> 
<head> 
<title> jasko sample script </title> 
<!---- [1단계] 아래 코드를 <HEAD> 와 <HEAD> 태그 사이에 붙여 넣으세요 ---> 
<style type="text/css"> 
<!-- 
/* 버튼 메뉴 전체의 위치와 크기를 설정 합니다 */ 
#btn { position:absolute; top:10px; left:10; width:150px; z-index:1;} 
/* 평상시 보여지는 버튼의 모양입니다 */ 
.btnout { 
border: 0px solid; 
padding:2 0 0 0; 
margin:1px; 
} 
/* 마우스를 대었을때 보여질 버튼의 보양입니다 */ 
.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:1px; 
} 
/* 마우스를 클릭 했을때 보여질 모양입니다 */ 
.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:1px; 
} 
--> 
</style> 
</head> 
<body> 
<!---- [2단계] 아래의 방법으로 <BODY> 와 <BODY> 태그 사이에 붙여 넣으세요 ---> 
<div id=btn> 
<a href="javascripｔ:alert(1)" target="_blank"><span id=menu0 class=btnout><img src="이미지.jpg" border=0 alt="검색" onclick="javascripｔ:alert(1)"></span></a><br> 
<a href="#" target="_blank"><span id=menu1 class=btnout><img src="bt_이미지.jpg" border=0 alt=""></span></a><br> 
<a href="#" target="_blank"><span id=menu2 class=btnout><img src="bt_이미지.jpg" border=0 alt=""></span></a><br> 
<a href="#" target="_blank"><span id=menu3 class=btnout><img src="bt_이미지.jpg" border=0 alt=""></span></a><br> 
<a href="#" target="_blank"><span id=menu4 class=btnout><img src="bt_이미지.jpg" border=0 alt=""></span></a><br> 
<a href="#" target="_blank"><span id=menu5 class=btnout><img src="bt_이미지.jpg" border=0 alt=""></span></a><br> 
<a href="#" target="_blank"><span id=menu6 class=btnout><img src="bt_이미지.jpg" border=0 alt=""></span></a><br> 
<a href="#" target="_blank"><span id=menu7 class=btnout><img src="bt_이미지.jpg" 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> 

 
출처가..어딘지 잃어버렸네요..원작자님 정말죄송합니다.