'Interactive Image/Graphic in React/Html

Im fairly new to react/html and im trying to make an interactive Graphic/Image, such that when a mouse hovers over a circle it highlights a colour and when i click it turns to a colour. Is it possible to do this? Can i get some advice on how its possible to do this without hardcoding different images to load once one (or more) have been clicked.

Thanks Heaps!

enter image description here

htmlreactjssvg


Solution 1:[1]

First you create a circle Component with onMouseEnter and onMouseLeave methods to change the display color when mouse enters and leaves the circle Component

and then you can use an onclick method to change the color when it is clicked.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1

Related Questions