优雅地扩大链接响应区域
作者：大米 来源：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
投稿猜你喜欢
在上篇文章给大家介绍过Django 多环境配置详解，感兴趣的朋友可以点击查阅，今天继续给大家介绍django 多环境配置的相关内容，本文重点- python程序结构python“一切皆对象”，这是接触python听到最多的总结了。在python中最基层的单位应该就是对象了，对象需要靠
- Python heapqheapq 库是 Python 标准库之一，提供了构建小顶堆的方法和一些对小顶堆的基本操作方法(如入堆，出堆等)，可
- 如何更改 pandas dataframe 中两列的位置：把其中的某列移到第一列的位置。原来的 df 是：df = pd.read_csv(
- 一、特效预览处理前处理后细节放大后二、程序原理1.输入你想隐藏的文字2.然后写到另一张跟照片同等大小的空白纸张上3.将相同位置的文字的颜色用
- 段正淳的css笔记（1）分类之间的横竖线：试想过总结出这几年来写css与xhtml的经验 ，汇总成一片”旷世奇文”分享给大家。无奈寡人年世已
- 前言初学者看到 Python 中的下划线 _ 时可能会有些懵圈，不知道这个到底是干什么用的，今天就来盘点一下 Python 中间的下划线有哪
- 细节汇总函数的形参列表可以是多个，返回值列表也可以是多个形参列表和返回值列表的数据类型，可以是值类型、也可以是引用类型函数的命名遵循标识符命
- 如何要恢复Master数据库呢?方法1:重装SQL，但是数据就Over掉了方法2:重建Master Rebuildm.exe 用到SQL的安
- 记得在网上Down的很多源码用的最多的一种方式就是：var ie = document.all();这是因为IE浏览器的document下有
- 一、验证码示例 二、php验证码类，secoder.class.php<?php/** * 安全验证码 * * 安全的验证码要：验证
- 保存Python程序，可以使用以下方法：使用编辑器编写代码并保存1、打开Notepad++2、需要新建文本时，点击左上角”文本“，在弹出的菜
- 以https://books.toscrape.com/网站为例：打开网页先把网页打开，然后右键检查，找到网络一栏，这个时候发现下面是空白，
- 在经过前面几个部分的操作之后，我们的网页已经图文并茂，具有相当的效果了，但是这对于网页来说还不够，为了网站中的众多网页能够成为一个有机的整体
- 师父布置的任务，让我写一个服务练练手，搞清楚socket的原理和过程后跑了一个小demo，很有成就感，代码内容也比较清晰易懂，很有教育启发意
- 一，PHP脚本与动态页面。 PHP脚本是一种服务器端脚本程序，可通过嵌入等方法与HTML文件混合，也可以类，函数封装等形式，以模板的方式对用
- 这篇文章主要介绍了基于python3实现倒叙字符串,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可
- 关于SQL Server 2014中的基数估计，官方文档Optimizing Your Query Plans with the SQL S
- PHP使用Swagger生成好看的API文档不是不可能，而是非常简单。首先本人使用Laravel框架，所以在Laravel上安装swagge
- 如下所示：function makeAcquire($nUsers,$nAwards) { &
