1

Tenho uma imagem SVG com os Estados do País e preciso que, ao passar o mouse sobre um Estado, a imagem com o nome do Estado apareça e siga o mouse.

Já fiz a imagem aparecer e desaparecer com os eventos mouseenter e mouseleave, porém, não consigo fazer ela seguir o mouse dentro do Estado com mousemove.

Segue o código:

$('path.str0').mouseenter(function(){
            var thisClass = $(this).attr('class');
            var pieces = thisClass.split(' ');

            //Estou mexendo aqui. Ewerton Melo
            $('img').filter( '.' + pieces[2]).css("display", "block");
            //Até aqui

            $(this).attr('fill', "#00d4ff");
        }).mousemove(function(e){
            var mousex = e.pageX + 20; //Get X coodrinates
            var mousey = e.pageY + 20; //Get Y coordinates
            var tipWidth = $(this).width(); //Find width of tooltip
            var tipHeight = $(this).height(); //Find height of tooltip

            //Distance of element from the right edge of viewport
            var tipVisX = $(window).width() - (mousex + tipWidth);
            //Distance of element from the bottom of viewport
            var tipVisY = $(window).height() - (mousey + tipHeight);

            if ( tipVisX < 20 ) { //If tooltip exceeds the X coordinate of viewport
                mousex = e.pageX - tipWidth - 20;
            } if ( tipVisY < 20 ) { //If tooltip exceeds the Y coordinate of viewport
                mousey = e.pageY - tipHeight - 20;
            }
            //Absolute position the tooltip according to mouse position
            $(this).css({  top: mousey, left: mousex });
        }).mouseleave(function(){
            var thisClass = $(this).attr('class');
            var pieces = thisClass.split(' ');
            //console.log($('img').filter( '.' + pieces[2]).css("display", "none"));
            $('img').filter( '.' + pieces[2]).css("display", "none");
            $(this).attr('fill', "#00b2d6");
        });
1
  • O código JavaScript não é suficiente. Inclua também o código SVG e o HTML da página (img). Commented 15/04/2014 às 0:08

1 Resposta 1

1

Como você não incluiu o CSS ou o HTML, vou assumir que o SVG é uma imagem qualquer, e que você não tem um CSS pré-definido.

Pelo seu JavaScript, você também tem uma imagem img.

$('img').filter( ... );

Eu criei um SVG simples (um círculo) que representa o SVG que você está usando:

<svg viewBox="0 0 200 200" width="200" height="200">
    <circle class="a b c" r="100" cx="100" cy="100" fill="red" />
</svg>

e troquei a referência path.str0 do seu código por ele para este exemplo:

$('circle').mouseenter(function(){
   var thisClass = $(this).attr('class');
   var pieces = thisClass.split(' ');

Também criei uma imagem, um <img> e pus três classes arbitrárias a, b e c no SVG, já que seu código tenta extrair a terceira classe do svg para referenciar a img:

$('img').filter( '.' + pieces[2]).css("display", "block");

Aparentemente está tudo funcionando corretamente (o SVG muda de cor no mouseover e mouseout, a imagem desaparece, e as coordenadas mudam durante o mousemove. Eu inclui um DIV para monitorar a mudança de coordenadas do mousemove:

$('#coords').html('y: '+mousey+', x: '+mousex); 

A mudança de coordenadas está acontecendo, mas não foi definido o tipo de posicionamento (estou assumindo que você não definiu isto no CSS). Portanto, não é um erro de SVG, mas de CSS. Para posicionar em CSS você precisa definir position além das coordenadas (top,left,bottom ou right). Vai funcionar se você acrescentar um CSS com:

img {
    position: absolute;
}

Veja aqui neste JSFiddle uma tentativa de reproduzir o seu problema e solução. Acho que você conseguirá adaptá-lo para o seu problema.

1
  • helderdarocha, muito obrigado, sua ajuda foi providencial para solução do meu problema. Commented 15/04/2014 às 19:17

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 .