0

I have created a clickable area in an image and I want to get the Id of this area in Javascript so I can fill it with color. I am new in both html and js.

var myElement = document.getElementById("map1");
<img src={marina} alt="marinamap" usemap="#workmap" />
<map name="workmap">
     <area shape="rect" coords="320,220,340,210" alt=" parking" href="" id="map1"  >
</map>

I am getting the error :

a constructor,method,accessor or property was expected.

Any advice?

Jeremy Thille
  • 26,047
  • 12
  • 43
  • 63
KostasV
  • 3
  • 1
  • 4
    I made an executable snippet with your code (above) and when I run it, I'm not getting this error. I didn't alter the code in any way. – Jeremy Thille Mar 19 '21 at 12:51
  • are you using angular ??? – rahul.m Mar 19 '21 at 12:53
  • I am doing this in VS code to process a Lightning Web Component in Salesforce. You think the above code successfully gets the Id of the clickable part? – KostasV Mar 19 '21 at 12:59

1 Answers1

0

Well, it doesn't look that <area> tag is styleble at all... if all your areas are rectangular o round(ish) you may consider using just div's or any other tags positioned absolutely over the image like so... if those areas have more complex shapes you may need to use SVG instead... svg example

[ORIGINAL WRONG ANSWER - before comment received]

Probably related to "Can I have an onclick event on a imagemap area element?"

You may do what you need in the onclick event of your area like so:

<area shape="rect" 
      coords="320,220,340,210" 
      alt="parking" 
      href="#map1_target" 
      id="map1"  
      onclick="event.preventDefault(); this.style.background='#a00';"
>
dmikam
  • 992
  • 1
  • 18
  • 27
  • I would like to permanently colorize this part in the overlay so I don't think onclick event would do for now. – KostasV Mar 19 '21 at 13:04