Mapear Links em imagem

3 respostas
jqueryjsfjavascriptprimefacesjava
L

Gostaria de sugestões para a seguinte situação:

Possuo uma imagem qualquer do mapa do Brasil. Gostaria de poder clicar em cada estado e abrir um dialogo com algumas informações do mesmo. Após o estado ser clicado, mudar a cor do mesmo. O problema é que não vejo maneiras fáceis de fazer isso.

Alguém já fez algo parecido??

Observação: Estou usando, JSF e Primefaces. Mas se houver soluções apenas com javascript aceito.

3 Respostas

TerraSkilll

Tipo isso: https://jsfiddle.net/9yp2L7ab/ ?

Achei aqui: http://pt.stackoverflow.com/questions/54055/mapa-do-brasil-qual-a-melhor-forma-de-fazer

Abraço.

L

Sim, mas eu quero para outras imagens. O do mapa é só um exemplo. Mas vou olhar aqui, valeu!

TerraSkilll

Entendi.

A ideia para qualquer imagem é que você tem svg contendo uma coleção de caminhos (paths). Cada caminho representa uma região (que pode ser qualquer coisa, não precisam ser estados/países) e pode ter diversas propriedades (cor, gradiente, espessura da linha). Como o formato svg é basicamente um xml, fica fácil manipular o conteúdo através de javascript ou mesmo css (como no exemplo) por exemplo.

Dá para baixar svgs de vários mapas por aí, ou mesmo gerar o seu próprio, usando softwares como o Inkscape.

Abraço.

Criado 5 de abril de 2017
Ultima resposta 5 de abr. de 2017
Respostas 3
Participantes 2