根据鼠标放上切换内容制作的图片导航,比较大气的感觉,在图标交替的同进加入了淡入淡出特效,整体效果和一个Flash导航没什么两样,为了加快演示速度 ,这里只放了两组图片导航,如果你需要很多,可以依次添加下去。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="
http://www.w3.org/1999/xhtml">
<head>
<title>鼠标放上切换内容</title>
<style>
<!--
a img{
border:none;
}
.imdiv{
float:left;
}
.imdiv img{
FILTER: Alpha(Opacity=0);
}
-->
</style>
<SCRIPT language=JavaScript>
function makevisible(cur,which){
if (which==0)
cur.filters.alpha.opacity=100
else
cur.filters.alpha.opacity=0
}
</SCRIPT>
<SCRIPT language=javascript>
var min=0;
var max=100;
var number=5;
function OnMouseOver(obj){
if(obj.changing)
clearInterval(obj.changing);
obj.changing=setInterval("add("+obj.id+")",1);
}
function OnMouseOut(obj){
if(obj.changing)
clearInterval(obj.changing);
obj.changing=setInterval("sub("+obj.id+")",1);
}
function add(obj){
if(obj.filters.Alpha.Opacity > max){
clearInterval(obj.changing);
obj.changing=false;
obj.filters.Alpha.Opacity = max;
}
else
obj.filters.Alpha.Opacity += number;
}
function sub(obj){
if(obj.filters.Alpha.Opacity < min){
clearInterval(obj.changing);
obj.changing=false;
obj.filters.Alpha.Opacity = min;
}
else
obj.filters.Alpha.Opacity += -number;
}
</SCRIPT>
</head>
<body>
<div class="imdiv" style="background:url(
http://www.codefans.net/jscss/demoimg/200910/a1.gif) no-repeat;">
<a href="#"><IMG id='img1' onmouseover='OnMouseOver(this)' style='FILTER: Alpha(Opacity=0)' onmouseout='OnMouseOut(this)' src='/jscss/demoimg/200910/a2.gif'></a>
</div>
<div class="imdiv" style="background:url(/jscss/demoimg/200910/b1.gif) no-repeat;">
<a href="#"><IMG id='img2' onmouseover='OnMouseOver(this)' style='FILTER: Alpha(Opacity=0)' onmouseout='OnMouseOut(this)' src='/jscss/demoimg/200910/b2.gif'></a>
</div>
</body>
</html>