민미네 집
처음으로 갑니다.
메인페이지
민 미 소 개
민수일기장
미정일기장
추천사이트
태그자료실
태그연습장



  
  이미지 버튼 효과 내기 [ html ]
  
    
  2008-06-18 18:19:59   952 

이미지 버튼 효과 내기



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>  




  이미지 버튼 효과 내기 [ html ]   2008/06/18 952
1   p style= 할용법   2008/06/18 1040

[1] 2
 

Copyright 1999-2023 Zeroboard / skin by Mely

Copyright (c) 2002 MinMi. All rights Reserved.