I have a .png image with different colors differentiating text from Links. I need to extract the link text from this image and convert it to a clickable Link within that image i.e either I extract the text based on its color or I simply mark the area which is clickable. I also need to keep in mind that this doesnt break on different resolutions or browsers window sizes, i.e. clickable area isnt clickable due to applied CSS.
I have tried creating a map.
<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>
which basically marks the coords of a clickable area within the image and map to a link.
I am also applying style={{maxwidth:99%}} to the img tag so that the image fits within the browser window to avoid scrolling to the right because the image is big. However the moment I apply style={{maxwidth:99%}} on my img, the coords changes.
Is there a better solution to this? Is there a way for me to find these link text dynamically (through extracting the content based on its color difference) and then convert them to links instead of first finding the coords and then just hardcoding them?
