GroupesFAQAccueilRechercherMembresS'enregistrerConnexion

Partagez | 
 

 Tuto HTML #3 - Les images MAP

Voir le sujet précédent Voir le sujet suivant Aller en bas 
AuteurMessage
Dragon-blue
Administrateur
Administrateur
avatar

Masculin Nombre de messages : 12949
Date d'inscription : 03/11/2008
Age : 24
Humeur : 5 ans o/

MessageSujet: Tuto HTML #3 - Les images MAP   Jeu 16 Déc 2010 - 10:14

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é Wink
    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.


Dernière édition par Dragon-blue le Lun 15 Avr 2013 - 8:02, édité 1 fois
Revenir en haut Aller en bas
Voir le profil de l'utilisateur
Master Cake
You can't run
You can't run
avatar

Masculin Nombre de messages : 1331
Date d'inscription : 13/06/2010
Age : 20
Humeur : DU POULEEEEEET

MessageSujet: Re: Tuto HTML #3 - Les images MAP   Jeu 16 Déc 2010 - 11:11

J'le f'rait d'main

_________________
Pourquoi je suis un vainqueur:
 
Revenir en haut Aller en bas
Voir le profil de l'utilisateur
 
Tuto HTML #3 - Les images MAP
Voir le sujet précédent Voir le sujet suivant Revenir en haut 
Page 1 sur 1

Permission de ce forum:Vous ne pouvez pas répondre aux sujets dans ce forum
Génération Nintendo :: Forums Nintendo :: Dossiers & Tutoriels-
Sauter vers: