Reputation: 125
I have an idea on project where all f1 track are described.
In My vision i want to make interactive map of tracks, when user mouseOver on any number on picture, should popup modal with description. Track should look like this :
I don't know how to start, my React skill is very basic but this project should learn me a lot :) Can You help me and describe a little how can I make this component with interactive track ?
Upvotes: 2
Views: 2581
Reputation: 103
Upvotes: 1
Reputation: 4593
You can use the area tag to define the coordination you want a script runs. This is not something React specific I think it is best to handle it with HTML tags.
<!DOCTYPE html>
<html>
<body>
<h1>The map and area elements</h1>
<p>Hover mouse over the computer to see the alert</p>
<img src="https://www.w3schools.com/tags/workplace.jpg" alt="Workplace" usemap="#workmap" width="400" height="379">
<map name="workmap">
<area onmouseenter="myEnterFunction()" 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>
<script>
function myEnterFunction(){
alert("Hello\nHow are you?");
}
</script>
</body>
</html>
Upvotes: 5