Créer des zones cliquables sur une image
 (Image "mappée")

Vous utilisez Paint Shop Pro pour faire du graphisme, mais saviez-vous qu'on peut aussi s'en servir pour créer des pages web?

Ce tutoriel va vous permettre de créer, sur une image, des zones cliquables permettant d'accéder à des URL internes ou externes à votre site.

Pour commencer ce tutoriel, partons d'une image quelconque.

Ici, j'ai utilisé un fond d'écran emprunté à l'excellent site coréen Mashimaro

Enregistrez cette image sur votre disque dur (clic droit sur l'image - "enregistrer l'image sous...").

Ouvrez-là dans PSP.

Maintenant, faites "Fichier - Exporter - Image cliquable"

La boîte de dialogue "Module de création d'image cliquable" s'ouvre.

1ère étape: les outils

 

La flèche est l'outil par défaut

L'outil " déplacement" vous permet de déplacer une zone de sélection

L'outil " polygone" permet de dessiner des zones de sélection personnalisées (contours d'un objet par exemple)

Les outils " rectangle" et " cercle" permettent de créer des zones de sélection géométriques (rectangulaires ou circulaires, donc)

l'outil " gomme" permet de supprimer des zones de sélection

L'outil " main" permet de déplacer l'image dans la zone de prévisualisation.

 

2ème étape: créer des zones de sélection

Cliquez sur l'outil "cercle".

Sur l'image, dans la fenêtre de travail à droite, placez la souris au milieu du dessin de la lune, et faites-la glisser en tenant le bouton gauche de la souris enfoncé. Quand votre sélection correspond au diamètre de la lune, relachez le bouton de la souris.

Vous pouvez modifier la taille de votre sélection en cliquant sur les 2 petits points verts de part et d'autres du cercle

Vous pouvez aussi déplacer la totalité de la sélection avec l'outil "déplacement"

 

3ème étape: les propriétés de l'objet

Quand vous avez terminé votre sélection, il vous faut remplir le cadre "Propriétés de l'objet"

 

URL: entrez ici l'adresse du site ou du lien que vous souhaitez

Texte alt. : entrez ici le texte qui s'affichera quand la bulle d'aide s'affichera au passage de la souris sur votre zone de sélection

Cible: permet de sélectionner le cadre ("frame") dans lequel votre lien va s'ouvrir

_self L'URL cible va s'afficher dans la même frame que le lien
_parent L'URL cible va s'afficher dans la structure externe
_blank L'URL cible va s'afficher dans une nouvelle fenêtre ouverte par le navigateur
_top L'URL cible va s'afficher dans toute la fenêtre du navigateur et les frames disparaissent

Les valeurs Gauche, Droite, Haut et Bas précisent les coordonnées de votre sélection dans l'image.

 

 Vous pouvez ajouter d'autres zones cliquables dans votre image, en répétant les mêmes opérations: choisir un outil de sélection, délimiter la zone cliquable, remplir la zone "propriété de l'objet".

4ème étape: optimiser l'image

Pour enregistrer votre image de base, vous avez le choix entre 3 formats:

- le format .JPG : format standard, créant des fichiers image peu volumineux donc plus rapide à télécharger (attention toutefois, il a tendance à altérer un peu les couleurs d'origine);

- le format .GIF: très courant sur le web et avec un maximum de 256 couleurs, il est de bonne qualité. Attention à ajuster les valeurs dans l'onglet "couleurs", il y a en général des différences de qualité notables selon la méthode de sélection choisie (Standard Web/Coupe médiane optimisée/Octree optimisée). Regardez dans la fenêtre de prévisualisation celle qui donne le meilleur résultat.

- le format .PNG: de très bonne qualité (jusqu'à 16 millions de couleurs), il produit des fichiers lourds, donc longs à télécharger.

NB: seuls les formats GIF et PNG permettent d'enregistrer des images contenant des zones transparentes.

Choisissez donc votre format, et ajustez les réglages en cliquant sur le bouton "Optimiser l'image"

5ème étape: enregistrer votre travail

Lorsque vous avez terminé, cliquez sur le bouton "Enregistrer sous".

On vous demande d'abord d'enregister le fichier HTML que vous venez de générer --> donnez-lui un nom et enregistrez-le dans le répertoire de votre choix.

On vous demande ensuite d'enregistrer l'image qui vous a servi de base --> enregistrez-là de préférence dans le même répertoire que celui qui contient le fichier HTML.

Vous pouvez maintenant fermer le "module de création d'image cliquable" et aller dans votre navigateur ou votre éditeur HTML pour ouvrir votre fichier HTML.

Pour voir un exemple, cliquez --> ici

Retour à la liste des tutoriels