<html>
<head>
<title>이미지 fade in, fade out 효과</title><link rel="stylesheet" href="style.css">
<meta http-equiv="Content-Type" content="text/html; charset=euc-kr">
<script language="JavaScript1.2">
<!--
var startopacity = 40; // 이미지 기본 투명도(0~100 사이의 수로 0으로 하면 안보입니다.)
function fadeIt(obj,direct){
if(window.timer) { clearInterval(timer); }
tobj=obj; drct=direct;
timer=setInterval("flowfilter(tobj,drct);",5); }
function flowfilter(thing,dct){
if(dct==1) { if (thing.filters.alpha.opacity<100)
{ thing.filters.alpha.opacity+=10; }
else { clearInterval(timer); } }
if(dct==2) { if (thing.filters.alpha.opacity>startopacity)
{ thing.filters.alpha.opacity-=10; }
else { clearInterval(timer); } }
}
//-->
</script>
</head>
<body bgcolor="#FFFFFF" text="#000000">
<p align="center"><img src="http://lia.pe.kr/zb41pl2/bbs/data/images/yyyworld_18.jpg" border="0" style="filter:alpha(opacity=40)" //이부분의 숫자는 제일처음 보이는 이미지의 투명도인데 위의 스크립트에서 기본 투명도로 정한 수치와 같아야 합니다.
onmouseover="fadeIt(this,1);" onmouseout="fadeIt(this,2);">
</body>
</html>
'Javascript' 카테고리의 다른 글
| 파란물방울이 내려요 (0) | 2016.05.30 |
|---|---|
| 맛간메뉴 (0) | 2016.05.30 |
| 나의 홈피를 즐겨찾기에 등록하게 하기 (0) | 2016.05.30 |
| 자바 스크립트 직접 만들어 올리기 (0) | 2016.05.30 |
| 음악연속 나오기 (0) | 2016.05.30 |