如何在React中的图像映射中检测区域标签onClick

时间:2018-02-15 05:22:45

标签: html image reactjs imagemap

我想检测onClick& onHover在图片的不同部分。



<img src={physicalimage} id="physicalimage" usemap="#image-map"/>
   <map name="image-map">
   <area target="" onClick={this.consoleMessage("bpleft")} alt="bpleft" title="bpleft"  coords="223,201,269,254" shape="rect" />
   <area target="" onClick={this.consoleMessage("bpright")} alt="bpright" title="bpright" coords="60,199,101,259" shape="rect" />
   <area target="" onClick={this.consoleMessage("heart")} alt="heartrate"  title="heartrate" coords="169,124,219,183" shape="rect" />
</map>
&#13;
&#13;
&#13;

我使用react库来开发我的网站。我无法检测到onClick事件。还有其他选择吗?

2 个答案:

答案 0 :(得分:0)

我目前正在做完全相同的事情,偶然发现了这个软件包:page

到目前为止,它似乎可以满足我的所有需求。希望将来对其他人有用。

答案 1 :(得分:0)

我建议您使用具有 react-image-mapper 的所有功能和 extra 功能的维护库,例如 responsive

https://github.com/NishargShah/react-img-mapper

https://www.npmjs.com/package/react-img-mapper