本文介绍了图像特定区域的可点击链接的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我有一张地图的图像它在地图上有特定的区域名称,但它只是一张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>

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

07-31 12:46