이미지 버튼 효과 내기
shadow 필터를 이용해서 하나의 그림으로 버튼효과를 냅니다.
★ <head>와 </head> 사이에 아래 소스를 넣습니다. ★
<style>
<!--
.popshadow{
position:relative;
left:-3;
top:-3;
filter:shadow(color=skyblue,direction=135)
}
-->
</style>
-3 은... 아래 <body>와 </body> 사이에 들어가는 숫자와 일치시켜주는 것이 좋아요...
누르기 전과 누르고 떼었을 때 그림 위치가 자연스러워집니다...
작은 수일수록 왼쪽 상단으로 갑니다...
skyblue 는 그림자의 색을 나타내구요... 135 는 그림자의 각도를나타냅니다...
예쁘게 바꾸어 보세요...^^
★ <body>와 </body> 사이의 아무 곳에나 아래 소스를 넣습니다. ★
<script language="JavaScript1.2">
function updownshadow(){
if (event.srcElement.className=="popshadow"){
tempobject=event.srcElement
if (event.type=="mousedown"){
tempobject.filters[0].enabled=false
tempobject.style.left=tempobject.style.top=0
}
else{
tempobject.filters[0].enabled=true
tempobject.style.left=tempobject.style.top=-3
}
}
}
if (document.all){
document.body.onmousedown=updownshadow
document.body.onmouseup=updownshadow
}
</script>
-3 은... <head>와 </head>사이에 들어갔던 것과 같은 숫자로 써 주는게 젤 좋은것 같아여...
★ <body>와 </body> 사이의단추효과를 집어 넣고 싶은 이미지 태그 안에 class="popshadow" 를 추가하면 됩니다. ★
<a href="이동할주소"><img src="이미지주소" class="popshadow"></a>
|
|
메인페이지
2008-06-18 18:19:59
2435 