미국의 대화형 지도 만들기

10684 단어 htmlcssjavascript
이 튜토리얼에서는 HTML, CSS 및 Javascript를 사용하여 대화형 미국 지도를 만드는 방법을 배웁니다.

최종 결과는 여기에서 볼 수 있습니다: https://codepen.io/codecustard/pen/NWpZxey

첫 번째 단계는 지도를 SVG 형식으로 가져오는 것입니다. SVG를 사용하면 각 상태를 경로로 정의할 수 있으므로 CSS로 스타일을 지정하고 Javascript로 대상을 지정할 수 있습니다. 다음에서 무료로 미국 지도를 얻을 수 있습니다. https://simplemaps.com/resources/svg-us

SVG를 다운로드했으면 새 index.html 파일을 만들고 다음을 추가합니다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Interactive US Map</title>


    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div id="details-box"></div>


</body>


주목해야 할 핵심 사항은 "details-box"id와 "style.css"스타일시트가 연결된 div 요소입니다. "details-box"div는 각 상태 위로 마우스를 가져갈 때 호버 세부 정보 효과를 만드는 데 사용됩니다.

다음으로 할 일은 텍스트 편집기에서 svg 파일을 열고 "..."내용을 html 파일의 본문 태그에 복사하는 것입니다.

<body>
    <svg>
        ...
    </svg>
</body>


svg의 내용을 살펴보면 각 상태의 약어로 설정된 "id"와 각 상태의 이름으로 설정된 "data-name"과 같은 몇 가지 유용한 속성이 있음을 알 수 있습니다.

이제 다음을 사용하여 "style.css"라는 새 스타일시트 파일을 생성해 보겠습니다.

@import url('https://fonts.googleapis.com/css2?family=Poppins&display=swap');

path {
    stroke: white;
    fill:paleturquoise !important;

    transition: fill .4s ease;
}

path:hover {
    fill: orange !important;
}

#us-map {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

#details-box {
    padding: 1rem;
    border-radius: 8px;
    font-size: 24px;
    position: fixed;
    color: white;
    font-family: "Poppins";
    background-color: black;
    width: fit-content;
    transform: translateX(-50%);
    transition: opacity .4s ease;
    z-index: 1;
}


이제 body 태그 안에 다음 자바스크립트를 추가해 보겠습니다.

<script>
        var tooltipSpan = document.getElementById('details-box');

        document.addEventListener('mouseover', function (e) {
            if (e.target.tagName == 'path') {
                var content = e.target.dataset.name;
                document.getElementById("details-box").innerHTML = content;
                document.getElementById("details-box").style.opacity = "100%";
            }
            else {
                document.getElementById("details-box").style.opacity = "0%";
            }
        });

        window.onmousemove = function (e) {
            var x = e.clientX,
                y = e.clientY;
            tooltipSpan.style.top = (y + 20) + 'px';
            tooltipSpan.style.left = (x) + 'px';
        };
    </script>


그리고 그게 전부입니다. 이것은 웹을 검색하고 다음 웹사이트를 찾는 동안 영감을 받았습니다: https://www.playvs.com/high-school

모든 종류의 사용 사례에 이 효과를 사용할 수 있습니다. 사실, 미국 지도 대신 다른 것을 만들어 인스타그램에서 다음을 언급하여 공유해 보세요.
strtus 2 리 *. action 을 *. do 로 바 꾸 는 방법
FreeMarker 빠 른 시작

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage