How to detect area tag onClick in a Image Map in React

Question

I want to detect the onClick & onHover on different parts of a image.

<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>

I use react library for developing my website. I am not able to detect the onClick event. Are there any other alternative?

Can you try like `onClick={this.consoleMessage("bpleft").bind(this)}`? — Suresh Ponnukalai, Feb 15 '18 at 05:53
Bind them, you can do this onClick={()=> code} or (this is better) onClick={method} and method=() => {code} — Barbaros, Feb 15 '18 at 05:59
Binding them to the area needed is the best route to take in this case. — Mark, Feb 15 '18 at 07:52

score 4 · Answer 1 · answered Jan 22 '21 at 17:15

4

I suggested you to use a maintained library with the all feature of react-image-mapper with extra functionality like responsive

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

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

answered Jan 22 '21 at 17:15

Nisharg Shah

16,638
10
62
73

score 2 · Answer 2 · answered Mar 09 '20 at 09:29

2

I'm currently doing exactly the same myself and have stumbled across this Package: React Image Mapper

So far, it seems to do everything I need. Hopefully it's of use to someone else in the future.

answered Mar 09 '20 at 09:29

Stu1986C

1,452
1
18
34

kindly do you have a code sample? I am not able to get the links(href) working. – Daniel Otieno Nov 18 '20 at 00:06

How to detect area tag onClick in a Image Map in React

2 Answers2