图像特定区域的可点击链接 [英] Clickable link on specific area of an image

问题描述

我有一张地图的图像它在地图上有特定的区域名称，但它只是一张PNG图像。我希望用户能够点击地图上的名字并转到特定的棋盘。

I have an image of a map It has specific area names on the map but it is all just a PNG image. I would like the user to be able to click a name on the map and be taken to a specific board.

例如，地图上有三个名字。每个名称都在不同的X和Y坐标，如果用户点击 X：100，Y：300 左右，他们将被带到董事会，而如果他们点击 X：400，Y：100 ，他们将被带到另一个董事会。

For example, the map has three names on it. Each name is at a different X and Y coordinate, if a user clicks at X:100, Y:300 or so, they'd be taken to a board whereas if they clicked at X:400, Y:100, they'd be taken to another board.

我是考虑到使用< canvas> 和 javascript ，但我不确定如何。

I've thought about using <canvas> and javascript for this but I'm not sure how.

推荐答案

您正在寻找 map 元素，

You are looking for map element,

HTML < map> 元素与< area> 元素一起用于定义图像
map（可点击的链接区域）。

The HTML <map> element is used with <area> elements to define an image map (a clickable link area).

你需要看一下 area 查看其属性为了获得理想的结果

And you will need to take a look at area to see its attributes in order to get the desired outcome

这是一个基本的 DEMO

Here is a basic DEMO

这些链接不会加载到SO片段中

<img usemap="#image-clickable" src="http://placehold.it/350x150" alt="image">

<map name="image-clickable">
  <area shape="circle" coords="75,75,75" target="_blank" href="https://google.com">
  <area shape="circle" coords="275,75,75" target="_blank" href="https://google.com/ncr">
</map>

这篇关于图像特定区域的可点击链接的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！