Le format SVG est de plus en plus utilisé en matière de cartographie.
J'ai récupéré cette carte sur le site WIKIPEDIA puis j'ai inséré ce fichier SVG dans la page via l'élément IMG.
Affichez la console JavaScript pour cette page !
Il est d'une simplificité enfantine.
Il faut bien sûr associer à chaque bouton une fonction JS.
var image = document.querySelector('img'); var vlargeur; var image = document.querySelector('img'); var vlargeur =image.width; console.log(vlargeur); document.querySelector('#plus').onclick = function() { vlargeur +=100 ; image.width = vlargeur ; console.log(vlargeur); } document.querySelector('#moins').onclick = function() { vlargeur -=100 ; image.setAttribute('width',vlargeur) ; console.log(vlargeur); }
Le script mérite quelques explications.
Si vous avez affiché la console JavaScript sur votre ordinateur portable, vous voyez que la valeur retournée par l'insruction "console.log(vlargeur)" est 500.
En effet la valeur de vlargeur est 500 (50% de 1000) car sur un écran la largeur de la page (BODY) est 1 000px.
Comme l'instruction retourne un entier (et non pas une chaine), on peut donc incrémenter et décrémenter directement dans les fonctions anonymes.
Ici on augmente OU on diminue de 100 à chaque clic.
Examinons maintenant le code du fichier "departements.svg".
Le fichier pèse 300 KO ; ce qui est raisonnable.
Je vous présente des extraits ci-dessous.
On apprend que le fichier a été produit avec le logiciel Inkscape.
Pour chaque département un chemin (balise PATH).
Pour chaque pays limitrophe un texte (balise TEXT).
Retour menu