score:2
Accepted answer
You can use the <map>
and <area>
tags like below. You can add more <area>
tags for each "button" and give it an action. You'll have to play around with the coords
a bit.
function doSomething() {
console.log("click");
}
function doSomething2() {
console.log("click2");
}
<img src="https://i.stack.imgur.com/suFoO.jpg" width="imgwidth" height="imgheight" alt="alttext" usemap="#mapname">
<map name="mapname">
<area shape="rect" coords="40,10,130,130" alt="alttext" onclick="doSomething()">
<area shape="rect" coords="130,10,250,130" alt="alttext" onclick="doSomething2()">
</map>
Source: stackoverflow.com
Related Query
- Clickable elements inside an image - web board game
- React-router clickable elements inside Link
- How to pause setInterval for the image elements inside a React Carousel Component?
- Return multiple elements inside React.render()
- Image elements do not have explicit width and height
- Creating a web worker inside React
- How to Lazy load the background image inside the inline style property (React)?
- importScripts in Web Workers is undefined inside a React/Webpack environment
- Best way to compress an image Javascript React Web App
- How do I target DOM elements inside a react component, or should I avoid targeting DOM elements all together?
- Use flutter web widgets inside a react js app
- How to display every image inside an image folder in react
- How to make a link clickable in React.Js inside render?
- How to access environment variables inside React JS web app?
- Using web worker inside redux selector
- Keeping sticky positioning behaviour when sticky elements are inside a container (because of React having to render a single parent element)
- Issue with UI event when rendering component inside a web component shadow DOM
- Call web api method inside ReactJS web worker with axios
- Make a button inside an element clickable while the element itself is also clickable
- Web App runs inside Webview and installed like a native App
- Conditionally render multiple elements inside a react fragment
- Container's style to vertical align image inside
- I want to make a clickable element inside a Link without it behaving like a link
- Integration of react / redux and unity for web game developement
- Convert Blob to image inside Cell in React
- How to upload image from React to ASP.NET Core Web API?
- How to draw connecting lines between web elements on a page
- Any idea how to check if a div contains ONLY an image tag inside it?
- How to Insert an image inside an input field in react js?
- Select element with clickable image component
More Query from same tag
- React App returns error after refresh
- How to add min to redux form field
- In vis.network, is it possible to set a node as the center of gravity?
- How can I filter the number of products shown in React?
- Using class instances in react state
- cookies.remove('abc') not working in reactJs
- react Login with useContext useReducer basic example
- react-konva - Handle transformer select, deselect and hover?
- React file upload Component with jquery blueimp file upload plugin
- "No style rules found on passed Component" when unit testing direct child of styled component using react-testing-library
- Array is not getting updated by useState
- How to show error only if Field is touched? | React && Formik
- Typescript is giving me undefined when appending data
- Wordpress Gutenberg: React components on front end
- Insert tab character into SlateJS text editor
- What is causing the bug in "mix-blend-mode mode" with .mp4 on Firefox?
- prevState in componentDidUpdate is the currentState?
- How can I create react element in another?
- Getting Error: Cannot read properties of undefined (reading 'map')
- Rendering HTML inside a prop
- Flux/Alt setTimeout not updating store
- Print the select value to console with onChange() similar to onSelect()
- React handling click outside for multiple elements
- ReactJS transferring props to dynamic component
- Http get request using axios in react.js
- How can i pass data from ReactJS submit form to AdonisJS
- Disable TouchableHighlight onPress?
- How to get the current url path using hook router in react?
- react 17.0.1 object.entries create dynamic table
- how to use onClick while mapping