Logo Génération Nintendo
Accueil Forum Dossiers Tuto HTML #3 - Les images MAP

Tuto HTML #3 - Les images MAP

Nouveau sujet Répondre
Dragon-blue
Vieux de la vieille		 #27414 Tuto HTML #3 - Les images MAP Jeu 16 Déc 2010 - 18:14 (modifié)

“Pouet”
21376 messages
Inscrit en 2008
Monter Descendre
Voici un tutoriel très sympathique qui vous permettra de réaliser une image avec différents liens cliquables dessus. Formidable, n'est ce pas ?


Un exemple d'image MAP :









  • Pour commencer, prenez un code Html basique d'une image avec son lien et rajoutez y l'attribut : usemap="#map". Ce code permettra d'afficher votre image MAP.
    • Code:
    <img usemap="#map" src="http://ton_image.png" />



  • Ensuite ouvrez une autre balise, qui indiquera cette fois ci le découpage de votre image.
    • C'est à l'intérieur de cette balise que nous allons mettre le code des découpes de votre image.
    Code:
    <img usemap="#map" src="http://ton_image.png" />
    <map name="map">

    </map>



  • Maintenant, il faut donc s'intéresser à la découpe de votre image.
    • Il existe plusieurs types de découpes :
    -Le rectangle
    -Le cercle
    -Le polygone

    Tout d'abord, il faut partir de la balise :
    Code:
    <area />

    Puis vous y rajouterez les attributs suivants :

    -shape : vous y indiquerez la forme de la découpe : "rect", "circle" ou "polygon"

    -coords : ce sont les coordonnées des formes définies par l'attribut "shape", mesurées en pixels depuis le coin supérieur gauche de l'image. Voici un petit screen du site du Zero qui vous dira tout.

    Spoiler:


    -href : C'est tout simplement l'attribut qui indique le lien à qui renvoi la découpe de l'image.


  • Il ne reste plus qu'à assembler le tout est le tour est joué ;)
    • Voici le code final de l'image MAP ci-dessus :

    Code:
    <img usemap="#map" src="http://ton_image.png" />
    <map name="map">
    <area shape="rect" coords="60,123,242,190" href="lien1.html">
    <area shape="circle" coords="73,73,72" href="lien2.html">
    <area shape="polygon" coords="88,58,297,58,254,171" href="lien3.html">
    </map>






Voilà, éclatez vous bien xD
Et sii jamais vous avez besoin d'aide, n'hésitez pas à poser des questions.
_________________
Fond Blanc
Membre remarquable		 #27423 Tuto HTML #3 - Les images MAP Jeu 16 Déc 2010 - 19:11

1344 messages
Inscrit en 2010
Monter Descendre
J'le f'rait d'main :awesome:
Tuto HTML #3 - Les images MAP
Nouveau sujet Répondre
Index du forum :: Articles :: Dossiers
Sauter vers: