>source

모든 f1 트랙이 설명 된 프로젝트에 대한 아이디어가 있습니다. 내 비전에서 사용자가 그림의 숫자에 mouseOver가 설명과 함께 모달을 표시해야 할 때 트랙의 대화식 맵을 만들고 싶습니다. 트랙은 다음과 같아야합니다.

어떻게 시작해야할지 모르겠습니다. 제 React 기술은 매우 기본적이지만이 프로젝트는 저를 많이 배워야합니다. :) 인터랙티브 트랙으로이 컴포넌트를 어떻게 만들 수 있는지 설명하고 저를 도와 줄 수 있습니까?

  • 답변 # 1

    면적 태그를 사용하여 스크립트를 실행할 좌표를 정의 할 수 있습니다. 이것은 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>
    
    

관련 자료

  • 이전 python - 제네릭 클래스에 대한 클래스 메서드
  • 다음 bash - awk 일치하지 않으면 "unknown"인쇄, 여러 일치