使图像的某些部分可点击答案

【问题标题】：Make some parts of image clickable使图像的某些部分可点击
【发布时间】：2014-12-07 23:33:46
【问题描述】：

我想让这张图片中的某些徽标可点击到网址。

这是图片http://i.imgur.com/PaTb5F2.png

例如：

我想要 betfair 并要求现在打开 www.betfair.com
比Bet365 Logo打开www.bet365.com
比 Betvictor 标志打开 betvictor.com
以及所有投注文本以在他们旁边打开网站

我该怎么做？

【问题讨论】：

使用 Dreamweaver，这个编辑器有一些工具
我认为在 html 中使用 <a> 标签很容易
所以使用带有嵌套<a>元素的HTML表格（这是不是一个很好的使用<img />元素）；这样，盲人、弱视的读者也可以访问内容（并且不会违反任何反歧视立法）。

标签： javascript html image

【解决方案1】：

将图片放入锚标签中，并添加target="_blank" 以在其他选项卡中打开链接。

<a href="link" target="_blank"><image></a>

【讨论】：

【解决方案2】：

您可以使用 HTML 地图。您可以通过坐标定义图像内的不同区域，例如，

<img src="PaTb5F2.png" width="145" height="126" alt="logo" usemap="#map">

<map name="map">
  <area shape="rect" coords="0,0,82,126" alt="365" href="www.bet365.com">
  <area shape="circle" coords="90,58,3" alt="fair" href="www.betfair.com">
</map>

【讨论】：

【解决方案3】：

使用这个代码，我从 w3schools 得到的，它对你很有帮助

<img src="planets.gif" width="145" height="126" alt="Planets" usemap="#planetmap">

<map name="planetmap">
<area shape="rect" coords="0,0,82,126" alt="Sun" href="sun.htm">
<area shape="circle" coords="90,58,3" alt="Mercury" href="mercur.htm">
<area shape="circle" coords="124,58,8" alt="Venus" href="venus.htm">
</map>

查看此链接：http://www.w3schools.com/tags/att_img_usemap.asp

【讨论】：

【解决方案4】：

查看 HTML 区域地图/HTML 图像地图。这有很多关键字，但它们大多指向相同的 html 代码。

你有一个 img 标签：

<img src="IMAGE.png" width="X" height="Y" alt="ALT" **usemap="#map"**>

usemap 属性指向 HTML 地图，如下所示：

<map name="myMap">
  <area shape="rect" coords="10,10,50,100" href="www.your.link" alt="ALT">
  ... more <area> are possible
</map>

有很多教程可以帮助您使用<area> tags 的选项，只需 google 即可。

HERE a generator i googled

【讨论】：

【解决方案5】：

在此处查看 HTML 图像地图标签： http://www.w3schools.com/tags/tag_map.asp

<img src="planets.gif" width="145" height="126" alt="Planets" usemap="#planetmap">

<map name="planetmap">
  <area shape="rect" coords="0,0,82,126" href="sun.htm" alt="Sun">
  <area shape="circle" coords="90,58,3" href="mercur.htm" alt="Mercury">
  <area shape="circle" coords="124,58,8" href="venus.htm" alt="Venus">
</map>

【讨论】：

虽然此链接可能会回答问题，但最好在此处包含答案的基本部分并提供链接以供参考。如果链接页面发生更改，仅链接的答案可能会失效。
有道理，我把相关部分复制进去