* 动态按钮
这里的动态按钮既不是.gif动画,也不是FrontPage 中提供的各种特效按钮。相信您一定遇到过这种情况:当您的鼠标划过某一个按钮时,它会忽然动一下,似乎在诱惑您去点击它,很有意思是吗?下面我们来实现它。
首先您应该准备两幅图片,由于是按钮,不必很大,颜色也不必太花,简单的.gif就行,两幅图要有一些差别,免得动了以后看不出来。下面是我做的两张图片。
接下来让我们来看看动态效果是怎么实现的。其源代码如下。
<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版本的浏览器,就赶快升级吧!
* 提示的话
把鼠标放到一幅图片上就能出现提示信息,就像好多软件的按钮给出功能提示一样。这一功能在网页编辑中很容易实现,下面我们来看看其效果。
实现这种效果很容易,看看源代码就明白了。
......
<tr>
<td WIDTH="57"><a HREF="who.html" TARGET="main"
ONMOUSEOVER="img_act('who')"
ONMOUSEOUT="img_inact('who')"><img SRC="../images/button_who0.gif" NAME="who"
title="周华健个人小档案" ALT="我是谁"
BORDER="0" WIDTH="113" HEIGHT="45"></a><a
HREF="who.html" TARGET="_parent" ONMOUSEOVER="img_act('who')"
ONMOUSEOUT="img_inact('who')"></a></td>
</tr>
......
代码中加下划线的部分就是实现它的方法。Title这一属性很有用吧!它可用于除了BASE、BASEFONT、HEAD、HTML、META、PARAM、SCRIPT、STYLE、TITLE以外的所有元素中,以定义鼠标划过时的提示信息。
以上我们就网页编制过程中的一些小技巧进行了详细的讨论。Web上有许多设计精美、技术先进的页面,分析它们的源码是很好的学习途径。计算机技术在不断地进步,面对这些纷至沓来的新技术:DHTML、CSS、XML......我们只有迎难而上去掌握它,并把它应用到我们的网页上,使我们的网页更加活跃起来。
页次:4/4 1篇/页 首页 上一页 下一页 尾页 合计 4 篇 Go: |