我有一个关于描述所有 f1 赛道的项目的想法。
在我的愿景中，我想制作交互式轨道 map ，当用户将鼠标悬停在图片上的任何数字上时，应该弹出带有描述的模式。轨道应该是这样的:
我不知道如何开始，我的 React 技能非常基础，但这个项目应该让我学到很多东西:) 你能帮我描述一下如何用交互式轨道制作这个组件吗？
最佳答案
您可以使用区域标签来定义您希望脚本运行的协调。这不是 React 特有的东西，我认为最好用 HTML 标签来处理它。
<!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>关于reactjs - React 中的交互式图像，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/65063856/