|
让你的网页活跃起来(4) 接下来让我们来看看动态效果是怎么实现的。其源代码如下。
<html>
<head>
<title>Push-In Buttons</title>
</head>
<body bgcolor=ffffff>
<script>
<!--
versionButton = 1
browserName = navigator.appName;
browserVer = parseInt(navigator.appVersion);
if ( browserVer >= 3)
versionButton = "3";
if (versionButton == "3")
{
toc1on = new Image(42, 197);
toc1on.src = "on.home.gif";
toc1off = new Image(42, 197);
toc1off.src = "home.gif";
}
function img_act(imgName)
{
if (versionButton == "3")
{
imgOn = eval(imgName + "on.src");
document [imgName].src = imgOn;
}
}
function img_inact(imgName)
{
if (versionButton == "3")
{
imgOff = eval(imgName + "off.src");
document [imgName].src = imgOff;
}
}
// -->
</script>
<a href=http://www.microsoft.com
onMouseover = "img_act('toc1')"
onMouseout = "img_inact('toc1')"><img src=home.gif
width=100 height=50 border=0 name="toc1"></a>
</body>
</html>
应该注意的地方有两处：
1.一定要给img赋一个名字，然后在源图片定义处应用这个名字。
2.注意源文件中的各种符号，特别是引号，还要注意源图片文件的路径，最好用相对路径，以免站点上载后无法正常显示。当然，这种交换图片的方式也需要4.0以上版本的浏览器的支持，如果您还在使用3.0版本的浏览器，就赶快升级吧！
* 提示的话
把鼠标放到一幅图片上就能出现提示信息，就像好多软件的按钮给出功能提示一样。这一功能在网页编辑中很容易实现，下面我们来看看其效果。
| 
