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

Question

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

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

任何人都可以通过代码帮助我吗???

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

提前致谢:)：）

Answer 1

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

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

Answer 2

一种方法是使用Image map

Answer 3

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

Answer 4

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

真的，只是不要使用imagemap。你会后悔的。

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

再次修改：Here, i made it for you.

Answer 5

使用地图

样品：

<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的左上顶点的坐标（“home tab”），而（x2，y2）是同一矩形的右下顶点。对于那里的所有矩形等等。