Les images cliquables
Qu'est-ce qu'une image cliquable?
Une image cliquable ou image map est une image interactive dont certaines zones sont sensibles sur l'image et ces zones réfèrent à des liens hypertextes vers des pages Web. Ces images sont aux formats GIF ou JPEG pour qu'elles puissent être utilisées sur tous les navigateurs ainsi que toutes les plateformes (Mac, PC, Unix). En faite, les zones cliquables redirigent vers un site, exactement comme le fait un hyperlien format texte. Exemple d'hyperlien format texte: Lévinux
Une image vaut milles mots
On peut se servir d'images cliquables pour presenter facilement des statistiques, des photos, des cartes. Par exemple, une carte routière cliquable peut permettre d'accéder facilement à des informations sur les différentes routes qui ne sont pas perceptibles sur la carte directement. L'insertion d'une image cliquable sur une page Web rend la lecture de la page plus efficace. Effectivement, la présentation du site se trouve améliorée et moins lourde. La personne qui consulte le site a accès à l'information principale sur le site, et utilise les images cliquables, entre autres, pour consulter les éléments du site qui l'intéresse. Cela rend les barres de navigations plus explicites et agréables visuellement pour ceux qui consultent le site.
Historique des images cliquables
Les images cliquables ont vues le jour avec l'évolution du langage HTML. Pour résumé, la première version du langage HTML le définit comme étant un langage hypertextuel très simple et indépendant qui permet de décrire du texte avec des graphiques. La version 2 offrait la possibilités de mise en page (éléments de structure externe au document comme les en-têtes, les lignes de titre, les différents niveaux de titres) mais aussi les liens hypertextes, les mises en relief, les insertions flexibles de graphiques, de tableaux, de listes et de formulaires. C'est la version HTML 3,2 qui a amené les images cliquables, cette version a été standardisée en 1996 et encore aujourd'hui, on rencontre des pages exprimées en HTML 3.2. Cette version a amené la présentation structurée d'éléments de tableau, les tailles et couleurs de polices de caractères, l'agencement du texte autour de l'image, les images cliquables sans communication avec le serveur et (le plus important pour l'avenir) l'insertion des applets Java et Java Script. XML historique du langage HTML
Procédure pour créer une image cliquable
1. Pour commencer, vous devez avoir une image (que vous désirez rendre cliquable) d'enregistrée sur votre ordinateur, par exemple, dans vos documents, ou sur votre bureau, ou sur votre périphérique amovible (clé USB).
2. Vous devez lancer le logiciel GIMP. Dans GIMP, cliquez sur Fichier, Ouvrir et vous devez ouvrir l'image que vous désirez rendre cliquable.
3. Maintenant, cliquez sur Filtres descendez votre curseur afin de sélectionner Web" et Image cliquable (imagemap)... Une nouvelle fenêtre, <Sanstitre> -Imagemap s'ouvrira. 4. Dans la partie gauche, vous pouvez sélectionner soit, un cercle, un rectange ou un polygone. Vous devez prendre celui qui formera le mieux l'aspect que vous désirez rendre cliquable dans l'image. Par exemple, si vous désirez rendre un soleil cliquable, prenez le cercle, et définissez l'aspect à rendre cliquable. Lorsque votre aspect est défini, double cliquer et vous aurez accès aux paramètres de la zone définie. 5. Vous arriverez dans l'espace 6. Dans l'espace http://fr.curriculumforge.org/MarieEveGingras/ImplantationImagesCliquablesurWiki. Faites ces étapes pour chaque aspect que vous désirez rendre cliquable. Si vous avez de la difficulté à définir votre aspect, vous pouvez utiliser les touches 7. Une fois que vos aspects sont tous définis, vous devez enregistrer votre image cliquable. Faites, 8. Maintenant, aller sur votre la forge du curriculum.Utiliser le fureteur Mozilla firefox car les explications qui suivent ne sont pas les mêmes pour Explorer. Pour faciliter, aller directement sur la page où vous désirez insérer votre image cliquable. 9. Créer une nouvelle page wiki. ( Pour le wiki de curriculum forge : dans la barre d'adresse, ajouter avec une barre oblique / le nom d'une nouvelle page Par exemple: http://fr.curriculumforge.org/MarieEveGingras/ImagesTests, et créer une nouvelle page blanche.) Dans cette page écrivez, dans édition en mode texte: attachment: N'oubliez pas de mettre l'extension .JPG 10. Ensuite, enregistrer les modifications. 11. Vous verrez ensuite
Aller dans parcourir dans le fichier à envoyer. Maintenant, retrouvez l'image initiale que vous désirez rendre cliquable. J'insiste sur l'image initiale et non celle qu'on a rendu cliquable par GIMP.
12. Ouvrez le logiciel Word Pad, allez dans démarrer, tous les programmes, accessoires, wordpad. Dans Word Pad, faite fichier Ouvrir Allez sélectionner tous les documents dans Fichiers de type en bas. Et ouvrez votre image cliquable. Un texte plutôt incompréhensible pour ceux qui ne connaissent pas le langage informatique apparaîtra. Vous devez sélectionner ce texte, et le copier.
13. Maintenant, allez vous recréer une nouvelle page 2. Voir explication plus haut (étape 9 pour créer une nouvelle page)
Dans cette nouvelle page 2, (dans l'édition, en mode texte) écrivez exactement et seulement ceci:
#format raw
et coller le contenu du texte que vous avez pris sur wordpad. (il est possible que vous ayez à aller resélectionner le texte à coller)
14. Enregistrer les modifications. Un carré blanc devrait apparaître. Si non, véréfiez que vous avez suivi les étapes à la lettre. Les détails sont très importants.
15. Maintenant, retournez dans la page que vous avez créée pour votre image initiale, votre nouvelle page 1.
16. Sélectionnez l'image, appuyer sur le bouton droit de la souris, pour aller sur copier l'adresse de l'image.
17. Retourner dans l'édition en mode texte de votre nouvelle page 2, où il y a un rectangle blanc. Au début du texte sur la première ligne , vous verrez qu'il y a entre "guillement.jpg" vous devez enlever ce qu'il y a entre les premiers guillemets pour le remplacer par l'adresse de votre image initial, soit coller ce que vous avez copier à l'étape précédente.
18. Enregistrer les modifications.
19. Pour insérer votre image sur votre page Wiki, vous devez inscrire: Include (Lenomdevotrepage/votrenouvellepage2). Pour bien vous montrer la formule, j'ai mis des espaces entre les caractères, mais il ne faut pas en mettre. Si ce n'est pas clair, je vous invite à aller consulter l'édition en mode texte de ma page personnelle où j'ai inséré une image cliquable. Ma page avec une image cliquable
Votre image cliquable devrait maintenant apparaître, et les liens cliquables devraient référer aux sites que vous avez préalablement défini.
En somme
L'image cliquable a des avantages, surtout au niveau de l'utilité et de son esthétisme, mais a aussi des désavantages. Comme vous avez pu le constater, la création d'une image map a plusieurs étapes et les détails sont très importants. Le fait de ne pas maîtriser le langage informatique vient complexifier le processus davantage, car la personne ne portera pas autant attention aux détails fondamentaux dans la création des images cliquables. Par exemple, les différents termes (jpg, html, img src...) et le langage dans les pages Wiki soit pour mettre une image (attachment:) ou pour l'image cliquable (#format raw)... Bien qu'il soit plus facile pour une personne qui maîtrise bien le langage informatique de créer des images maps, ceux qui ont moins de connaissances en informatique peuvent réussir à en faire, mais ils devront suivre toutes les étapes et être attentifs aux détails pour assurer la réussite de la création désirée. Voilà pourquoi j'insiste sur le fait que pour devenir à l'aise avec l'informatique et ses principes, il faut se pratiquer, expérimenter, apprendre de ses erreurs.
Références:
Revenir à la page de l'image cliquable pour choisir un autre texte