4 de abril de 2012
Estou disponibilizando nesta postagem, material pra você inserir em seu blog/ site um mapa com um link específico para cada estado.

Para iserir, caso você não queira ou mesmo não saiba editar a animação, basta fazer o download do arquivo swf hospedado neste link do divshare.

Então você deve inserir a chamada para o arquivo em seu html com o código:


<!--[if !IE]> -->
    <object type="application/x-shockwave-flash" data="endereco/para/o/flash/Mapa.swf" width="280" height="280">
<!-- <![endif]-->
<!--[if IE]>
     <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0"
width="280" height="280">
         <param name="movie" value="endereco/para/o/flash/Mapa.swf" />
<!--><!---->
          <param name="wmode" value="transparent" />
         <param name="FlashVars" value="AC=paginaAC.html&amp;AL=paginaAL.html&amp;AP=etc..."/>
         <p>Atualize seu navegador para visualizar corretamente o mapa.</p>
    </object>
<!-- <![endif]-->



Atente para as partes do código acima.

Nesta você altera o endereço para o arquivo swf que você hospedou:



Nesta você insere os links dos estados:



Caso queira o arquivo fla para editar a animação no flash, baixe neste link do divshare.

Fonte: http://melancianacabeca.com.br/


CORREÇÃO(Atualização data > 01/11/2012): 
-------------------------------------------------

Caso o código não funcione no firefox. Ao invés de utilizar o html sugerido na postagem para a inserção do mapa em sua página, utilize:


<object classid="clsid:D27CDB6E-AE6D-11CF-96B8-444553540000" id="ShockwaveFlash1" width="280" height="280" align="left">
<!-- Aqui vem Todos os Paramentros --- Ecurtei para efeito de exemplo -->
<param name="Movie" value="mapa-brasil.swf">
<param name="FlashVars" value="AC=paginaAC.html&amp;AL=paginaAL.html&amp;AP=etc..."/>
<!-- Aqui vem Todos os Paramentros --- Ecurtei para efeito de exemplo -->

<!-- O código abaixo que é usado no FireFox -->
<embed src="mapa-brasil.swf" width="758" height="112" DeviceFont="0" ProfilePort="0" ....>
</object>

17 comentários:

  1. Você salvou minha vida hehehe
    Muito obrigado!

    ResponderExcluir
  2. Agradeço muito sua contribuição.. ajudou bastante!

    ResponderExcluir
  3. Kênia,

    Muito obrigado, funcionou corretamento.
    bjs,

    Sergio Nogueira

    ResponderExcluir
  4. Kênia bom dia,

    Estou precisando de mais uma ajuda sua.

    Como faço para que alguns estado fique com a cor cinza inves de branco?
    Por exemplo:

    Rio de Janeiro ter a cor no mapa em cinza e quando passar o mouse mudar para azul.

    Desde já agradeço.

    Abs,
    Sergio Nogueira

    ResponderExcluir
  5. Kenia,

    Tenhos 2 dúvidas:
    1) Como posicionar a imagem em um ponto específico da página ?
    2) Como faço funcionar também no Firefox. Só consigo visualizar o mapa no IE.

    ResponderExcluir
  6. Olá Kênia, queria saber aonde põe o código dos estados, porque nesse ultimo código(do firefox), não tem nada, o que eu faço?

    Quando eu clico no AC, te manda pra ..../Undefined

    ResponderExcluir
  7. Pois então, há meses estava pensando em inserir um mapa no meu blog, tentarei seguir suas instruções e depois digo se deu certo. Abração!

    ResponderExcluir
  8. Boa tarde Kenia. Gostaria, se possível, que você me ajudasse a solucionar uma pequena limitação minha: Não consigo linkar os estados no código que você disponibilizou.

    Estou tentando fazer o seguinte:
    - Colocar links dos tribunais de justiça de todos os estados brasileiros. Ex:
    AC=http://www.tjac.jus.br&AL=http://www.tjal.jus.br&... etc.

    No entanto, ao clicar no mapa sobre o estado correspondente ao link... não abre a página que desejo. O navegador me reposta o seguinte erro:
    Erro 6 (net::ERR_FILE_NOT_FOUND): Não foi possível encontrar o arquivo ou diretório.

    ResponderExcluir
  9. Muito bom seu post, ajudou muito.
    Obrigado

    ResponderExcluir
  10. Kenia , esse código acima deve ser editado em HTML no Dreamweaver para que o mapa funcione. Preciso deste recurso urgentemente. . Como faço para entrar em contato com você por telefone.

    ResponderExcluir
  11. Olá, me ajudou muito...
    Obrigado.

    ResponderExcluir
  12. Muito obrigado pelo mapa e o carinho dispensado a todos nós! Euripedes Nascimento

    ResponderExcluir
  13. Olá, Kênia...
    Poderia me ajudar?

    Eu inseri o segundo código que você postou no blog no meu site.

    A página que eu coloquei o mapa foi:
    http://testeperfuradores.freeiz.com/mapa-3

    Mas estou com um problema, o mapa aparece no IE, Firefox e Chrome, mas quando eu clico no Acre(foi o único parâmetro que inseri para fazer teste) retorna página não encontrado no Chrome e Firefox, esta funcionando corretamente apenas no IE. Já pesquisei muito na internet e não encontrei solução.
    Você saberia me ajudar?
    Desde já agradeço a atenção.
    Thales Freitas

    ResponderExcluir
  14. Tentei de todas as maneiras, mas não consigo fazer os links funcionarem. Teria como vc postar o código completo, como tem que ser e em detalhes? Ficaria muito mais fácil. Grato.

    ResponderExcluir
  15. Olá Kênia. Será que pode me ajudar a inserir essa pagina em meu site? [email protected]

    Muitíssimo obrigado.

    ResponderExcluir
  16. Ola Kênia!
    muito bom seu post, mas como sou leigo , preciso de ajuda. eu criei paginas internas em meu site,uma para cada estado,como devo colocar estes links das paginas no codigo do mapa para que quando clicar no estado me leve para a pagina correspondente.

    ResponderExcluir
  17. Bom dia, como coloco esse código em um artigo do joomla.

    ResponderExcluir

Comentários

Perfil

Kênia Ferreira
Formada em Sistemas de Informação e pós-graduada em Engenharia de Software.