Mapa Interativo Com Elementor Free

Mapa Interativo com Elementor Free [SEM PLUGINS ADICIONAIS]

Nesse vídeo nós vamos aprender a como trabalhar com Tooltip e adicionar pontos de informações interativas em imagens. Iremos usar um exemplo com um mapa do mundo, mas pode ser adaptado com um mapa de um país e os pontos serem os estados ou até mesmo um produto, como por exemplo um carro onde os pontos ficam em peças específicas, como pneus, vidros, retrovisores, faróis etc…use a sua criatividade e use essa dica para criar sites mais interativos e com mais valor para seus clientes!

Link da imagem: mapa-mundi

Código HTML e CSS do Mapa

HTML

<div class="container">
    <div class="map-container">
        <img src="[url da imagem]"> <!-- add imagem aqui -->
        
        <div class="point russia tooltip">
            <span class="tooltiptext">Rússia</span>
        </div>

        <div class="point turquia tooltip">
            <span class="tooltiptext">Turquia</span>
        </div>
        <div class="point japao tooltip">
            <span class="tooltiptext">Japão</span>
        </div>
        <div class="point china tooltip">
            <span class="tooltiptext">China</span>
        </div>
        <div class="point arabia tooltip">
            <span class="tooltiptext">Arábia Saudita</span>
        </div>
        <div class="point usa tooltip">
            <span class="tooltiptext">Estados Unidos</span>
        </div>
        <div class="point mexico tooltip">
            <span class="tooltiptext">México</span>
        </div>
        <div class="point venezuela tooltip">
            <span class="tooltiptext">Venezuela</span>
        </div>
        <div class="point colombia tooltip">
            <span class="tooltiptext">Colombia</span>
        </div>
        <div class="point brasil tooltip">
            <span class="tooltiptext">Brasil</span>
        </div>
        <div class="point argentina tooltip">
            <span class="tooltiptext">Argentina</span>
        </div>
        <div class="point australia tooltip">
            <span class="tooltiptext">Austrália</span>
        </div>
    </div>
</div>

<style>

.map-container {
    position: relative;
    display: inline-block;

    img {
        width: 100%;
    }

    .point {
        cursor: pointer;
        position: absolute;
        width: 1.6rem;
        height: 1.6rem;
        background-color: rgb(7, 120, 212); /* cor dos pontos */
        border-radius: 50%;
        transition: all .3s ease;
        will-change: transform, box-shadow;
        transform: translate(-50%, -50%);
        box-shadow: 0 0 0 rgba(0, 0, 255, 0.4);
        animation: pulse 1.5s infinite;
        z-index: 1;

        &:hover {
            animation: none;
            transform: translate(-50%, -50%) scale3D(1.35, 1.35, 1);
            box-shadow: 0 3px 6px rgba(255, 255, 255.16), 0 3px 6px rgba(0, 0, 0, 0.23);
        }
    }

    @media(max-width: 767px) {
        .point {
            width: 1rem;
            height: 1rem;
        }
    }

    .tooltiptext {
        visibility: hidden;
        width: 120px;
        background-color: #555;
        color: #fff;
        text-align: center;
        border-radius: 6px;
        padding: 5px 0;
        position: absolute;
        bottom: 125%;
        left: 50%;
        margin-left: -60px;
        opacity: 0;
        transition: opacity 0.3s;
    }

    .tooltiptext::after {
        content: "";
        position: absolute;
        top: 100%;
        left: 50%;
        margin-left: -5px;
        border-width: 5px;
        border-style: solid;
        border-color: #555 transparent transparent transparent;
    }

    .tooltip:hover .tooltiptext {
        visibility: visible;
        opacity: 1;
    }

    .venezuela {top: 54%;left: 24%;}
    .brasil {top: 67%;left: 28%;}
    .argentina {top: 80%;left: 26%;}
    .colombia {top: 55%;left: 21%;}
    .mexico {top: 44%;left: 12%;}
    .usa {top: 28%;left: 15%;}
    .arabia {top: 38%;left: 53%;}
    .turquia {top: 31%;left: 58%;}
    .russia {top: 16%;left: 67%;}
    .china {top: 41%;left: 70%;}
    .japao {top: 34%;left: 87%;}
    .australia {top: 76%;left: 87%;}
}

@keyframes pulse {
    0% {box-shadow: 0 0 0 0 rgba(107,220,212, 0.5);} /*Cor da sombra*/
    70% {box-shadow: 0 0 0 25px rgba(255, 255, 255, 0);}
    100% {box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);}
}
</style>

HTML