Marie-Philippe Gill: Tutoriel image cliquable

Bonjour!

Dans ce tutoriel, je vais vous montrer comment réaliser une image cliquable en HTML et GIMP.
Rassurez-vous, pas besoin de connaître le HTML de fond en comble afin de faire votre image cliquable. :)

Première étape :

Ouvrir Gimp!

Si vous ne l'avez pas télécharger, vous pouvez le faire ici!

Deuxièmement, ouvrez votre bannière ou image que vous aurez fait précédemment et vous que vous souhaitez rendre cliquable. ( Fichier > Ouvrir )

Pour moi, ce sera celle-ci :

Enregistrez-la sous le nom Image_ini.png

Vous remarquez donc que ce sera le carré en bas à droite qui deviendra cliquable!

Ensuite, il faut ouvrir la "barre à outils" qui nous permettra de délimiter la zone où notre image sera cliquable. Allez dans Filtre > Web > Image cliquable web.

Le rectangle dans le menu de gauche permet de sélectionner des zones rectangulaires,

Le cercle de sélectionner des zones circulaires,

et le polygone de faire soi-même la zone désirée, si elle est complexe!

Je vais donc sélectionner le rectangle et délimiter la zone voulue.

Voici ce qui s'ouvrira :

URL à activer lorsque cette zone est cliquée: entrez le lien de la page que vous souhaitez ouvrir dans votre image. Si vous voulez que le lien pointe vers un site externe (exemple: http://google.ca), décochez la case lien relatif. Si vous souhaitez écrire un URL relatif (exemple: articles/lechat.html) laissez la case lien relatif cochée. Si vous souhaitez avoir un peu plus d'informations sur ce qu'est un lien relatif, allez ici.

Texte alternatif : Je vous conseille fortement d'écrire quelque chose qui représente votre image cliquable. Lorsque vous laisserez votre souris longtemps sur votre photo, ce sera ce petit texte qui s'affichera. La W3C exige maintenant qu'il y ait toujours un texte alternatif, voilà pourquoi je vous conseille d'inscrire quelque chose.

L'onglet rectangle : cet onglet vous permet de modifier les dimensions de votre zone cliquable

Une fois tous ces paramètres modifiés à votre goût, cliquez sur valider.

Si vous souhaitez avoir plusieurs zones cliquables sur votre image, répétez les dernières étapes.

Enregistrez votre image sous le nom image_finale.map

Vous remarquerez que votre image s'enregistre dorénavant en .map !

Ouvrez ensuite votre image sur un éditeur de texte.

Par exemple Bloc Notes, Taco HTML Edit, Notepad...

ne vous inquiétez pas si aucun programme ne vous est suggérer. ;)

Moi, j'ai utilisé Taco HTML Edit qui est un programme pour les Macs.

Voici ce qui m'est affiché :

Vous devriez avoir quelque chose dans le genre vous aussi!

Dans ce code, nous n'aurons qu'une chose à modifier, SEULEMENT si vous souhaitez afficher votre image partout sur le web (comme sur votre blog...). Si ce n'est pas votre cas, vous avez terminer le tutoriel. ;)

Il s'agit du "Banniere1.png" vous devrez l'héberger chez un hébergeur d'images afin d'obtenir l'URL direct de l'image. Je vous propose imageshack, mais il existe aussi photobucket.

Sélectionnez votre image initiale (et non celle en .map)