javascript - 从 ReactJS 中的图像中提取链接文本坐标

Question

我有一张.png不同颜色的图像，可以将文本与链接区分开来。我需要从该图像中提取链接文本并将其转换为该图像中的可单击链接，即我根据其颜色提取文本或仅标记可单击区域。我还需要记住，这不会在不同的分辨率或浏览器窗口大小上中断，即由于应用了 CSS，可点击区域不可点击。

我尝试过创建地图。

<img src="workplace.png" alt="Workplace" useMap="#workmap" style={{maxwidth:`99%`}}>

<map name="workmap">
  <area shape="rect" coords="34,44,270,350" alt="Computer" href="computer.htm">
  <area shape="rect" coords="290,172,333,250" alt="Phone" href="phone.htm">
  <area shape="circle" coords="337,300,44" alt="Cup of coffee" href="coffee.htm">
</map> 

它基本上标记了图像中可点击区域的坐标并映射到链接。

我还将style={{maxwidth:99%}}应用于img标签，以便图像适合浏览器窗口，以避免由于图像很大而向右滚动。然而，当我将style={{maxwidth:99%应用}}到我img的 时，坐标发生了变化。

有没有更好的解决方案？有没有办法让我动态地找到这些链接文本（通过根据颜色差异提取内容）然后将它们转换为链接，而不是先找到坐标然后硬编码它们？

标签： javascripthtmlcssreactjsarea