Haribot' ♪
{ Membre hyper-actif }
Messages : 5163
| Image RéactiveInformations générales- Description :
- Nous allons apprendre comment créer une Image Réactive. Vous ne savez pas ce que c'est ?
Une Image Réactive, c'est une image (logique) où l'on va pouvoir cliquer sur des zones qui vont nous amener vers des liens externes. Vous comprendrez mieux en suivant le tutoriel
- Démo :
- Compatibilité :
- Compatible avec tous les navigateurs
- Crédits :
- Proposé et validé par Hαrιcoow le 29/06/2010
Le tutorielAlors, certains vont vous dire d'utiliser des logiciels extra-compliqués et uniquement fait pour ça comme dans le tutoriel du FDF, or c'est une grosse bêtise parce que simplement avec Photofiltre Gratuit on peut le faire ! 1ère Étape : Prenez votre Image. 2ème Étape : Sous photofiltre (téléchargeable ici), délimitez à l'aide de l'outil sélection la zone que vous souhaitez rendre cliquable. Gardez toujours votre zone sélectionnée et vous voyez 4 nombres en bas, comme ceci : 52:21 => 141:45. Retenez-les! On va s'en servir pour le code HTML. 3ème Étape : Prenez votre page HTML, commencez par copier-coller ce code et le remplir. Vous devez héberger votre image et connaître son URL (son adresse) pour le faire : - Code:
-
<img name="accueil0" src="URL DE VOTRE IMAGE" usemap="#accueil" alt="" /> Ensuite, collez ceci : - Code:
-
<map name="accueil"> Puis ceci à la suite pour mettre les liens : - Code:
-
<area shape="rect" coords="A,B,C,D" href="LIEN" alt="NOM DU LIEN" /> NOM DU LIEN : Donnez-lui un nom. Il permet de se repérer car en général vous en aurez plusieurs. LIEN : Lien vers lequel on sera redirigé en cliquant sur la zone de l'image que vous avez sélectionnée. A,B,C,D : Correspond aux chiffres que vous avez retenu dans l'ordre!Et n'oubliez pas de mettre ceci à la fin pour fermer : - Code:
-
</map> Ce qui donnera par exemple pour mon image : - Code:
-
<img name="accueil0" src="http://i61.servimg.com/u/f61/11/01/00/53/cssact12.png" usemap="#accueil" alt="" /> <map name="accueil"> <area shape="rect" coords="52,21,141,45" href="http://www.css-actif.com/forum.htm" alt="CSSActif" /> </map> Et voilà ! Bonne Chance! Cordialement, Haricoow. | | |
|
Kaiji
Blanche-Neige
Messages : 5578
| FAQ comment on fait pour mettre plusieurs 'map' sur l'image ? Comme pour une PA par exemple. Pour un renvoi vers plusieurs liens, il suffit de répéter ce code - Code:
-
<area shape="rect" coords="A,B,C,D" href="LIEN" alt="NOM DU LIEN"> à la suite du premier, et sur le même principe Exemple du code employé pour ma carte en page d'accueil : - Code:
-
<img name="accueil0" src="http://img10.hostingpics.net/pics/186615Map.jpg" usemap="#accueil"> <map name="accueil"> <area shape="rect" coords="180,127,281,176" href="LIEN" alt="Stonefolm"> <area shape="rect" coords="68,77,207,318" href="LIEN" alt="Stonefolm"> <area shape="rect" coords="218,182,333,240" href="LIEN" alt="Terres neutres"> <area shape="rect" coords="210,141,254,403" href="LIEN" alt="Terres neutres"> <area shape="rect" coords="258,302,432,462" href="LIEN" alt="Pallengad"> <area shape="rect" coords="288,261,434,297" href="LIEN" alt="Pallengad"> </map> Peut-on insérer une infobulle avec ce tuto ? Oui, je te renvoie ici. Comment on fait pour voir les nombres requis sur photoshop ? Il suffit d'aller dans "Fenêtres > Informations". Une boite à outil s'ouvre, dans laquelle on à trois onglets, choisissez l'onglet information et positionnez votre curseur sur l'image, les coordonnées s'afficheront =) Au cas ou les coordonnées s'afficherait en centimètre cliquez sur le logo en haut à droite de la boîte à outil : "Option de Panneau > Unités > Pixels". Pour toute question sur ce tutoriel, merci de poster une demande d'aide ici : http://www.css-actif.com/f17-aide-css-xhtml | | |
|