问题描述
我有一张地图的图像它在地图上有特定的区域名称,但它只是一张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.
推荐答案
您正在寻找元素,
You are looking for map
element,
你需要看一下查看其属性为了获得理想的结果
And you will need to take a look at area
to see its attributes in order to get the desired outcome
这是一个基本的
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>
这篇关于图像特定区域的可点击链接的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!