当前位置：开发者网络 >> 网页特效 >> 图形图象 >> 内容
精彩推荐
分类最新特效
分类热点特效
  
图片按钮的显隐变化，变化的过程非常美妙，极酷
日期：2005-06-21   人气：   【字体：大 中 小】【收藏此文】

<!-- 网页特效代码由[中国WEB开发者网络:http://www.ChinaWebDev.com]提供！ -->
<!-- 要实现此效果需要 1 个步骤： -->

<!-- 第 1 步： -->
<!-- 把下面的代码加到<BODY></BODY>区域中： -->

<script type="text/javascript">
//Generate transition CSS (transition=0 to 23)
document.write('<STYLE TYPE="text/css">.imgTrans{ filter:revealTrans(duration=0.4,transition=12) }</STYLE>');

//Uncomment the next line for fading rollovers instead of dissolving:
//document.write('<STYLE TYPE="text/css">.imgTrans{ filter:blendTrans(duration=0.4) }</STYLE>');

var onImages=new Array();
function Rollover(imgName, imgSrc)
{
onImages[imgName] = new Image();
onImages[imgName].src = imgSrc;
}

function turnOn(imgName){
if(document.images[imgName].filters != null)
document.images[imgName].filters[0].apply();
document.images[imgName].offSrc = document.images[imgName].src;
document.images[imgName].src = onImages[imgName].src;
if(document.images[imgName].filters != null)
document.images[imgName].filters[0].play();
}

function turnOff(imgName){
if(document.images[imgName].filters != null)
document.images[imgName].filters[0].stop();
document.images[imgName].src = document.images[imgName].offSrc;
}

//Specify name of participating images, plus paths to their onMouseover replacements:
Rollover("home", "../images/588/home_on.gif");
Rollover("about", "../images/588/about_on.gif");
Rollover("scripts", "../images/588/scripts_on.gif");

</script>
<a href = "http://www.webasp.net"
onMouseOver="turnOn('home');"
onMouseOut="turnOff('home');"><img name="home" class="imgTrans"
src="../images/588/home_off.gif" border="0"></a><br>

<a href = "http://www.webasp.net"
onMouseOver="turnOn('about');"
onMouseOut="turnOff('about');"><img name="about" class="imgTrans"
src="../images/588/about_off.gif" border="0"></a><br>

<a href = "http://www.webasp.net"
onMouseOver="turnOn('scripts');"
onMouseOut="turnOff('scripts');"><img name="scripts" class="imgTrans"
src="../images/588/scripts_off.gif" border="0"></a><br>