Une carte cliquable responsive

Comment créer assez facilement une carte cliquable mais surtout qu'elle soir reponsive. Pour le tuto, j'ai utilisé une carte de 602 x 736 px, mais d'autres tailles fonctionnent évidemment. Bien sûr, ce tuto peut s'appliquer pour tout type d'images, cartes géographiques, plans de maisons ... et tout et tout, et même pour des sites créés avec autre chose que TOWeb.

Vous aurez besoin d'un logiciel permettant de créer la liste des points pour dessiner le contour des zones. Pour ma part, j'utilise le logiciel MccHTML Mapper pour Windows. Il est disponible ici . Ce logiciel n'a pas d'installateur, pour l'utiliser il suffit de lancer le fichier MccHTMLMapper.exe contenu dans le répertoire après l'avoir dézippé. Il semble qu'il ne soit plus mis à jour depuis quelque temps, mais de toute façon, il est largement performant pour ce qu'on va l'utiliser.

Il existe d'autres logiciels pour tracer des contours, mais celui-là est mon préféré car très simple à utiliser.

Avant d'utiliser le logiciel précédent, il vous faudra créer un champ HTML contenant ce petit scrip mais qui risque vite de devenir grand suivant votre utilisation. Il y a des indications entre <!--  et  -->  pour vous aider à ajouter ou modifier vos données en fonction de votre image.

Dans les 'Fichiers additionnels' vous y placez votre image et vous indiquerez son nom dans le script à ce niveau
    xlink:href="_fields/monimage.png".  Personnelement, j'utilise le plus souvent les images.png, ça permet de les inclure dans TOWeb comme des icônes (il y en a d'ailleurs quelques-unes sur cette page).

Avant de passer à la création des zones, créer la quantité de blocs nécessaires comme indiqué dans les indications.

Copier le code
<!-- max-width = largeur maxi de l'image --> <!-- padding-bottom = hauteur / largeur(de l'image) x 100 arrondi à l'entier supérieur --> <style> .svg-container { background-color:transparent; display: inline-block; position: relative; width: 100%; max-width: 400px; padding-bottom: 123%; vertical-align: middle; overflow: hidden; } .svg-content { display: inline-block; position: absolute; top: 0; left: 0; } circle { stroke:rgba(1,1,1,0.5); } polygon:hover, circle:hover { fill:rgba(1,1,1,0.1); } </style> <div style="max-height:492px"> <!-- max-height = max-width X padding-bottom / 100 arrondi à l'entier supérieur --> <div class="svg-container"> <!-- remplacez ici 602 et 736 par la largeur et haugeur de votre image --> <svg version="1.1" viewBox="0 0 602 736" fill="transparent" preserveAspectRatio="xminYmin meet" class="svg-content"> <!-- idem ici pour 602 et 736 ainsi que monimage.png et Ma description dans le alt --> <image alt="Ma description" width="602" height="736" xlink:href="_fields/monimage.png"></image> <!-- remplacez l'adresse http par la votre, la liste des points et le texte de votre title --> <!-- Dupliquez ces 5 lignes suivantes autant de fois qu'il y a de polygon, les supprimer si pas utilisées--> <!-- Indiquez à quoi servent ces lignes --> <a href="http://testtoweb.free.fr" target="_blank" rel="noopener"> <polygon points=".....liste des points....."> <title>Aller sur testtoweb.free.fr</title></polygon> </a> <!-- modèle pour les cercles , dupliquez les 4 lignes, à supprimer si pas utilisé --> <!-- Indiquez à quoi servent ces lignes --> <a href="http://testtoweb.free.fr" target="_blank" rel="noopener"> <circle cx="452" cy="481" r="51"><title>Aller sur testtoweb.free.fr</title></circle> </a> </svg> </div> </div>

Vous voyez des lignes  <!-- Indiquez à quoi servent ces lignes -->  , vous remplacez le texte, cela donne par exemple
<!-- département du Pas-de-Calais --> , c'est très utile pour s'y retrouver. 

Un exemple d'utilisation sur cette page. 2 tracés en polygones et 3 avec un cercle. Dans cette démo, vous verrez en plus des images au survol, l'explication est en fin de rubrique "Supplément pour ajouter une image au survol" , mais installez d'abord le premier script.

Vous allez maintenant ouvrir le logiciel qui ressemble à ceci.

Vous avez ouvert votre image

Comme un département a des formes "biscornues", vous allez créer un polygone. Vous sélectionnez donc le bouton

Vous pouvez tracer des rectangles ou des cercles. En ce qui concerne les rectangles, tracez les comme des polygones, c'est plus simple, autrement il faut faire des transformations de coordonnées pour être utilisables dans le script.

Pour les cercles, vous récupérez les 3 valeurs de coords dans  'coords="452,481,50" ' ,
soit 452 = position en X, 481 = position en Y et 50 = rayon du cercle.

Ces valeurs sont à placer dans un bloc de ce type

  Lorsque vous avez terminé vos tracés, et même entre deux, pensez à enregistrer votre travail dans un fichier .map pour le récupérer si vous devez apporter des modifications.

Si vous voulez ajouter des images lors du survol des zones, il vous faut ajouter ce script à la fin du précédent. Attention, si vous rajoutez des zones, ce bout de script doit rester à la fin.

Copier le code
<script type="text/javascript"> var IE = document.all?true:false; if (!IE) document.captureEvents(Event.MOUSEMOVE); document.onmousemove = getMouseXY; var tempX = 0; var tempY = 0; var afficherImg = function(monimage) { var myimg = document.createElement("img"); myimg.src = monimage; myimg.style.position = "absolute"; myimg.style.top = tempY + "px"; myimg.style.left = tempX + "px"; myimg.style.width = "30%"; //largeur de l'image myimg.style.height = "auto"; //hauteur de l'image myimg.id = "myimg"; document.body.appendChild(myimg); flag = 1; } var cacherImg = function() { document.body.removeChild(document.getElementById("myimg")); } function getMouseXY(e) { if (IE) { tempX = event.clientX + document.body.scrollLeft; tempY = event.clientY + document.body.scrollTop; } else { tempX = e.pageX - 50; // décalage horizontal par rapport à la souris tempY = e.pageY + 20; // décalage vertical } document.show.MouseX.value = tempX; document.show.MouseY.value = tempY; return true; } </script>

Puis vous ajoutez toutes vos images dans les Fichiers additionnels.

Ensuite vous devez compléter 

   <a href=" monlien " target="_blank" rel="noopener"> 

pour chaque zone où il va y avoir une image avec bout de code

    onmouseover="afficherImg('_fields/ monimage.png');" onmouseout="cacherImg();"

en fait, ça doit faire quelque chose qui ressemble à cette ligne

 <a href=" monlien " target="_blank" rel="noopener" onmouseover="afficherImg('_fields/ monimage.png');" onmouseout="cacherImg();">

N'oubliez pas de renseigner  monimage.png  (ou .jpg) 

Ce rajout résulte du fait que j'ai combiné le premier script avec l'un de mes anciens qui ne prenait pas en compte les polygones, donc moins pratique.