CODEWITHSUNDEEP
reactjs
Daxter44
Daxter44

Reputation: 125

Interactive image in React

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 : PaulRiccard

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

Answers (2)

alepaff
alepaff

Reputation: 103

Upvotes: 1

Amir-Mousavi
Amir-Mousavi

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

Related Questions