My Programing/HTML and JavaScript

JS :: 페이드인-아웃 효과

nkdk 2008. 6. 16. 10:38

이미지에 마우스를 위치하면 이미지가 선명해지거나(fade-in) 흐릿해지는(fade-out) 효과를 줍니다. 인터넷 익스플로러에서 작동됩니다.

<html>
<script language="JavaScript">
<!--

var start_opacity = 30;

function imgFade(direct) {
if (window.timer) clearInterval(timer);
dct = direct;
timer = setInterval("flow_filter()", 5);
}

function flow_filter() {
var imgFilter = img1.filters.alpha;

if (dct == 1) {
  if (imgFilter.opacity < 100)
   imgFilter.opacity += 10;
  else
   clearInterval(timer);
} else {
  if (imgFilter.opacity > start_opacity)
   imgFilter.opacity -= 10;
  else
   clearInterval(timer);
}
}

// -->
</script>

<body>
<img name="img1" src="img1.jpg" style="filter:alpha(opacity=30)" onmouseover="imgFade(1)" onmouseout="imgFade(2)">
</body>
</html>