3

Tenho um mapa do Brasil, num SVG, onde gostaria de apresentar uma div junto de cada estado quando se clica no mesmo.

Consegui trabalhar a mudança de cor com hover usando o ID de cada estado do Brasil:

function highlight_map_states(){
  if($(".states_section").length>0){
     $(".states_section .list_states .item .link").hover(function(){
       var a="#state_"+$(this).text().toLowerCase();
       $(a).attr("class","state hover")
     },function(){
       var a="#state_"+$(this).text().toLowerCase();
       $(a).attr("class","state")
     })
  }
};

Como faço para ter um clique em cada estado a fazer aparecer uma div?

Nota: Não dá para colocar todo o código aqui porque a pergunta tem um tamanho máximo de caracteres, mas fica uma demo no Codepen.

1 Resposta 1

2

O que estás à procura é o método getBoundingClientRect() que te irá devolver um objeto ClientRect com a distância em pixeis para top, right, bottom e left.

O método Element.getBoundingClientRect() retorna o tamanho de um elemento e a sua posição em relação à janela de exibição.

O valor devolvido é do tipo float, mas podes fazer uso do mesmo diretamente nas propriedades de CSS para o elemento a posicionar.


Exemplo hover

Exemplo do rato a passar por cima de uma path, onde aparece uma <div/> junto da mesma:

var $toolTip = $('.tooltip');

$('path').hover(function(){

    var t = this.getBoundingClientRect().top,   // distancia do topo
        l = this.getBoundingClientRect().left;  // distancia da esquerda

    $toolTip .css({
        "top": t + "px",
        "left": l + "px"
    }).show();
    
}, function(){
    $toolTip.hide();
});

Ver demonstração completa no JSFiddle.


Exemplo click

Exemplo de clique sobre uma path ou circle a fazer aparecer a <div/> junto do elemento clicado:

// Faz aparecer elemento junto da path ou circle que recebeu o clique
$('path, circle').click(function(e){
    e.preventDefault();

    var t = this.getBoundingClientRect().top,
        l = this.getBoundingClientRect().left;

    $tooltip.css({
        "top": t + "px"
        "left": l + "px"
    }).show();
});

// Desabilita clique nas descrições e textos
$('desc, text').click(function(e){
    e.preventDefault();
});

Ver demonstração completa no JSFiddle.


Não posso montar uma demonstrações aqui porque o máximo de caracteres na resposta é de 30000.

3
  • Entendi Zuul!! E como eu crio uma div diferente para cada estado?? Desculpa a ignorância rs pois eu não manjo nada de javascript! Muito obrigado ;)
    – mdesigner
    Commented 13/04/2015 às 23:22
  • @mdesigner Eu não sei para que queres as div nem o que vai estar dentro de cada uma para te aconselhar no melhor caminho. Mas não seria mais prático e simples ter as div no HTML, como a dos exemplos na resposta, e na altura de as utilizar, chamar o .show() para as apresentar ? Mas seja como for, ficam dois exemplos no JSFiddle para: Criar DIV com JavaScript e criar DIV com jQuery.
    – Zuul
    Commented 14/04/2015 às 6:15
  • Muito obrigado Zuul!!
    – mdesigner
    Commented 14/04/2015 às 19:18

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .