Création de liens sur une image

Cet article a pour but de montrer comment ajouter de liens sur une photo avec Gimp 2.6. Cette technique peut être utilisée pour faire, par exemple, des menus ou des zooms sur certains aspects d'une photo.

L'exemple ci-aprés se rapproche de la technique à utiliser pour faire une menu à partir d'une image.
On commence, bien sûr par ouvrir l'image dans Gimp.

image-map mabweb09 Ensuite aller dans Filtre->web->image cliquable.

Aprés avoir cliquer, vous devriez voir apparaitre cette image.
Vous pouvez, maintenant, fermer l'image d'origine.

Choisir un outils en haut à gauche de la fenêtre pour pouvoir selectionner une zone sur l'image.
Puis commencer la selection sur votre image.

Pour déplacer la sélection utilisez la flèche. Pour changer la taille de la sélection cliquez sur les petits carrés rouges. Le crayon sert à modifier les paramétres de la selection (voir ci-dessous).

Cliquer pour terminer la sélection.
Vous devriez voir apparaître cette fenêtre.

Il faut maintenant renseigner les paramètres.

Pour cet exemple dans la zone URL à activer nous mettrons le nom de la page qui sera appelée.
Dans le type de lien choisir Autre.
Laisser cocher Lien relatif.

Aprés validation vous devriez avoir cette fenêtre.

Pour modifier les paramétres double-cliquez sur le nom du lien dans la colonne de droite ou, à l'aide de la flèche selectionnez la zone (des petits rectangles rouges apparaissent alors) et cliquez sur le crayon.

image-map mabweb09 On peut évidement selectionner plusieurs zones.

Enregistrer le tout. Par defaut un fichier .map est créé mais comme c'est un fichier texte on peut le renommer en .html ou .txt.

Le code généré ressemble à celui-ci

 <img src="entete.jpg" alt="image entete" width="160" height="923" 
              border="0" usemap="#map" />

 <map name="map">
      <area shape="rect" coords="8,17,149,184" href="/techno.php" />
      <area shape="rect" coords="6,221,155,364" href="/roller.php" />
      <area shape="rect" coords="6,394,151,567" href="/recettes.php" />
      <area shape="rect" coords="10,595,152,756" href="/guitare.php" />
      <area shape="rect" coords="1,794,154,918" href="/photos.php" />
 </map>

Il suffit maintenant d'intégrer ce code généré dans les pages html.

visiteurs

Contact