Quantcast
Channel: Adobe Community : All Content - Edge Animate
Viewing all articles
Browse latest Browse all 9897

Is it possible to use a handmade tooltip within an interactive svg?

$
0
0

These are the steps I have gone through:

1. Renamed the layers of a map in Illustrator and then export it as a svg.

 

2. Import this svg map on the Edge Animate stage and then write the code to paint several countries according to its id (=layers renamed):

// Load Edge Commons

yepnope({

  load: "http://cdn.edgecommons.org/an/1.4.0/js/min/EdgeCommons.js",

  complete: function() {

  // Enable SVG access

  EC.SVG.accessSVG(sym.$("mapa")).done(

  function(svgDocument){

  //colores

  var c1 = "#e74459";

  var c2 = "#f58f72";

  var c3 = "#f5db69";

  var c4 = "#66b05e";

  var c0 = "#c0c0c0";

  $("path", svgDocument).css({"cursor":"pointer"});

  $("#alemania", svgDocument).css("fill", c4);

  $("#brasil", svgDocument).css("fill", c1);

  $("#rusia", svgDocument).css("fill", c3);

  $("#indonesia", svgDocument).css("fill", c3);

  $("#kazajistan", svgDocument).css("fill", c3);

  $("#sudafrica", svgDocument).css("fill", c2);

  $("#estadosunidos", svgDocument).css("fill", c2);

  $("#portugal", svgDocument).css("fill", c1);

  $("#italia", svgDocument).css("fill", c4);

  });

  }

});

 

3. Then I made a symbol as a tooltip, so I inserted this code to show the text according to the id of the target selected (path) and also to change its opacity:

$("path", svgDocument).mouseover(function(e){

  $(e.currentTarget).css({opacity:0.5});

  sym.getSymbol("tooltip").$("pais").html(e.currentTarget.id);

  });

  $("path", svgDocument).mouseout(function(e){

  $(e.currentTarget).css({opacity:1});

  });

 

4. Lastly I wrote the lines to made this tooltip follow the mouse:

document.getElementById('Stage').addEventListener('mousemove', mouseMove, false);

function mouseMove(e) {

  sym.$("tooltip").css({

    "left" : e.pageX,

    "top" : e.pageY

  });

}

 

And here was the problem: svg doesn't seem to allow the mouseMove function. I put a circle on top of the map so I could see that this code was working as long as I didn't hover the svg. It shows the id, but the tooltip doesn't move (if I try to click on the symbol it also changes, but because the symbol itself is on top of the map).

 

Any solution??


Viewing all articles
Browse latest Browse all 9897

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>