Différences entre les versions de « Aide:Image Map HTML »

772 octets ajoutés ,  23 juillet 2007 à 23:30
m
aucun résumé de modification
m (a déplacé Aide:HTML Map vers Aide:Image Map HTML: Correction pour correspondre à l'appellation courante en dev. web)
m
 
(3 versions intermédiaires par 2 utilisateurs non affichées)
Ligne 1 : Ligne 1 :
{{Icône|Lien=Aide:Aide|Texte=Sommaire de l'aide|Image=Icone Aide.png|Taille=20}}
{{Icône|Lien=Aide:Aide|Texte=Sommaire de l'aide|Image=Icone Aide.png|Taille=20}}
__NOEDITSECTION__
__NOEDITSECTION__
{{En construction}}
Les '''image-maps''' permettent d'ajouter à une image, des zones réactives sous forme de liens, cette technique peut être utilisée par exemple pour la construction de menus graphiques.
Pour utiliser des images à zones clickables utilisez cette syntaxe:
 
Une zone réactive peut être un rectangle, un polygone ou un cercle et elle doit être repérée de façon précise grâce à des coordonnées.
 
Ces coordonnées sont mesurée à partir du pixel supérieur gauche de l'image et fonctionne par couple (x,y), voici les coordonnées à fournir suivant les types:
* '''rect''' : coin supérieur gauche, coin inférieur droit
* '''circle''' : centre (x,y) et rayon
* '''polygon''' : liste des sommets du polygone sous la forme x,y
 
 
On peut se faire chevaucher plusieurs zones, pour cela, il faut déclarer en premier les zones de premier plan.


<pre>
<pre>
<htmlmap>
<imagemap>
[Lien vers l'image http://www.xxx.com/xxx.jpg|Texte alternatif|Largeur|Hauteur]
Image:Carte de l'Outremonde.jpg|400px|L'Outremonde
{rect|10,10,50,50|Lien http://www.xxx.com|Texte du lien}
poly 665 3 795 0 796 267 741 308 688 [[Zone 1]]
{polygon|10,10,50,50,60,10|Lien http://www.xxx.com|Texte du lien}
poly 88 578 483 558 507 554 533 588 594 791 588 [[Zone 2]]
{circle|10,10,50,50|Lien http://www.xxx.com|Texte du lien}
desc bottom-left
</htmlmap>
</imagemap>
</pre>
</pre>


Exemple: [[Tyrie]]
Vous pouvez créer des image-maps facilement avec cette outil : <span class="plainlinks">[http://gwiki.fr/utilitaires/ImageMapEditor/ Editeur ImageMap]</span>
 
''Exemple'' : [[Tyrie]]
 
[[Catégorie:Aide]]
[[Catégorie:Aide]]