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