Forums Développement Multimédia

Les formations Mediabox
Les formations Mediabox

Créer une image-map grâce à Photoshop

Par celynette (celine moulard), le 30 août 2011

Grâce à ce tutoriel, vous allez apprendre à créer vos propres image-map sans avoir à ce casser la tête :D

Prérequis

Avoir photoshop serait déjà une bonne chose! Ce chapitre ne nécessite pas de connaissance poussée en html et css, il s'adresse donc à tous.

Image-map

Qu'est-ce qu'une image map?

Définition

Une image-map est une image divisée en plusieurs zones cliquables. Chaque zone renvoie vers un lien différent. On peut donc définir plusieurs liens sur une même image. (Pratique pour les menus :D )

Comment créer une image map ?

Pour créer une image-map, on utilise la balise HTML <map> , qui doit être utilisée avec la balise <area>. Celle-ci possède trois attributs :

1)shape qui peut prendre trois valeurs :

  • rect : Pour un rectangle
  • circle : Pour un cercle
  • poly : Pour un polygone

2)coords :

  • Indique les coordonnées des coins supérieurs gauche et inférieur droit de la zone pour un rectangle rect
  • Indique les coordonnées de chaque angle du polygone si vous optez pour la valeur poly
  • Indique les coordonnées du centre du cercle et la dimension du rayon de ce même cercle pour la valeur circle

3)href définit la page de destination du lien correspondant à la zone. Vous pouvez bien entendu, utiliser un lien interne ou externe.

Voici le code complet pour ce genre de balise:

Pour lier l'image à la balise, on doit utiliser le même nom dans le name de map et le usemap! Le code précédent donne ceci:

Désolée pas d'animation sur l'image, mais il s'agit donc d'une image avec deux zones distinctes. L'une renvoie vers la page contact.php et l'autre vers un moteur de recherche ;)

Voilà pour la partie théorique ! Ce que je vous propose maintenant c'est un peu de pratique avec logiciel!!! C'est parti pour un petit tutoriel pour créer une image map sous photoshop! ;)

Crée une image-map sous Photoshop

Zone cliquable rectangulaire

1) On commence par ouvrir l'image voulue sous photoshop, perso j'ai choisi une image de mes dernières vacances (nostalgie quand tu nous tiens … bref!)

2) Sélectionner l'outil tranche comme ceci:

3)Utiliser l'outil sélectionné pour découper votre image: J'ai choisi de faire 2 zones mais sachez que vous pouvez en faire autant que vous le voulez! NB: la zone 1 et 3 sur mon exemple porte le même lien et le même nom d'où le fait d'avoir seulement 2 zones.

4)Une fois que vous avez découpé l'image, faire un clic droit dans la boîte et choisir ”Modifier les options de tranche”. Une boîte apparaît! Il y a le nom de l'image, les coordonnées (à ne pas modifier) mais aussi et surtout une zone URL! Dans le champs laissé libre, insérer l'url de votre choix puis cliquer sur valider.

Ne changez pas le type de tranche! Le reste est modifiable.

5)Faites ainsi pour chaque tranche où vous souhaitez y voir apparaître un lien.

6) Une fois que vous avez terminé, enregistrez le fichier au format Web. Pour cela, cliquez sur Fichier» Enregistrer pour le Web. Choisissez votre ”mode”, (souvenez vous des format d'image!) Ici, j'ai choisi le format .jpg et cliqué sur optimisé.

Avant de cliquer sur enregistrer, choisissez le répertoire dans lequel vous souhaiter enregistrer les images PUIS cliquez sur HTML et images

Vous pouvez enregistrer. Vous verrez alors dans le dossier spécifié une page .html et un dossier contenant les images tranchées.

vous devrez répéter cette opération autant de fois que vous avez de tranche en prenant soin de sélectionner une tranche différente à chaque fois voir l'image du point 6)(les images non enregistrées sont grisées).

Ou alors, et c'est encore mieux!!! Il faudra sélectionner toutes les tranches en même temps (touche maj enfoncée + clic sur les tranches) ;) en sachant que si vous les enregistrez une par une il est possible qu'il apparaisse un « spacer.gif » assez embêtant pour la suite du travail!

Le code !

On passe ensuite au code HTML. Je vous propose d'ouvrir la page .html obtenue grâce à la découpe de notre image sous photoshop.

Dans le code, nous avons déjà nos liens, la taille de chaque image… bref tout ce que nous avons rentré dans la boîte d'options de chaque tranche! Il ne reste plus qu'à intégrer le code html à notre site web.

Résultat

Envie de voir le résultat final online? Page d'exemple

Facile hein? :D

Alors à vous de jouer ;)

Autres