IT技术博客大学习 共学习 共进步
全部 移动开发 后端 数据库 AI 算法 安全 DevOps 前端 设计 开发者

优雅地扩大链接响应区域

Koubei UED 2010-09-24 23:48:43 累计浏览 3,513 次
本机暂存

    合理地扩大页面链接响应区域可以提高网页的易用性。同时还要兼顾到链接的交互一致性以及视觉上的平衡,就需要做一些特殊的处理。

.entry p {text-indent:0}

实例一:一张图配一个链接。

    原图已失效

    常规的做法有以下几种:

    第一种是最常规的,只有链接可点,但整张图不可点,点起来还蛮累的。

    原图已失效

    第二种是把整张图作为一个链接,链接响应区域是够大,但其实那个链接就比较尴尬,不够优雅。

    原图已失效

    第三种是需要前端开发兄弟比较费劲点,设计师要求链接能正常工作,图也能点。前端一听,这链接又没法嵌套,还得整点JS才能搞定,得把图加上click的响应。这个比以上两种都好一些,但仍然不够理想,因为两个链接的交互一致性不够,用户对点图和点链接是不是去同一个地方会存在疑虑。

    这样或许会优雅一些:

    鼠标移入图片上,链接也要给出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、这个方案有个附带的好处,因为整个模块只要一个链接,如果是个手工维护的模块,更新的时候很省事。

同分类推荐文章

  1. translateZ() (2026-06-25 21:18:56)
  2. translateY() (2026-06-25 21:17:56)
  3. translateX() (2026-06-25 21:16:01)

查看更多 前端 文章 →

建议继续学习

  1. JQuery实现Excel表格呈现 (累计阅读 48,350)
  2. 50个活力和动感的网页设计-颜色的灵感 (累计阅读 34,442)
  3. 深入理解Javascript之执行上下文(Execution Context) (累计阅读 18,406)
  4. 从输入 URL 到页面加载完成的过程中都发生了什么事情? (累计阅读 15,934)
  5. 图片动态局部毛玻璃模糊效果的实现 (累计阅读 14,849)
  6. 天朝第二代身份证号码的验证机制 (累计阅读 14,764)
  7. HTML 5 的data-* 自定义属性 (累计阅读 14,349)
  8. 分享一个JQUERY颜色选择插件 (累计阅读 14,224)
  9. 什么是全栈工程师? (累计阅读 14,039)
  10. 视觉设计前瞻实用性研究(PNVD) 第二期 (累计阅读 12,977)