Hi,
I've been playing around with this wonderful Edge Commons interactive SVG tutorial :
example file :
http://edgedocks.com/market/interactive-svg-example-project-edge-commo ns
video tutorial :
http://www.youtube.com/watch?v=4UEB6gaLKuw
I have adapted this to an interactive map, every thing is going fine until I couldn't figure out to link a particular url on each part of the region of the map.
here is where i've been going so far, link to my example :
http://madudesign.com/works/france/
link to my edge animate file :
http://madudesign.com/works/france/carte_de_france.zip
I managed to figure out how to change colors on the different parts of the map on mouse over and mouse out but I'm not quite comfortable with JavaScript since I don't use it every day...
I have tryed to link to an url by passing it on the illustrator layer and via the onclick event (event.target.id) to a simple url
then working in Edge and publishing on the browser the link returns me a weird url line by replacing the original url slashes "//" by "_x2F_" and I must have misunderstood the proper JavaScript line to open that link from there...
for example on my actual map "http://madudesign.com/works/france/"
the first top region of France is normally a link to "http://www.google.com" and it returns "http:_x2F__x2F_www.google.com" plus the complete path to the file too...
I don't know how to get around this trick and have back for each region a particular clean link from the event target id of the svg...
thank-you for any help
matt
this is the code in edge file : // Load Edge Commons yepnope({ load: "http://cdn.edgecommons.org/an/1.0.0/js/min/EdgeCommons.js", complete: function() { // Enable SVG access // Watch extended tutorial on YouTube: http://www.youtube.com/watch?v=4UEB6gaLKuw EC.SVG.accessSVG(sym.$("france")).done( function(svgDocument){ // add event listener svgDocument.addEventListener("select", function(event) { // Remember selected part sym.setVariable("selectedPart", event.target); // show the id of the selected part in the textfield sym.$("selectedPartTxt").html( event.target.id ); //var theSelectedPart = sym.getVariable("select"); window.open(( event.target.id ), "_blanc"); }); // add event listener svgDocument.addEventListener("over", function(event) { // Remember selected part sym.setVariable("overPart", event.target); var theOverPart = sym.getVariable("overPart"); $(theOverPart).css("fill", ("#e85918")) }); // add event listener svgDocument.addEventListener("out", function(event) { // Remember selected part sym.setVariable("outPart", event.target); // get selected part of the svg var theOutPart = sym.getVariable("outPart"); $(theOutPart).css("fill", ("rgba(255,255,255,0.00)")) }); }); } });