html - 浏览器游戏 - 图像的可点击区域

Question

我正在尝试克隆一个名为 Travian 的流行浏览器游戏。有一个/farms页面，用户可以概览它的所有农场（我现在假设每种农场的位置总是相同的）。每个农场都可以升级到另一个级别（最多 20 级），当前级别将显示在/farms页面上。如果当前农场等级为 0，则不会显示数字。

我遇到的问题是在同png一张图片上，每个资源应该有 20 个不同a links，这将在用户单击任何白色圆圈时完成。我怎样才能做到这一点？

Answer 1

我敢说。但可能 html 图像地图是一个潜在的解决方案。

https://www.w3schools.com/html/html_images_imagemap.asp

请注意，该技术并未在现代开发实践中广泛使用，因为它们在移动设备上并不好。Svg 替代品可能也值得一看。

http://thenewcode.com/696/Using-SVG-as-an-Alternative-To-Imagemaps