Colorir Mapa ao Passar o Mouse

26/08/2022

Nesse tutorial ensinaremos como utilizar um mouse no website que ao passar o mouse em cima ele colora o estado relativo.

Colorindo mapa com Javascript

Para trabalhar com mapas, o ideal é selecionarmos um mapa no formato svg. No vídeo utilizamos um mapa svg do Brasil presente no Wikipédia, caso queira pode baixá-lo clicando aqui.

index.php

Na nossa index vamos inserir o mapa no formato svg e vamos linkar o nosso arquivo javascript.

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Mapa Colorido</title>
</head>
<body>

    <?php include("mapadobrasil.svg"); ?>

    <script src="javascript.js"></script>
</body>
</html>

javascript.js

A mágica ocorre no Javascript. Trabalhando com os eventos, onmouseover, onmouseout e click, podemos colorir os estados do mapa e estabelecer ações após o clique.

(function(win,doc){
    'use strict';

    doc.querySelector('#svg2').addEventListener('mouseover',(e)=>{
       let id = e.target.id;
       doc.querySelector('#'+id).style.fill = 'rgb(3,3,3)';
    });

    doc.querySelector('#svg2').addEventListener('mouseout',(e)=>{
        let id = e.target.id;
        doc.querySelector('#'+id).style.fill = '#999999';
    });

    doc.querySelector('#svg2').addEventListener('click',(e)=>{
        let id = e.target.id;
        win.location.href='http://localhost/estado/'+id;
    });

})(window,document);

Por hoje é só! Sucesso nos códigos e na vida!

Precisa de um professor? webdesignemfoco@gmail.com

Receba as aulas da Webdesign em Foco em Seu Email

Posts Relacionados

Vanilla Javascript - #48 Api Fetch com e sem JSON e com FormData

Nesse tutorial vou explicar como utilizar a API Fetch do Javascript tendo como requisição e resposta o JSON ou application/x-www-form-urlencoded.

Vanilla Javascript - Alterando CSS pelo Javascript

No tutorial de hoje aprenderemos como alterar o CSS de um site dinamicamente através do Javascript para deixar o site mais interativo.

Javascript

Ensinaremos durante as aulas a codificaÃ§Ã£o desta importante linguagem de programaÃ§Ã£o.