Accueil  Calendrier  FAQ  Rechercher  S'enregistrerS'enregistrer  Connexion  

Partagez | 
 

 [Code + Cours] Image MAP

Voir le sujet précédent Voir le sujet suivant Aller en bas 
AuteurMessage
mYn
Modératrice
avatar

Féminin
Nombre de messages : 4409
Age : 24
Localisation : 93 [Seine St-Denis]
Logiciels : Photoshop

MessageSujet: [Code + Cours] Image MAP   Sam 14 Juin - 15:22

Qu'est-ce qu'une image MAP ?
"C'est une image dont une partie est utilisée comme lien hypertexte. Une image réactive est ainsi nommée car elle se trouve divisée en plusieurs zones qui correpondent chacune à un lien hypertexte."


Comment faire une image MAP ?
Pour cela il faut tout d'abord une image (logique) et un code.
Donc voici le code :
Code:

<img src="URL DE L'IMAGE"style="border: 0px solid; width: LARGEUR DE L'IMAGEpx; height: HAUTEUR DE L'IMAGEpx; float: left;" usemap="#NOM DE L'IMAGE MAP"/>
<map name="NOM DE L'IMAGE MAP (MEME CHOSE QU'AU DESSUS)">
 <area alt="TEXTE ALTERNATIF DU LIEN" coords="NOMBRE DE PX DU DEBUT DU LIEN A PARTIR DE LA GAUCHE,NOMBRE DE PX DU DEBUT DU LIEN A PARTIR DU HAUT DE L'IMAGE,NOMBRE DE PX DE LA FIN DU LIEN A PARTIR DE LA GAUCHE DE L'IMAGE ,NOMBRE DE PX DE LA FIN DU LIEN A PARTIR DU HAUT DE L'IMAGE" href="URL DU LIEN">
</map>

Tout ce qui est en majuscules est à remplacer !

Ok avec les coordonnées ça a l'air compliqué. Donc voici un schéma que j'ai fait pour vous éclairer :



Si vous souhaitez faire plus qu'un lien sur votre image MAP ajouter ceci autant de fois désiré avant la balise de fin :
Code:
<area alt="NOM DU LIEN" coords="...,...,...,..." href="URL DU LIEN">
(Le détail des coordonnées n'est pas présent pour plus de clareté)
Revenir en haut Aller en bas
Voir le profil de l'utilisateur http://kpweb.c.la/
 
[Code + Cours] Image MAP
Voir le sujet précédent Voir le sujet suivant Revenir en haut 
Page 1 sur 1
 Sujets similaires
-
» Image défilante
» Comment insérer une image dans les messages du forum ?
» Inserrer du code dans un poste
» Répétition horizontale/verticale d'une image de fond
» Effet d'opacité sur une image (ou autre chose)

Permission de ce forum:Vous ne pouvez pas répondre aux sujets dans ce forum
Learning Design :: World wide web :: Les tutoriaux :: Le HTML-
Sauter vers: