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



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

이미지 버튼 효과 내기



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>  




22   p style= 할용법   2008/06/18 1040
  이미지 버튼 효과 내기 [ html ]   2008/06/18 953
20   윈도우 XP 팁 모음   2008/06/18 1170
19   이미지 슬라이드 쑈 1   2008/06/18 1243
18   이미지 슬라이드 쑈 2   2008/06/18 1313
17   특정일의 남은 날짜 나타내기 (기념일 카운트다운)   2008/06/18 1437
16   멋진 미니달력/폼을 마우스로 클릭하면 달력이 나타나..   2008/06/18 2113
15   글자가 가운데에서 튀어 나오는 소스   2008/06/18 1274
14   링크 밑줄 없애기   2008/06/18 1273
13   META 태그의 속성   2008/06/18 1433
12   책갈피가 있는 시   2008/06/18 1265
11   예쁜 메뉴판   2008/06/18 1259
10   mp3파일변환/음질은 낮추고 확장자엔 영향안주는 프로그램   2008/06/19 1286
9   테이블 만들기   2008/06/28 1276
8   포토삽 강좌 / 67가지 [펌]   2008/06/28 1231
7   자동줄바꿈 (valign=top)과 pre   2009/04/09 1286
6   메뉴   2009/04/28 1249
5   alpha filte 의 사용법   2009/06/07 1308
4   alpha filte 의 사용법   2009/06/07 1212
3   테이블에도 그라데이션 효과를 줄 수 있다.   2010/01/05 1250

1 [2]
 

Copyright 1999-2023 Zeroboard / skin by Mely

Copyright (c) 2002 MinMi. All rights Reserved.