이미지 마우스오버 트랜지션 효과

:: 이미지 마우스오버 트랜지션 효과 ::


[ menu1 ]	[ menu2 ]	[ menu3 ]

옆 이미지에 마우스를 올리면 이미지가 다른 이미지로 자연스럽게 변경됩니다. 이미지 롤오버 기능과 비슷하지만 트랜지션 효과가 가미되어 좀더 자연스러운 이미지변환 효과가 있습니다.


menu1a.gif	menu2a.gif	menu3a.gif

menu1b.gif	menu2b.gif	menu3b.gif

옆 이미지는 해당 이미지에 마우스오버를 했을 때 서서히 변환되어 나타내는 이미지들입니다. 이미지가 사용된 매수는 총 6 매입니다. 옆 이미지의 상단 이미지는 기본으로 보여지는 이미지들이고, 아래 이미지들은 마우스를 오버를 했을 때 나타내어지는 이미지들입니다. 사용자는 원하는 이미지를 사용하여서 효과를 내시면 됩니다.

우선 자바스크립트 소스를 <head>~</head>사이에 소스를 넣습니다.

function bt(id,after)
{
eval(id+'.filters.blendTrans.stop();');
eval(id+'.filters.blendTrans.Apply();');
eval(id+'.src="'+after+'";');
eval(id+'.filters.blendTrans.Play();');
}

//-->
</script>

위 자바스크립트를 <head>~</head> 사이에 넣습니다.

<body>~</body>사이에 아래와 같은 방법으로 그림을 링크합니다

[menu1]의 경우
<a href=test1.html onfocus='this.blur()' onMouseOver='bt("menu1","menu1b.gif")' onMouseOut='bt("menu1","menu1a.gif")'><img ID=menu1 src=menu1a.gif border=0 style="filter:blendTrans(duration=0.5)"></a>

[menu2]의 경우
<a href=test2.html onfocus='this.blur()' onMouseOver='bt("menu2","menu2b.gif")' onMouseOut='bt("menu2","menu2a.gif")'><img ID=menu2 src=menu2a.gif border=0 style="filter:blendTrans(duration=0.5)"></a>

[menu3]의 경우
<a href=test3.html onfocus='this.blur()' onMouseOver='bt("menu3","menu3b.gif")' onMouseOut='bt("menu3","menu3a.gif")'><img ID=menu3 src=menu3a.gif border=0 style="filter:blendTrans(duration=0.5)"></a>

[menu1] 부분을 예로들어 설명합니다.
test1.html은 링크할 주소
menu1a.gif는 마우스가 올라갔을 때의 이미지, 앞의 menu1b.gif에는 마우스가 올라갔다가 내려갔을 때의 이미지, 뒤의 menu1b.gif는 기본 이미지.
즉, 마우스가 그림 위로 올라간 적이 한 번도 없을 때의 이미지
duration=0.5에서 0.5는 마우스가 오르락내리락할 때 트랜지션효과의 속도(큰 수를 적어줄수록 부드러워짐.)
[menu2] [menu3]... 같은 방법으로 원하는 만큼 계속 추가시켜주시면 됩니다. 추가하실 때는 menu1 이라는 이름을 menu2, menu3 ...이런 식으로 다르게 부여해야 합니다.