이미지 페이드인
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"> </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>
'프로그래밍 > ASP, Javascript' 카테고리의 다른 글
체크박스 한개일때와 여러개일때 구분해서 오류없게 처리하기 (0) | 2009.07.02 |
---|---|
HTML 문자 표 (0) | 2009.01.24 |
같은 셀을 병합하는 자바스크립트 (0) | 2008.11.30 |
openwin() (0) | 2008.08.06 |
엔터를 치면 submit되지않게 (1) | 2008.07.18 |