SVG interactif via Illustrator CC
Bonjour,
J'ai réalisé, sur Illustrator CC, une infographie qui illustre un plan de situation pour des maisons.
J'ai suivi le modèle suivant : http://fr32c.free.fr/Am/index.php?po...ia-Illustrator
Je ne connais pratiquement pas le JavaScript et donc je me trouve confrontée à un problème élémentaire : adapter le code pour mon illustration.
Je ne peux pas joindre mon fichier .svg le forum ne gère pas cette extension.
voici mon code JavaScript :
Code:
1
2
3
4
5
6
7
8
9
| function afficher( ref, type ) {
var legende = "L"+ref.id.charAt(1);
document.getElementById(legende).classList.add("st6");
}
function masquer( ref, type ) {
var legende = "L"+ref.id.charAt(1);
document.getElementById(legende).classList.remove("st6");
} |
Je pense que le problème se situe au niveau de cette ligne de code :
Code:
var legende = "L"+ref.id.charAt(1);
J'ai 30 maisons et donc 30 légendes différentes.
J'ai créé les événements onmouseover et onmouseout directement sur Illustrator pour produire l'événement suivant : au passage de la souris le numéro de la maison est révélé.
Mais ça ne fonctionne que sur une dizaine de maisons seulement.
Je me permets de déposer ce problème ici, pouvez-vous m'aider s'il vous plaît ?
Merci infiniment par avance.
Maria
SVG animé via Illustrator CC
Merci beaucoup pour votre prompte réponse.
En effet ça fonctionne mieux. Pour récupérer les deux chiffres de mes numéros, j'ai mis :
Code:
var legende = "L"+ref.id.substr(1, 2);
Mais le fonctionnement n'est quand même pas génial car la gestion des événements onmouseover et onmouseout ne se fait pas toujours bien : un coup au passage de la souris, un coup au clic. Le onmouseout fonctionne que de temps en temps. De plus les comportements sont différents d'un navigateur à l'autre. Sur Firefox ça clignote !
Je sais vraiment pas comment solutionner ce genre de problème. Bon ! je continue .... :-(
En tout cas encore merci.
Bonne soirée.
Maria
