这是一个创建于 4549 天前的主题，其中的信息可能已经有所发展或是发生改变。
做过淘宝/拍拍美工的都知道切图然后建立链接是件很恶心的事情。
为了不切图，今天尝试了用a标签覆盖在背景图像上和纯CSS实现两种方法，毕竟真心讨厌切图……
恶心的拍拍只支持内联样式不支持javascript，然后我快实现完成的时候chrome挂掉了，没保存。
操蛋了……
***
然后找到了用<map>做映射的办法。
不过一个像素一个像素的打上去更蛋疼。google到一个站点：
http://www.maschek.hu/imagemap/imgmap
上传图像，拖出rectangle框，输入链接，然后copy代码弄上去，完事……
唯一不够好的地方是rectangle只能单独调节x/y坐标。虽然google排名第一的http://www.image-maps.com/ 有这个功能，但是GUI和ads实在令人看不下去。所以还是推荐这个……
为了不切图，今天尝试了用a标签覆盖在背景图像上和纯CSS实现两种方法，毕竟真心讨厌切图……
恶心的拍拍只支持内联样式不支持javascript，然后我快实现完成的时候chrome挂掉了，没保存。
操蛋了……
***
然后找到了用<map>做映射的办法。
不过一个像素一个像素的打上去更蛋疼。google到一个站点：
http://www.maschek.hu/imagemap/imgmap
上传图像，拖出rectangle框，输入链接，然后copy代码弄上去，完事……
唯一不够好的地方是rectangle只能单独调节x/y坐标。虽然google排名第一的http://www.image-maps.com/ 有这个功能，但是GUI和ads实在令人看不下去。所以还是推荐这个……
 |
1
regent 2012-06-10 17:05:23 +08:00
楼主能不能详细介绍一下
|
 |
2
Keinez OP @regent
图像映射的介绍见这里 http://www.w3school.com.cn/tags/tag_map.asp 淘宝/拍拍等电商网站提供给卖家的模块，多使用简单的table布局。由此美工需要大量进行切图等繁复工作，单调重复劳动不说，页面载入性能同样很差。 所以推荐这种方式，相比切图/手动输入代码的工作量少得多，劳动量和页面效率可以平衡一下（当然你要想自己打模块代码我也没意见）。 作为一个好美工（前端），想办法优化页面性能是应该的:) |
 |
3
rails 2012-06-10 17:56:16 +08:00
懂了,谢谢分享
这个就是"图片热点"了,这样做起来确实简单了不少 |
Select Language