Mapa do Brasil ‘mapeado’ em CSS

Upalelê tambem é cultura (???)!

Tive que desenvolver um mapinha do Brasil com destaques em mouseOver pra um cliente e resolvi disponibilizar aqui pra galera do UPA. As imagens não estão lá grande coisa porque essa não é a minha área, mas o mapa ficou bem funcional =)

mapa

Clique aqui para ver a demonstração e aqui para baixar os arquivos.

You’re welcome!

A técnica eu aprendi com o Román Cortés(aqui).

Bookmark and Share


Conheça os outros posts do autor clicando aqui: Rafael Vale!
Tags , , , ,

12 Comentários

  1. Posted 10/08/2009 at 16:12 | Permalink

    boa garoto.

    ficou mto bom.

  2. Posted 10/08/2009 at 16:19 | Permalink

    Que interessante! Ficou legal =D

  3. Posted 10/08/2009 at 16:27 | Permalink

    Muito bom!

    E o validador de CSS passou! Perfeito!
    Mas o validador de XHTML detectou um errinho.

    Parece que a tag não aceita atributos diferentes dos especificados.

    Mas é detalhe!

    Parabéns pelo trabalho.

  4. Posted 10/08/2009 at 16:34 | Permalink

    @Juliano

    É verdade, Culpa da TAG “estado” que eu coloquei em cada item da lista pra utilizar com outro esquema do jQuery.

    Quem for utilizar isso pode remover a tag que não altera em nada =)

    Valeu pelo feedback galera.

  5. Dawson
    Posted 10/08/2009 at 17:38 | Permalink

    Parabéns cara! Muito bom.

  6. Posted 10/08/2009 at 18:45 | Permalink

    parabens..

    ams só observado… faltou o DF.. não que alguem vá dar falta…

  7. Eder Araujo de Souza
    Posted 11/08/2009 at 07:49 | Permalink

    Parabéns pelo trabalho!!!
    =D

  8. Posted 11/08/2009 at 09:01 | Permalink

    Nerd!

  9. Posted 12/08/2009 at 11:28 | Permalink

    Opa, parabéns pela iniciativa de compartilhar, com certeza será útil pra muita gente! Já retwitei o post :D

    Abraços!

  10. Tico
    Posted 31/08/2009 at 03:29 | Permalink

    Parabéns.
    Segue minha contribuição em jQuery:

    Fica selecionado o estado ao clicar (terceira imagem) e não redireciona pra nenhum click. Ideal aplicações ajax.

    $(document).ready(function(){

    $(“#map li a”).each(
    function()
    {
    $(this).click(
    function()
    {
    /* ajax aqui */
    $(“#map li a”).css(“background-image”, “”);
    $(this).css(“background-image”, “url(‘imgs/mapa/highlight”+this.id+”.gif’)”);
    return false;
    }
    );
    }
    );

    });

  11. Anderson
    Posted 15/01/2010 at 14:48 | Permalink

    Se tivesse o DF estaria perfeito… ;D

  12. estevao
    Posted 15/06/2010 at 01:17 | Permalink

    Muito bom, exatamente o que estava procurando obrigado

11 Trackbacks

  1. By Upalelê on 10/08/2009 at 19:07

    Mapa do Brasil ‘mapeado’ em CSS http://bit.ly/p3gkH

  2. By Bruno Gross on 10/08/2009 at 19:10

    RT: @rafaelpvale: RT: @upalele: Mapa do Brasil ‘mapeado’ em CSS http://bit.ly/p3gkH

  3. By kico on 10/08/2009 at 19:10

    RT: @upalele: Mapa do Brasil ‘mapeado’ em CSS http://bit.ly/p3gkH // olha só, o upalelê serve pra alguma coisa!

  4. By jimmyneph on 10/08/2009 at 19:14

    RT: @brunogross: RT: @rafaelpvale: RT: @upalele: Mapa do Brasil ‘mapeado’ em CSS http://bit.ly/p3gkH #ehMuitaNerdice

  5. By Juliano Oliveira on 10/08/2009 at 19:16

    RT @jimmyneph: RT: @brunogross: RT: @rafaelpvale: RT: @upalele: Mapa do Brasil ‘mapeado’ em CSS http://bit.ly/p3gkH #ehMuitaNerdice

  6. By CWk's on 10/08/2009 at 19:19

    RT @jimmyneph: RT: @brunogross: RT: @rafaelpvale: RT: @upalele: Mapa do Brasil ‘mapeado’ em CSS http://bit.ly/p3gkH #ehMuitaNerdice

  7. By Tibiriçá Botto on 12/08/2009 at 11:22

    Mapa dp brasil em CSS http://bit.ly/p3gkH

  8. By Tibiriçá Botto on 12/08/2009 at 11:23

    Mapa do Brasil em CSS http://bit.ly/p3gkH

  9. By Seu Blog Merece on 12/08/2009 at 15:24

    RT @yogodoshi: Mapa do Brasil ‘mapeado’ em CSS disponível gratuitamente http://bit.ly/p3gkH #dica

  10. By Cristiano Santos on 12/08/2009 at 15:24

    RT @yogodoshi: Mapa do Brasil ‘mapeado’ em CSS disponível gratuitamente http://bit.ly/p3gkH #dica

  11. By Deyvid on 02/09/2010 at 12:58

    http://bit.ly/bwuImj Mapa do Brasil em CSS com hover.. Se você precisa.. ae esta :D

Comente

*
*

Você pode usar essas tags HTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

:D :-) :( :o 8O :? 8) :lol: :x :P :oops: :cry: :evil: :twisted: :roll: :wink: :!: :?: :idea: :arrow: :| :mrgreen:
upinha