Logo pour impression Fonctions avancées de gestion de contenus

IMAGES REACTIVES

 
Vous vous êtes sûrement déjà demandé ce qu'était le champ "ID Image cliquable" dans les blocs d'image? Et bien ce champ sert à la création d'une image réactive. Qu'est-ce? Et bien pour le savoir nous vous invitons à consulter les pages:
Cela peut permettre de faire des cartes réactives par exemple, qui changent au survol

Étudions cela de plus près. Créez un bloc image et renseignez dans le champ "ID Image cliquable" le nom "maZone":
 
 
e
 

 
Maintenant, prenons pour exemple nous voulons définir la zone de la jambe comme cliquable. Comment? Tout simplement à l'aide d'un logiciel comme the gimp par exemple, qui va nous aider à définir les coordonnées de la zone cliquable. Si vous avez visité les liens ci-dessus, vous avez vu qu'il existe plusieurs types de zones :

Type de zoneMot-clefCoordonnées
rectanglerecton définit les coordonnées de deux sommets opposé
cerclecircleon définit les coordonnées du centre du cercle
et la longueur du rayon
polygonepolyon définit les coordonnées de chaque sommet
défautdefault 

Ici, nousa llons nous intéresser à la zone de type rectangle. Si vous avez utilisé un outil type the gimp et en sélectionnant la zone de la jambe comme cela:



Vous devez avoir dans une page HTML un code généré ressemblant à ceci:



Ceci aux commentaires HTML près. (les commentaires sont tout ce qu'il y a entre "< ! - - " et " - - >"). Nous allons donc mettre ce code dans un bloc de code html. Ce code étant interprété par le navigateur ne provoque aucun affichage et sera transparent pour l'internaute.

La preuve! un bloc de code HTML a été inséré entre cette ligne et la précédente. Voilà, la jambe de la dame est cliquable. Pour en modifier la cible il suffit de replacer le # de href="#" dans le code HTML pour modifier le lien. Attention, il ne faut en aucun cas mettre un lien en  "minisites.gestion.lyon.fr--".