Bom, eu gostaria de saber como que se faz pra criar um mapa estilo o do site bomnegocio.com
. Eu não sei se naquele mapa existe uma única imagem ou várias imagens agrupadas.
Alguém poderia me da uma luz de como se faz aquele efeito?
Bom, eu gostaria de saber como que se faz pra criar um mapa estilo o do site bomnegocio.com
. Eu não sei se naquele mapa existe uma única imagem ou várias imagens agrupadas.
Alguém poderia me da uma luz de como se faz aquele efeito?
Primeiramente deve-se criar o arquivo SVG, É necessário criar os estado separadamente, para isso vou demonstrar utilizando o editor de imagens GIMP:
Abra o GIMP e importe uma imagem do mapa do Brasil
Redimensione a imagem para o tamanho desejado, no exemplo o tamanho é 600px X 590px
.
Selecione o primeiro estado, no exemplo selecionei o Acre, mais é indiferente.
Usando a ferramenta de seleção varinha mágica, selecione o estado.
Após selecionado, clique no menu Selecionar > Para vetor
Habilite a janela vetores, clicando no menu Janelas > Diálogos de encaixe > Vetores. Clique com o botão direito no vetor e exportar para vetor:
Salve e abra o arquivo, usando o notepad++, você encontrará o código:
<svg xmlns="http://www.w3.org/2000/svg"
width="600" height="590"
viewBox="0 0 432 428">
<path id="seleçao" ...
Altere o id
do path
para id desejado do estado, exemplo:
<svg xmlns="http://www.w3.org/2000/svg"
width="600" height="590"
viewBox="0 0 432 428">
<path id="acre" ...
Repita o processo para cada estado, porém nos próximos você somente utilizará o código path
gerado. Dessa forma será possível gerar o código SVG do desenho e trabalhar com CSS e jQuery e manipular o mapa da forma que desejar.
No exemplo, criei uma div
com id="mapa"
e coloquei o código dentro desta div
:
<div id="mapa">
<svg xmlns="http://www.w3.org/2000/svg" width="600" height="590" viewBox="0 0 432 428">
<path id="acre" data-name="Acre"
fill="none" stroke="black" stroke-width="1"
d="M 40.00,152.22
C 40.00 ..." />
<text x="15" y="160">AC</text>
<path id="amazonas" data-name="Amazonas"
fill="none" stroke="black" stroke-width="1"
d="M 107.4 ..." />
<text x="95" y="105">AM</text>
</svg>
</div>
No CSS
#mapa svg path {
stroke:#200772; /*cor da borda do estado*/
fill:#4671D5; /*cor do estado*/
cursor:pointer;
}
#mapa svg path:hover {
fill:#be2f33;
stroke:#be2f33;
}
Veja no exemplo simples online, com apenas dois estados JSFiddle, pois conforme mencionei é trabalhoso :)
Obs: Este é um exemplo simples de como criar, pode-se trabalhar para adicionar os textos, siglas e o que mais desejar.
<a xlink:href="..."></a>
, ou pode abrir a página que deseja com jQuery, jsfiddle.net/E573B/38, no exemplo o estado do Acre abre com jQuery e o do Amazonas com tag <a>