Html用图像作为按钮

Html用图像作为按钮
正如在第 4 章所讨论的，有关图像的最重要方面之一，是它们如何与<a>元素结合创建按钮。要把一幅图像作为按钮，在锚中使用如下的语法：
<a href="http://www.democompany.com"><img src="logo.gif"></a>
当该网页在浏览器中显示时，通过点击图像可以把用户带到指定的目标 URL。通常情况下，为了指明一幅图像是可以点击的，浏览器将在图像周围加上边框，并在鼠标指针或其他定点设备移到可点击区域上时给用户某种反馈信息，比如将鼠标指针变为手形或者加亮文字。图 5-13 列出了一些基本反馈类型：边框、手指指针和目标 URL。

图 5-13    用图像作链接反馈
 网页设计者们可能会觉得可点击图像周围的边框很烦人，在这种情况下，可以把该图像的 border 属性设置为 0 以关闭边框，例如:
 <a href="http://www.democompany.com"><img src="logo.gif"  border="0"></a>
当然，如果没有了边框，可能会使人难以确定页面上的哪些图像是链接，哪些图像不是，用户可能必须在屏幕上四处移动鼠标以寻找可点击区域。避免这个可用性问题的方法之一是，在可点击的图像上提供视觉提示，例如，浮雕效果、倾斜图像或者阴影，如图 5-14所示。

图 5-14    可提高易用性的按钮风格样本
虽然从设计观点上看，这些手段，特别是图像阴影，显得有些大材小用，但是，为图形按钮加上反馈信息确实有着切实的好处。另一种为可点击图像提供反馈的方法是动画按钮，只需要使用很简单的 JavaScript，就能够将按钮动画化，即当鼠标移动到可点击图像上时，图像会活动起来。第 13 章简要讨论了如何使用脚本语言如 JavaScript 来制作动画网页。
 当不用于按钮时，border 属性也能够用来为图像周围加上边框。很多时候人们使用图形工具来给图像加上框架，border 属性也能达到大致同样的效果，而且能够节省对带宽的需求。在不可点击的图像上，把 border 属性设置为正数——例如，<img  src="portrait.gif" border="5">——能够很容易地为图像加上边框。