OK. I know that has passed a while, but i want to share how i finally did this. Was a mix of all your help and the other subjects in this forums.
So, i have an svg with different paths with unique id each ones.
On the other hand, i have the animation with the names of the regions in timelines inside of symbols (1 symbol per region). Just like @michelangelo told me to did it. (thanks for that). The symbols have an unique id too.
Affter read this post How to create rollover buttons for this situation, and thanks for the @DBear example i figure out how to set attributes to each one of my paths. Just put the code when the scene load and that is it.
function clickAreas(hypeDocument, element, event){
var Cundinamarca = document.getElementById("Cundinamarca");
var Tolima = document.getElementById("Tolima");
console.log(Cundinamarca,Tolima);
Cundinamarca.onmouseover = function () {
var symbolInstance = hypeDocument.getSymbolInstanceById('cundi');
symbolInstance.continueTimelineNamed('caption', hypeDocument.kDirectionForward);
Cundinamarca.setAttribute("style", "fill: #35348a");
}
Cundinamarca.onmouseout = function () {
var symbolInstance = hypeDocument.getSymbolInstanceById('cundi');
symbolInstance.continueTimelineNamed('caption', hypeDocument.kDirectionReverse);
Cundinamarca.setAttribute("style", "fill: #6867a7");
}
Cundinamarca.onclick = function () {
window.open("http://www.google.com","_self");
}
Tolima.onmouseover = function () {
var symbolInstance = hypeDocument.getSymbolInstanceById('toli');
symbolInstance.continueTimelineNamed('caption', hypeDocument.kDirectionForward);
Tolima.setAttribute("style", "fill: #35348a");
}
Tolima.onmouseout = function () {
var symbolInstance = hypeDocument.getSymbolInstanceById('toli');
symbolInstance.continueTimelineNamed('caption', hypeDocument.kDirectionReverse);
Tolima.setAttribute("style", "fill: #6867a7");
}
Tolima.onclick = function () {
window.open("http:www.google.com","_self");
}
I have to make one var to each region and that is- Thank you all for your help.