Insérer image cliquable

Insérer image cliquable

par Baptiste ETIENNE,
Nombre de réponses : 4

Bonjour à tous,

Je réfléchis actuellement à améliorer ma présentation des tarifs sur cette page :

https://paleo-en-ligne.fr/course/view.php?id=95
Les gens n'ont pas forcément le réflexe de scroller.
Du coup, je réfléchissais à la solution d'une image clickable, intégrée (expliquée par exemple avec Gimp : https://memo-linux.com/the-gimp-creer-une-zone-cliquable-sur-une-image-en-html/).
Pensez-vous que cela permettrait de gagner en lisibilité et de garder une bonne responsivité ?
Et surtout, comment intégrer ce genre d'images ? 
Merci à tous

Moyenne des évaluations  -
En réponse à Baptiste ETIENNE

Re: Insérer image cliquable

par Daniel Méthot,
Avatar Moodleurs particulièrement utiles

Bonjour,

Il est très facile, partout ou vous disposez d'un éditeur Moodle, d'ajouter une image "cliquable" basique.

Il ne s'agit pas d'un bouton qui "s'enfonce" mais d'une simple image, même celle d'un bouton... à laquelle on associe un lien. Comme ceci.

Un bouton

Vous noterez qu'un texte peut apparaître en plus lors du survol de la souris pour inciter à cliquer.

Par contre pour une vraie image cliquable il faut intégrer un code... en mode html.

En réponse à Baptiste ETIENNE

Re: Insérer image cliquable

par Christian Westphal,
Avatar Moodleurs particulièrement utiles

Je fais un essai en suivant le tuto dont tu postes le lien :

1. J'insère une image normale dans le texte

2. Avec l'éditeur atto du forum, pas d'accès simple à l'image-map, aussi, il faut passer en mode html (bouton < > du menu étendu)

3. Je rajoute

usemap="#map"

dans la balise img

<img src="https://moodle.org/pluginfile.php/239/mod_forum/post/1540105/rond-carre.png" alt="rond et carré" class="img-responsive atto_image_button_text-bottom" width="400" height="300">

donc on obtient ça :

<img src="https://moodle.org/pluginfile.php/239/mod_forum/post/1540105/rond-carre.png" alt="rond et carré" class="img-responsive atto_image_button_text-bottom" usemap="#map" width="400" height="300">

4. A la suite, je copie-colle le contenu du fichier .map généré par gimp mais seulement la balise <map> </map> pas <img> </img>

On a donc en tout :

<p><img src="https://moodle.org/pluginfile.php/239/mod_forum/post/1540105/rond-carre.png" alt="rond et carré" class="img-responsive atto_image_button_text-bottom" width="400" height="300" usemap="#map" ><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:WESTPHA.C -->
<area shape="rect" coords="42,46,206,196" alt="joli carré vert" href="http://fr.wikipedia.org/wiki/Carr%C3%A9" />
<area shape="circle" coords="308,215,77" alt="patatoïde presque ronde" href="http://fr.wikipedia.org/wiki/Cercle" />
</map></p>


rond et carré

Et ici ça ne marche pas ! le code HTML est nettoyé à l'enregistrement :

<p><img src="https://moodle.org/pluginfile.php/239/mod_forum/post/1540105/rond-carre.png" alt="rond et carré" class="img-responsive atto_image_button_text-bottom" width="400" height="300"></p>

Ca ne veut pas dire que ça ne marchera jamais mais que, ici, sur le forum, un mécanisme propre à moodle fait du nettoyage de code qui met le souk dans ce que tu veux faire. Fais un essai chez toi pour voir...

à suivre...

En réponse à Christian Westphal

Re: Insérer image cliquable

par Christian Westphal,
Avatar Moodleurs particulièrement utiles

Testé à l'instant sur mon moodle académique : ça passe sans problème sur une étiquette...

Edit : l'éditeur TinyMCE dispose d'un champ "image cliquable" dans les propriétés avancées mais...

  • cela ne dispense pas de copier-coller la balise <map> </map>
  • il faut que le champ soit rempli avec le # initial
  • par contre le # ne doit pas être mis dans le nom utilisé dans <map> </map>

Moyenne des évaluations Utile (2)