이미지 트래지션[html] .

이미지 트렌지션이란 보통 메뉴에 효과를 주기위해 사용하는 스크립트 입니다.

마우스가 그림위로 올라갈때 두개의 이미지를 서로 시간간격을 두고

교차시키는 겁니다.

그러므로 메뉴에 효과를 줄경우 하나의 메뉴에 두개씩의 그림이 준비되 있어야 합니다.

[head부분에 들어갈 소스]

----------------------------------------------------------------------------------

<script language=javascript>

function imgTrans(id,after) { 

eval(id+'.filters.blendTrans.stop();'); 

eval(id+'.filters.blendTrans.Apply();'); 

eval(id+'.src="'+after+'";'); 

eval(id+'.filters.blendTrans.Play();'); 

} 

</script>

[body부분에 들어갈 소스]

----------------------------------------------------------------------------------

<a href="링크할 문서의 경로" onMouseOver="imgTrans('image01','변할그림의 경로')" 

onMouseOut="imgTrans('image01','원래그림의 경로')">

<img id=image01 src="원래그림의 경로" border="0" 

style="filter:blendTrans(duration=0.5)"></a>

<a href="링크할 문서의 경로" onMouseOver="imgTrans('image02','변할그림의 경로')" 

onMouseOut="imgTrans('image02','원래그림의 경로')">

<img id="image02" src="원래그림의 경로" border="0" 

style="filter:blendTrans(duration=0.5)"></a>

    .

    .

    .

이런식으로 소스를 추가해주면됩니다.

소스를 잘보면 첫번째는 id를 image01이고 두번째는 image02라고 지정했죠.

이런식으로 계속 늘려주면됩니다.

위 소스에서 수정할곳은 '링크경로'와 '변할그림의 경로', '원래그림의 경로'만 넣어주면됩니다.

소스를 간단히 설명해 보면 

onMouseOver : 마우스가 그림위로 올라갈때의 효과를 지정합니다.

onMouseOut : 마우스가 그림에서 벋어날때의 효과를 지정합니다.

filter:blendTrans(duration=0.5) : 트렌지션 효과를 주는 필터를 지정한것입니다. 

여기서 duration=0.5 는 두 그림이 바뀌는 시간 간격입니다. 단위는 '초'입니다

----------------------------------------------------------------------

출처: 셀클럽 - http://sellclub.co.kr

다른곳에서 이용할시에는 꼭 출처를 같이 복사이용 바랍니다.