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

Edge Commons Interactive SVG to Interactive map - add a link

$
0
0

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

http://redpen.io/6svh5u

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)"))

                                        });

                    });

          }

});


Viewing all articles
Browse latest Browse all 9897

Trending Articles