reactjs React中的交互式图像

whhtz7ly 于 2023-02-08 发布在 React

关注(0)|答案(2)|浏览(134)

我有一个项目的想法，所有的f1赛道的描述。在我的愿景，我想使轨道的互动Map，当用户鼠标悬停在图片上的任何数字，应弹出描述模态。轨道应该看起来像这样：

我不知道如何开始，我的React技能是非常基本的，但这个项目应该让我学到很多：）你能帮我，并描述了一点我如何才能使这个组件与互动轨道？

reactjs

来源：https://stackoverflow.com/questions/65063856/interactive-image-in-react

2条答案

按热度按时间

q9yhzks01#

你可以使用area标签来定义你希望脚本运行的协调。这不是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>

赞(0）回复(0）举报 2023-02-08

iqjalb3h2#