如何在图片上添加热点超链接
/ , 2:30 PM / 关键词:
经常看到很多大卖家的店铺都会制作热门标签（在一张图片上可以点击不同的超链接），这样可以方便客户快速找到自己想找的相关宝贝，制作热门标签非常有利于提高店铺的用户体验，下面我就来详细的说下如何制作这种热门标签。
这里我们需要用到html中的map标签，什么是map标签？说的通俗一点，map标签就是可以定义一张”带有可点击区域“的图像，也就是运用map标签可以在一张图片上添加N个超链接，而且所有主流浏览器都支持map标签。
那么如何使用这个map标签呢？首先，请看以下代码：
&img usemap="#图像名称" src="" /&
&map name="图像名称" id="图像名称"&
&area coords="0,0,0,0" shape="rect" href="#" &
1、&img /&标签里加入一个usemap="#图像名称"（这个图像名称随便自己写什么都可以，只要和下面的map图像名称一样即可。注意，图像名称前面有个#号）；
2、&map name="图像名称" id="图像名称"&&/map&（注意，这里的图像名称前面没有#号）；
3、这里是关键的一步，需要定义超链接，就需要用到map中的area，area可定义图像映射中的区域；
&area shape="rect" coords="0,0,0,0" href="#" &
&shape定义超链接的形状（rect=矩形），coords定义超链接形状的坐标（顺序为：左-上-右-下），href="#"超链接地址。
如何确定超链接的具体坐标呢？当然是使用photoshop了，首先把标尺设置为像素，使用放大工具，按照左上右下的顺序拉参考线。如下图，需要给“网”添加超链接（图片尺寸500*300）：
具体坐标就是：coords="150,55,355,95"
完整代码如下：（需要添加几个超链接就添加几个arca即可）
&img usemap="#map1" src="/attachments/date_ead63bcc445d219b3a29d34805cdbd.jpg" /&
&map name="map1" id="map1"&
&area coords="150,55,355,95" shape="rect" href="/" &
(6 条评论)
(26 条评论)
(12 条评论)
(8 条评论)
(20 条评论)
(8 条评论)
(13 条评论)
(8 条评论)
(2 条评论)
(55 条评论)
哦 这叫热点超链接啊原来 我还以为他们是把图片分割了又用表格拼起来实现的 哈哈
@vboy: 用Map制作热点超链接，对于后期维护会比较方便，只需要修改一张图片即可;
但如果是使用图片切割的方法，后期维护会非常麻烦，你需要同时修改好几张图片。
@GXzhou: 恩 受教了哈
哦原来是用这个，在轮播的图片上加超链
就会切片，但是最近切片切的行与行之间应用会有很大的间距，搞不懂什么原因……想用这个，但是看说明没看懂，能弄个具体的事例吗？
你好，我找到了坐标，但是为什么在淘宝里边还是没有找到超级链接的？打不开。请教
@traxjun: 那可能是你的代码有误，自己检查下代码
正确代码如下：
&img border=&0& height=&706& src=&图片地址& usemap=&#Map& width=&950& /&
&map name=&Map&&
&&&&&area coords=&9,4,416,398& href=&宝贝链接& shape=&rect& target=&_blank& /&
&/map&
亲，谢谢指教。
我写了这样的，但是还是不能链接。
&img border=&0& height=&150& src=&/imgextra/i1//T2TrOwXdNcXXXXXXXX_!!.jpg& usemap=&#Map& width=&950& /&
&map name=&Map&
&&&&&area coords=&70,95,175,130& href=&http://hj-/search.htm?spm=a1z10.1.w735.1.lGylIN&search=y&_blank& /&
&&&&&area coords=&175,130,275,130& href=&http://hj-/index.htm?spm=a1z10.3.w735.2.vVU56s& shape=&rect& target=&_blank& /&
&&&&&area coords=&275,130,390,130& href=&http://hj-/category-.htm?spm=a1z10.1.w735.8.83vEo0&search=y&catName=%D0%C2%BB%F5%C9%CF%BC%DC& shape=&rect& target=&_blank& /&
&&&&&area coords=&390,130,495,130& href=&http://hj-/category-.htm?spm=a1z10.5.w735.3.pYBx2H&search=y&catName=%C1%AC%D2%C2%C8%B9& shape=&rect& target=&_blank& /&
&&&&&area coords=&495,130,565,130& href=&http://hj-/category-.htm?spm=a1z10.5.w735.6.uvdgMp&search=y&catName=T%D0%F4& shape=&rect& target=&_blank& /&
&&&&&area coords=&565,130,655,130& href=&http://hj-/category-.htm?spm=a1z10.5.w735.4.0XOKV3&search=y&catName=%D0%DD%CF%D0%BF%E3%2F%B6%CC%BF%E3& shape=&rect& target=&_blank& /&
&&&&&area coords=&655,130,760,130& href=&http://hj-/category-.htm?spm=a1z10.5.w735.5.p6HHQa&search=y&catName=%D4%CB%B6%AF%D7%B0%2F%CC%D7%D7%B0& shape=&rect& target=&_blank& /&
&&&&&area coords=&760,130,905,130& href=&http://hj-/shop/view_shop.htm?spm=a1z0e.1.0.216.ozH5Vi&mytmenu=mdianpu&utkn=g,orzgc6dkovxa7&user_number_id=&scm=.20001& shape=&rect& target=&_blank& /&
&img border=&0& height=&150& src=&/imgextra/i1//T2TrOwXdNcXXXXXXXX_!!.jpg& usemap=&#Map& width=&950& /&
&map name=&Map&&&&&area coords=&175,130,275,130& href=&http://hj-/index.htm?spm=a1z10.3.w735.2.vVU56s& shape=&rect& target=&_blank& /&&/map&
根据教程做完后，点击区域不是在新窗口打开的，能不能做成新窗口打开
@roy: 我也想解决这个问题，找了很久的方法还没找到。之前通过Ps和DW完成的代码放到宝贝首页加自定义粘贴源代码就可以，但是放到宝贝详情页面的时候碰到了2个门槛，第一就是外部链接直接失效，第二就是有效链接不能新建窗口而是覆盖了原有窗口打开，这样的话对网店的整体转化率的影响很大的。有解决方案麻烦联系QQ：谢谢、
名字 (必填,如果已是注册用户请先登陆)
邮箱 (必填,不会被公开,只有站长才能看到)
网站（可填可不填，如填请加http://）
验证码 (必填)}