Image Map pour
fainéant ...
Si mon tutoriel vous a plu merci
de mettre un petit mot dans mon livre d'or ;)
Si vous désirez une bannière, une "userbar" une signature ou tout autre travail c'est par là.
Si vous désirez une bannière, une "userbar" une signature ou tout autre travail c'est par là.
ooOoo
Etant
un peu fainéant par nature et ne voulant pas me casser la
« trombinette » pendant des heures sur les
coordonnées de mon image ou de ma photo, j'ai voulu trouver un logiciel
qui pouvait éventuellement faire cela à ma place ... après des
recherches infructueuses ou insatisfaites je me suis rabattu sur
Photoshop (Gimp fait de même).
  Rentrons
dans le vif du sujet.
Pour commencer ouvrir votre image ou photo dans Photoshop, la redimensionner à la taille voulue (éviter que ce ne soit trop lourd). Basculer ensuite dans Imageready en cliquant sur le bouton se trouvant en bas de la barre d'outils  Une fois arrivé
là, c'est là que les em***des commencent ;)
 Maintenant
il va falloir déterminer les zones « cliquable ».
A l'aide du lasso (touche raccourci L et choisissez lasseau polygonal) faites le tour de l'élément que vous désirez déterminer comme zone « cliquable », ...  ... afin d'obtenir une sélection comme vous le souhaitez    Une fois
fait, faites un copier/coller (normalement vous devriez avoir un second
calque), rendez vous ensuite sur le menu dans
calque --> nouvelle zone de carte-image d'après un calque  Dans la barre
d'outils se trouvant dessous cliquez sur carte-image (si vous
ne la voyez pas aller dans fenêtre
--> Afficher carte-image)
 Afin d'avoir
ceci
  Dans
l'onglet carte-image, remplissez les différents champs ...
Forme --> Polygone (afin de coller au plus prés de votre sélection) Qualité --> là c'est à vous de voir mais plus vous irez vers le 100% plus le code généré sera important et votre sélection précise. Nom --> Comme son nom l'indique, c'est le nom que vous attribuez à votre carte-image URL --> Ici vous tapez le lien sur lequel vous désirez que le clique renvoie (un site, une nouvelle page etc ... du type http:// ) Cible --> Non obligatoire Alt --> Non obligatoire Renouvelez
l'opération autant de fois qu'il y a de zone à cliquer ... une fois vos
différentes carte-images créées, allez cliquer sur le logo d'IE dans la
barre d'outils de gauche afin d'obtenir le code source en
HTML, il suffit ensuite de copier le code entre
« <!-- ImageReady Slices (Sans titre-1.psd) --> » et « <!-- End ImageReady Slices --> » puis de le coller sur le source de votre page web ... (n'oubliez pas de rectifier le chemin de votre image).  Voici le type
de code que vous devriez obtenir ...
<IMG SRC="Sans-titre-1.gif" WIDTH=550 HEIGHT=344 BORDER=0
USEMAP="#Sanstitre_1_Map">
<MAP NAME="Sanstitre_1_Map"> <AREA SHAPE="poly" ALT="011" COORDS="419,112, 420,151, 420,167, 414,161, 410,174, 403,149, 399,147, 398,117, 419,108" HREF="http://www.golumfr.com"> <AREA SHAPE="poly" ALT="011" COORDS="452,119, 449,132, 444,125, 448,152, 444,160, 440,158, 434,157, 430,167, 429,118, 436,118, 448,115" HREF="http://www.golumfr.com"> <AREA SHAPE="poly" ALT="011" COORDS="390,123, 397,169, 394,170, 390,178, 378,146, 378,170, 370,184, 362,166, 353,151, 355,180, 350,177, 347,193, 342,129, 355,128, 369,146, 373,121, 389,121" HREF="http://www.golumfr.com"> <AREA SHAPE="poly" ALT="011" COORDS="332,171, 330,191, 323,187, 311,194, 308,199, 304,192, 301,196, 285,163, 281,146, 297,146, 306,176, 313,176, 318,166, 312,138, 326,137" HREF="http://www.golumfr.com"> <AREA SHAPE="poly" ALT="011" COORDS="254,157, 268,187, 287,187, 283,212, 279,197, 276,201, 272,197, 267,207, 259,212, 255,203, 249,211, 244,190, 243,155" HREF="http://www.golumfr.com"> <AREA SHAPE="poly" ALT="011" COORDS="232,171, 237,188, 235,210, 232,208, 219,224, 217,215, 208,226, 203,214, 191,202, 185,196, 196,170, 215,161" HREF="http://www.golumfr.com"> <AREA SHAPE="poly" ALT="011" COORDS="177,186, 169,191, 164,192, 156,189, 151,194, 149,206, 157,216, 172,211, 159,205, 161,199, 181,199, 186,224, 183,222, 179,219, 175,233, 172,226, 166,231, 162,243, 158,230, 151,232, 147,231, 141,223, 136,238, 137,186, 160,177, 175,182" HREF="http://www.golumfr.com"> </MAP>  Et
voici le résultat ...
Par la suite
nous verrons comment faire un "roll over" ... (changement de l'état de
l'image au clic ou au survol).
Divers : |
ver 1.2
derniere édition le 17 octobre 2006