优雅地扩大链接响应区域
作者：大米 来源：koubei UED 发布时间：2010-09-25 13:04:00
合理地扩大页面链接响应区域可以提高网页的易用性。同时还要兼顾到链接的交互一致性以及视觉上的平衡，就需要做一些特殊的处理。
实例一：一张图配一个链接。
常规的做法有以下几种：
第一种是最常规的，只有链接可点，但整张图不可点，点起来还蛮累的。
第二种是把整张图作为一个链接，链接响应区域是够大，但其实那个链接就比较尴尬，不够优雅。
第三种是弄两链接，文本链接之外，图本身再配个链接。这个比以上两种都好一些，但仍然不够理想，因为两个链接的交互一致性不够，用户对点图和点链接是不是去同一个地方会存在疑虑。
这样或许会优雅一些：
图片可点，鼠标移入图片上，鼠标变手型的同时文本链接变为hover状态。这样即有足够的链接响应区域，又有很好的交互一致性，暗示用户点图和点链接去的是同一个地方，如图所示：
前端代码角度上，就是把链接a标签包住整个图，那段文字用其他标签表示，比如span，再定义a的hover状态下，把span变成链接色，并加上下划线，来模拟hover效果。
实例二，可链接的标题配一段对标题的详细描述。
在这个例子中，视觉角度来看，一片文字需要主次清晰，所以链接色只加在了标题上。那么详细描述部分该不该响应点击呢？非链接色出hover效果会不会有点怪呢？即使决定这儿可以链接，那hover效果导致出现大片的hover色和多行下划线，视觉设计师会跟你急吧。
这样或许会优雅一些：
让详细描述响应点击，同时让hover效果出现在标题上。如图：
还有更复杂的模块，可以套用这个方式来做，比如下面这个例子：
另外一些说明：
1、前端代码问题
虽然在html4中，作为inline属性的a只能在里面嵌套inline的标签，可以看下XHTML1.1标签列表、属性和嵌套规则（抱歉未找到HTML4的，它们类似）。但在html5中，语法定义者扩大了它的嵌套能力，我们可以用a把各种block标签统统包进来。详见html5中对a的特别说明：http://www.w3.org/TR/2010/WD-html5-20100304/text-level-semantics.html#the-a-element （感谢钨龙提供资料）。毕竟HTML5还处于草案阶段，这种嵌套方式，还是偶尔会出现一些对链接的浏览器渲染问题，但目前还未发现出错规律。
2、a标签包含的整个区域内，只响应链接了，文本拷贝比较麻烦点，需要在更大范围外进行拷贝。所以如果对拷贝文字有要求的模块，不适合采用这个方式。
3、这个方案有个附带的好处，因为整个模块只要一个链接，如果是个手工维护的模块，更新的时候很省事。
0
投稿猜你喜欢
- 在网站建设中，分类算法的应用非常的普遍。在设计一个电子商店时，要涉及到商品分类；在设计发布系统时，要涉及到栏目或者频道分类；在设计软件下载这
- 代码如下:<％ sBASE_64_CHARACTERS = "ABCDEFGHIJKLMNOP
尽管现代浏览器已经支持了众多的CSS3属性，但是大部分设计师和开发人员貌似依然在关注于一些很“主流”的属性，如border-radius、b- 获取一组radio被选中项的值var item = $(’input[@name=items][@checke
- 如何用SysOjects来获知数据库的信息？SysObjects中就保存了数据库中所有对象的信息，如：SELECT * FROM SysOb
- 近期公司准备开发一个计费项目，数据库当然还是选用我最信赖的Oracle了。由于一部分基础数据在一台Win2000 Server的S
- Logminer是每个Dba都应熟悉的工具，当一天由于用户的误操作你需要做不完全的恢复时，由于你无法确定这个操作是哪个时间做的，所以这对你的
- 阅读上一篇：WEB前端开发经验总结 ⅠWEB标准篇现在我们接着来讲怎么在实际开发中结合我前面所讲的理论来开发制作页面吧。现在就来看看我们要制
- 第一步肯定是打上SQL SERVER最新的安全补丁.如果这一步都没有做好，那我们也没有继续下去的必要了。 第二步是修改默认的1433端口，并
- 这篇论坛文章着重介绍了SQL Server数据库简体繁体数据混用的问题，详细内容请参考下文：我现在要说的是一个在简体繁体数据混用的时候很容易
- 分页，就是按照某种规则显示分组数据集，但是在SQL Server 中，分页并不是十分容易就能够实现。在过去，开发人员通常需要自己编写程序，使
- 由于系统自带的MySQL默认字符集不是gbk,因此给数据库的推广应用以及中文程序的开发带来极大的不便,在没完没了的GBK和UTF8的转换过程
- 相信很多与页面打过交道的同学都对 Yahoo 的 Best Practices for Speeding Up Your Web Site
- 前两天看见有人问静态网页加密问题，就写了这个代码稍微有些长，解释一下思路：加密时：先把用户的密钥A用md5加密为B,然后用B异或源文件S0得
- 由 John Resig 的 How JavaScript Timers Work 可以知道，现有的 JavaScript 引擎是单线程处理
- 我们在使用很多新闻系统的时候，都会发现一个问题，尤其是使用 HtmlEdit 从WORD文档中直接拷贝文章（尤其里面有复杂表格和文字）的时候
- 作用: 构建一些简单的SQL语句，结合在提交表单时使用，可以较方便<％@LANGUAGE="VBSCRIPT&
- 在CSS布局中，ul，li的运用是非常常见的。配合DIV与CSS，创建无表格布局。 其实Dreamweaver中也有自带的CSS布局的范例，
- dim sql_injdata,SQL_inj,SQL_Get,SQL_Data,Sql_PostSQL_injdata = "&
- 缓动，学名为Tween，缓冲移动的简称。要想页面内容切换起来舒服，就使用淡入淡出特效，要想让页面元素动起来自然，就要使用缓动效果。这两个混合
