使用映射在同一图像上的各种链接答案

【问题标题】：Various link on the same image using mapping使用映射在同一图像上的各种链接
【发布时间】：2011-07-08 07:41:58
【问题描述】：

我有一张带有各种导航标签的图片，如下所示：-

我希望我使用相同的图像通过映射或某些坐标指向不同的链接。

任何人都可以通过代码帮助我这样做吗？？？

或者任何链接都可以完成这项工作。

在此先感谢 :) :)

【问题讨论】：

我希望同一张图片在点击不同的地方时指向不同的链接......
我用 CSS 和你的图片为你做了一个，我只添加了两个链接，但我想你明白了。比图像地图容易得多。 jsfiddle.net/qQjBf/6

标签： html hyperlink navigation mapping

【解决方案1】：

使用地图

样本：

<img src=ur_image usemap="#linkmap">

<map name="linkmap">

    <area shape="rect" coords="x1,y1,x2,y2" href="url_1" />

    <area shape="rect" coords="some other coords" href="url_2" />

    <area shape="rect" coords="some other coords" hhref="url_3" />
</map>

其中 (x1,y1) 是矩形 1 的左上角顶点坐标（“主页选项卡”），而 (x2,y2) 是同一矩形的右下角顶点。对于那里的所有矩形，依此类推。

【讨论】：

【解决方案2】：

一种方法是使用Image map

【讨论】：

【解决方案3】：

您可以使用地图标签。这是一个例子： http://www.w3schools.com/tags/tryit.asp?filename=tryhtml_areamap

【讨论】：

hmm...那很好...:) 但是你能告诉我矩形的这 4 个坐标代表什么吗？ (u,v,w,x)。我的意思是它们在我的图像上代表什么？？
@Prashant 检查我的答案，我已经解释了这 4 个坐标的含义。

【解决方案4】：

我可以建议使用 CSS Sprites 而不是图像映射吗？如果没有，请通知我，以便我们一起工作？

图像地图有很多用途，其中最重要的用途之一是在地图（图像）上标记一些热点，以便用户可以单击该部分并转到另一个页面。但是开发人员和设计人员不久前使用它来创建导航菜单，为什么？让我们来看看。当您在文档中使用 10 个图像时，浏览器会向服务器发送 10 个请求以获取这 10 个图像。这就像你妈妈送你去厨房 10 次，一一拿来 10 把汤匙（想象一下！）。许多设计师为菜单项使用背景图像。因此，如果一个菜单有 5 个项目，它们通常使用 5 * 3 = 15 个背景图像（1 个用于正常状态，1 个用于悬停，1 个用于选定，每个菜单项）。这意味着网站的负担、加载时间的缩短、服务器流量的增加以及更多的问题。因此，他们使用图像映射来加载图像一次，然后在客户端将其划分为可点击的部分，以将用户导航到所需的页面。但同样的效果也可以用于一种称为CSS Sprites 的技术。在这种技术中，这 15 个图像被捆绑到 1 个图像中，并且在客户端，通过对每个项目使用 CSS，只显示该图像的一部分。就像你妈妈让你去厨房拿 15 勺成捆的一样。

【讨论】：

【解决方案5】：

制作一个充满列表元素的无序列表。将它们显示为内联块。为每个列表提供背景图像、背景宽度、高度和位置，以获取其中正确的图像部分，然后将列表项包含在链接中。

真的，只是不要使用图像映射。你会后悔的。

编辑：这是link showing how it's done.

再次编辑：Here, i made it for you.

【讨论】：