有意思团队-友商用户体验团队博客

都知道，a标签通常就是利用href的属性来创建超文本链接，用来链接到互联网中的某个位置，就像网中的一个节点。Internet也因它而神奇。

除了它本身的作为超链接的源的应用外，还有什么扩展应用呢。

1.最简单的，<a href=”xx.xx”><img src=”xxx.jpg”/></a>，这种是最初的扩展，利用图像作为a的内容，而不仅仅是文字，这样就能使得链接看起来更直观，更醒目。

2.javascript ，有时候，为了在点击a标签时能够触发某些事件，你可以在<a >内写javascirpit，例如：< a href=”#” onclick=”alert(”fafsfs”);”>xxx</a>。

3.还有一种，能够给浏览者更进一步的良好体验，就是让鼠标hover时，< a>能够变换视觉效果。

mail.163.com的做法：

利用了onmouseover和onmouseout事件将这个INPUT上的class进行切换，使得背景变换。

优点：对很多元素都可以使用这个方法。

缺点：要添加额外的脚本，如果浏览者禁用脚本，就不会起作用。

CSS:

HTML：

< input type=”submit” onclick=”setCookie
(’ntes_mail_firstpage’,’normal’);saveLoginType();”

onmouseout=”this.className=’btn1′”

onmouseover=”this.className=’btn2′” class=”btn1″ value=””
title=”登录邮箱” name=”登录邮箱”/>

———————-

yahoo.com，youshang.com的做法：

将a（本是行内元素）的display属性设置为block，让它以块元素呈现，这样，就能将图片应用到它的背景上，并且可以通过link,hover来进行变换背景。。这个是比较常用的方法，友商网，mp3.com也大量采用这种方法。

优点：是不用写javascript也能实现背景变换，更轻巧。。

缺点是：如果你将a的背景图分开，那么在IE下会有闪烁的现象，所以建议将这两张图利用CSS SPRITE合成在一起，通过background-position进行定位。

Test url(左侧的免费体验按钮): www.youshang.com

CSS:
#yatcfmenu .yui-nav .capacity-link:hover {
background:transparent url
(http://l.yimg.com/us.yimg.com/i/us/aut/gr/ui07/carfinder_20080114a.png) no-repeat scroll -1055px -35px;
}
#yatcfmenu .yui-nav .capacity-link {
background:transparent url(http://l.yimg.com/us.yimg.com/i/us/aut/gr/ui07/carfinder_20080114a.png) no-repeat scroll -1055px 0px;
width:165px;
}
#yatcfmenu .yui-nav li a {
display:block;
float:left;
height:25px;
margin-top:5px;
overflow:hidden;
text-indent:-9999px;
}
HTML：
<a class=”capacity-link”

href=”http://autos.yahoo.com/carfinder/?

expanded=capacity”>Seating and Capacity</a>

———————