I am attempting to create a simple calculator and having difficulty figuring out if I can use eventlisteners on map>area elements over an image.. or if I need to use button or a and use the coordinates or how I would go about making the areas of the image of this calculator clickable buttons that I can make do things in js. Sorry if this question is a little convoluted, my brain is a bit swimmy at the moment.

CodePudding user response：

Modern browsers will support CSS flexbox or grid. Style up the boxes inside boxes to resemble a calculator and script up a solution using keyup events.

CodePudding user response：

If I'm understanding your question properly, you can definitely make clickable elements that execute JS over an image - using an image map.

You can looking at this W3 example , and then just try adding in your own onClick event to one of the elements. Maybe trying pasting this into the link above

<map name="workmap">
  <area shape="rect" coords="34,44,270,350" alt="Computer" onClick="console.log('test')">
</map>

Alternatively, you could just actually overlay an html element (like a button) over the image.

With that being said, if you want even the faintest amount of responsiveness to your UI (i.e. text showing the numbers you typed in or button animation). You really shouldn't use an image with an imageMap. You are much better off just designing the buttons and calculator yourself using HTML. So assuming you're trying to build a calculator app, I wouldn't use an imagemap.