Mapa clicavel com troca de cor (Estilo OLX)

luanpbi · Junho 16, 2015

Boa tarde,

Alguém por gentileza poderia me ajudar, estou precisando fazer um mapa clicavel em HTML5 + CSS ou em JavaScrip, estilo o da OLX porém não é no mapa do Brasil e sim em um mapa de minha região, o ocorrido é que consigo transforma ele em um mapa clicavel, utilizando as tags <map> e <area>, e consigo linka para outras paginas, porém precisaria de conseguir trocar a cor ao passar o mouse em cima, antes de clicar fazer com que ele troque de cor igual o que acontece no da OLX, porém já tentei algumas coisas e não consegui, tentei utilizar hover no css e nada, alguém tem alguma sugestão?

Já agradeço desde já.

kayro · Julho 25, 2019

Cara, o meu ficou assim!

Css:

Aqui você só precisa mudar as cores para a desejada, beleza?

#map .state{cursor:pointer}

#map .state .shape{cursor:pointer;stroke-width:0}

#map .state .label-icon-state{fill:#fff;font-family:Arial;font-size:11px;line-height:12px;font-weight:normal}

#map .state .label-state{display:none;font-family:Arial;font-size:14px;line-height:16px;font-weight:bold}

#map .state:hover .label-state,#map .state.hover .label-state{display:block}

#mapa_brasil.hover #map .model-green .state .shape{fill:#2d68b2}

#mapa_brasil.hover #map .model-green .state .icon-state{fill:#5a95ce}

#map .model-green .state .shape{fill:#ab0}#map .model-green .state .icon-state{fill:#999}

#map .model-green .state .label-icon-state{fill:#fff}

#map .model-green .state .label-state{fill:#999}

#map .model-green .state:hover .shape,#map .model-green .state.hover .shape{fill:#b8d21b !important}

#map .model-green .state:hover .icon-state,#map .model-green .state.hover .icon-state{fill:#f70 !important}.section_apps{border:1px solid #CCC;overflow:hidden;padding-top:10px}

.section_apps .col-1,.section_apps .col-2,.section_apps .col-3{float:left;height:125px}

.section_apps .col-1{width:240px;margin-right:10px;display:table-cell;padding-left:20px}

E o HTML:

<head>

</head>

<body>

<title id="title_map">Mapa do Brasil</title>

<desc id="description_ba">Bahia</desc>

<text id="label-state-ba" class="label-state" x="419" y="15">Bahia</text>

</a>

<desc id="description_se">Sergipe</desc>

<text id="label-state-se" class="label-state" x="405" y="15">Sergipe</text>

</a>

<desc id="description_pe">Pernambuco</desc>

<text id="label-state-pe" class="label-state" x="372" y="15">Pernambuco</text>

</a>

<desc id="description_al">Alagoas</desc>

<text id="label-state-al" class="label-state" x="403" y="15">Alagoas</text>

</a>

<desc id="description_am">Amazonas</desc>

<text id="label-state-am" class="label-state" x="388" y="15">Amazonas</text>

</a>

</a>

<desc id="description_mt">Mato Grosso</desc>

<text id="label-state-mt" class="label-state" x="369" y="15">Mato Grosso</text>

</a>

<desc id="description_ro">Rondônia</desc>

<text id="label-state-ro" class="label-state" x="392" y="15">Rondônia</text>

</a>

</a>

<desc id="description_ap">Amapá</desc>

<text id="label-state-ap" class="label-state" x="412" y="15">Amapá</text>

</a>

<desc id="description_rj">Rio de Janeiro</desc>

<text id="label-state-rj" class="label-state" x="358" y="15">Rio de Janeiro</text>

</a>

<desc id="description_rs">Rio Grande do Sul</desc>

<text id="label-state-rs" class="label-state" x="333" y="15">Rio Grande do Sul</text>

</a>

<desc id="description_sc">Santa Catarina</desc>

<text id="label-state-sc" class="label-state" x="359" y="15">Santa Catarina</text>

</a>

<desc id="description_pr">Paraná</desc>

<text id="label-state-pr" class="label-state" x="412" y="15">Paraná</text>

</a>

<desc id="description_sp">São Paulo</desc>

<text id="label-state-sp" class="label-state" x="391" y="15">São Paulo</text>

</a>

<desc id="description_ms">Mato Grosso do Sul</desc>

<text id="label-state-ms" class="label-state" x="322" y="15">Mato Grosso do Sul</text>

</a>

<desc id="description_go">Goiás</desc>

<text id="label-state-go" class="label-state" x="421" y="15">Goiás</text>

</a>

<desc id="description_mg">Minas Gerais</desc>

<text id="label-state-mg" class="label-state" x="369" y="15">Minas Gerais</text>

</a>

<desc id="description_es">Espírito Santo</desc>

<text id="label-state-es" class="label-state" x="362" y="15">Espírito Santo</text>

</a>

<desc id="description_pi">Piauí</desc>

<text id="label-state-pi" class="label-state" x="424" y="15">Piauí</text>

</a>

<desc id="description_ce">Ceará</desc>

<text id="label-state-ce" class="label-state" x="420" y="15">Ceará</text>

</a>

<desc id="description_rr">Roraima</desc>

<text id="label-state-rr" class="label-state" x="402" y="15">Roraima</text>

</a>

<desc id="description_to">Tocantins</desc>

<text id="label-state-to" class="label-state" x="391" y="15">Tocantins</text>

</a>

<desc id="description_ma">Maranhão</desc>

<text id="label-state-ma" class="label-state" x="390" y="15">Maranhão</text>

</a>

<desc id="description_rn">Rio Grande do Norte</desc>

<text id="label-state-rn" class="label-state" x="317" y="15">Rio Grande do Norte</text>

</a>

<desc id="description_pb">Paraíba</desc>

<text id="label-state-pb" class="label-state" x="407" y="15">Paraíba</text>

</a>

<desc id="description_df">Distrito Federal</desc>

<text id="label-state-df" class="label-state" x="350" y="15">Distrito Federal</text>

</a>

</g>

</svg>

</div>

</main>

</div>

</body>

</html>

Editado Julho 25, 2019 por kayro

Entrar

Mapa clicavel com troca de cor (Estilo OLX)

Pergunta

luanpbi

Link para o comentário

Compartilhar em outros sites

1 resposta a esta questão

Posts Recomendados

kayro

Link para o comentário

Compartilhar em outros sites

Participe da discussão

Estatísticas dos Fóruns

Navegação

Atividades