이미지 페이드인

Posted at 2008. 12. 22. 18:12 | Posted in 프로그래밍/ASP, Javascript

<script>

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

 

위 스크립트 소스를 적용하시고

 

아래와같이 링크 소스를 적용하세요

 

<a href="링크경로" onMouseOver='bt("img1","B이미지경로")' onMouseOut='bt("img1","A이미지경로")'><img id="img1" src="A이미지경로" width="가로폭" height="세로폭" border="0" style="filter:blendTrans(duration=1.0)" onfocus="this.blur()"></a>

 

<a href="링크경로" onMouseOver='bt("img2","B이미지경로")' onMouseOut='bt("img2","A이미지경로")'><img id="img2" src="A이미지경로" width="가로폭" height="세로폭" border="0" style="filter:blendTrans(duration=1.0)" onfocus="this.blur()"></a>

 

각 메뉴의 링크 소스마다 id 를 img1 , img2 처럼 다르게 지정해 주시고

 

필터(스르륵) 효과의 강도는 필요하시면 duration=1.0 에서 수치를 0.5 등으로 조절하시면 됩니다


-출처 : 지식인-


적용해본 코드
    <form name="frmSub">
                  <tr>
                    <td width="10">&nbsp;</td>
                    <td><table width="100%" border="0" cellspacing="0" cellpadding="0">
                      <tr>
                        <td><img name="subimg" id="subimg" src="img/conimg_17.gif" width="333" height="240"  style="filter:blendTrans(duration=0.4)"/></td>
                      </tr>
                      <tr>
                        <td><table width="100%" border="0" cellspacing="0" cellpadding="0">
                          <tr>
                            <td height="40" colspan="2">
                            <!-- 썸네일 시작 -->
                            <table width="100%" border="0" cellpadding="5" cellspacing="0">
                              <tr>
                                <td align="left"><img src="img/conimg_17.gif" name="sumimg1" width="70" height="70" id="sumimg1" onmouseover='bt("document.frmSub.subimg",this.src)' style="cursor:pointer;cursor:hand;" /></td>
                                <td align="center"><img src="img/conimg_17.gif" name="sumimg2" width="70" height="70" id="sumimg2" onmouseover='bt("document.frmSub.subimg",this.src)' style="cursor:pointer;cursor:hand;" /></td>
                                <td align="center"><img src="img/conimg_17.gif" name="sumimg3" width="70" height="70" id="sumimg3" onmouseover='bt("document.frmSub.subimg",this.src)' style="cursor:pointer;cursor:hand;" /></td>
                                <td align="right"><img src="img/conimg_17.gif" name="sumimg4" width="70" height="70" id="sumimg4" onmouseover='bt("document.frmSub.subimg",this.src)' style="cursor:pointer;cursor:hand;" /></td>
                              </tr>
                            </table>




//