Les fonctions spéciales

 

Image map

Comment mettre en oeuvre les images multi-cliquables

Les images multi-cliquables autrement appelées image map en anglais sont utilisées quand il est nécessaire d'insérer plusieurs liens dans la même image.
Un exemple valant mieux qu'une longue explication, imaginez un lien pour chaque continent de cette mappemonde :


Phase préparatoire

  • Créez les pages à atteindre sous Zwii, ainsi vous aurez les identifiants des pages dans la barre d'adresse.
    L'identifiant est le nom de la page dans l'adresse.
  • Chargez l'image map dans le gestionnaire de fichiers, clic droit et copiez l'URL de l'image

Génération des zones cliquables

  • Cette phase consiste à définir les zones associées à des URL. Comme il serait fastidieux de les définir à la main, on utilisera un outil spécialisé https://www.image-map.net/
    Chargez l'image en cliquant sur Load from WebSite
    ou Download si vous utilisez une installation locale
  • Pour chaque forme à définir :
    • Sélectionnez son aspect : polygonal, rectangle ou cercle
    • Tracez la forme sur l'image
    • Dans le formulaire copiez l'identifiant de la page, exemple :
      pour http://www.xxxxx.com/test/japon
      l'identifiant de la page est japon ( ?japon si vous n'avez pas activé la réécriture d'URL).
    • Un titre affiché en info-bulle
    • La cible _blank pour éventuellement ouvrir le lien dans un nouvel onglet
  • Lorsque vous avez terminé, cliquez sur Show me the code et copiez le code HTML
  • Dans la page sous ZWII, en mode code source, collez le code HTML.
    Dans le cas d'une installation locale, il faudra remplacer l'adresse de l'image par celle copiée dans la phase préparatoire.
  • Enregistrez la page.