Images cliquables

Il existe plusieurs méthode pour rendre cliquable une image. Quelque soit la manière choisie il faudra passer en mode "code", ce qui rend plus ou moins difficile l'intégration d'une image cliquable.

Méthode HTML
Méthode Génially

Une première méthode consiste à utiliser la balise map d'une image en HTML

Il faut tout d'abord préparer son image à la bonne taille à l'aide d'un logiciel de retouche d'image.

Dans le code source il faut repérer la ligne dédiée à l'image en question et y ajouter un nom de map, comme ceci en rouge:

<p style="text-align: center;"><img alt="" border="0" class="selected" height="701" hspace="5" src="https://carnot.mon-ent-occitanie.fr/lectureFichiergw.do?ID_FICHIER=1518088764698" style="border-width: 0px !important; border-style: solid !important;" title="" usemap="#map" vspace="5" width="700" /></p>

Ensuite vient la définition du mappage que l'on obtient avec un logiciel dédié comme "gimp" (logiciel libre et gratuit) ou bien "Dreamweaver" (logiciel propriétaire et payant).

Je vais expliquer ici ce qu'il faut faire dans GIMP:

• Ouvrir votre image.
• Allez dans le menu "Filtre/web/Image cliquable web..."

Vous obtenez cette boite de dialogue qui vous permettra de définir vos zones cliquables.

Il faut associer un lien à cette zone comme ceci.

Une fois terminées vous enregistrez les zones dans un fichier texte avec le menu fichier de la boite de dialogue. A partir de ce fichier texte vous trouverez tous les mappages dont vous avez besoin et qu'il faut copier dans le code source de votre article. Exemple:

<p>
<map name="map">
<!-- #$-:Image map file created by GIMP Image Map plug-in -->
<!-- #$-:GIMP Image Map plug-in by Maurits Rijk -->
<!-- #$-:Please do not edit lines starting with "#$" -->
<!-- #$VERSION:2.3 -->
<!-- #$AUTHOR:yann -->
<area shape="rect" coords="12,12,201,57" target="Vie de l_etablissement" onclick="window.open(this.href);return false;" href="http://carnot.mon-ent-occitanie.fr/vie-de-l-etablissement/" />
<area shape="rect" coords="12,69,202,94" target="Intranet" onclick="window.open(this.href);return false;" href="http://carnot.mon-ent-occitanie.fr/intranet/" />
<area shape="rect" coords="14,107,203,131" target="CDI" onclick="window.open(this.href);return false;" href="http://carnot.mon-ent-occitanie.fr/cdi/" />
</map>
</p>

La partie en bleu est à supprimer car elle est mal interprétée par l'ENT. La partie en vert est à copier dans une nouvelle ligne en code source de votre article. Valider votre article.

Voilà le tour est joué vous avez maintenant une magnifique image cliquable.

Méthode avec le site internet "Genially"

Il faut tout d'abord vous créer un compte. Viens ensuite le moment de créer un nouveau Genially.

On se retrouve sur une page blanche sur laquelle nous allons y déposer notre image sur la zone Drag & drop.

Une fois que l'on a fait glisser son image sur le fond de la page nous pouvons retailler la page exactement à la taille de l'image.

Il reste à définir des zone cliquables et d'y associer un lien. Nous allons utiliser pour cela l'outil zone (Area)

Pour associer un lien il faut renseigner dans l'interactivité l'URL comme ceci.

Nous répétons l'opération autant de fois qu'il y a de liens à renseigner sur notre image.

Viens ensuite le moment de récupérer le code d'intégration pour afficher notre travail dans l'ENT. Pour cela il faut cliquer sur "Share your Genially comme ceci.

Choisir "Embed in your website"

Nous collons le code dans notre article en ayant soin de passer en mode code. Valider votre article.

Voilà le tour est joué vous avez maintenant une magnifique image cliquable.