ASP:IMAGEMAP |
ASP : Carte d'image |
|---|---|
| ASP.NET | |
Syntaxe
|
<asp:ImageMap paramètres> ... </asp:ImageMap> |
Paramètres
| Paramètre | Description | ||
|---|---|---|---|
| AccessKey=valeur | Ce paramètre de balise permet d'indiquer un touche de raccourci à associer avec cette balise. | ||
| AlternateText=valeur | Ce paramètre de balise permet d'indiquer un texte alternatif lorsque l'image n'est pas affiché. | ||
| BackColor=valeur | Ce paramètre permet d'indiquer la couleur d'arrière plan de la balise. | ||
| Border=valeur | Ce paramètre de balise permet de définir la largeur en pixel d'une bordure de tableau. | ||
| BorderColor=valeur | Ce paramètre permet d'indiquer la couleur de bordure de la balise. | ||
| BorderStyle=valeur | Ce paramètre permet d'indiquer le style de bordure de la balise : NotSet, None, Dotted, Dashed, Solid, Double, Groove, Ridge, Inset ou Outset. | ||
| BorderWidth=valeur | Ce paramètre permet d'indiquer la largeur de la bordure de la balise. | ||
| CssClass=valeur | Ce paramètre permet d'indiquer la classe de feuille de style CSS de la balise. | ||
| Enabled=valeur | Ce paramètre permet d'indiquer si la balise doit être active ou non : | ||
| Constante | Description | ||
| "False" | Cette constante permet d'indiquer que la balise n'est pas active. | ||
| "True" | Cette constante permet d'indiquer que la balise n'est pas active. | ||
| EnableTheming=valeur | Ce paramètre permet d'indiquer si le thème de la balise doit être affiché ou non : | ||
| Constante | Description | ||
| "False" | Cette constante permet d'indiquer que le thème de la balise n'est pas affiché. | ||
| "True" | Cette constante permet d'indiquer que le thème de la balise est affiché. | ||
| EnableViewState=valeur | Ce paramètre permet d'indiquer si le ViewState de la balise doit être activé ou non : | ||
| Constante | Description | ||
| "False" | Cette constante permet d'indiquer que le ViewState de la balise n'est pas actif. | ||
| "True" | Cette constante permet d'indiquer que le ViewState de la balise est actif. | ||
| ForeColor=valeur | Ce paramètre permet d'indiquer la couleur de premier plan de la balise. | ||
| Height=valeur | Ce paramètre permet d'indiquer la hauteur de la balise. | ||
| ID=identificateur | Ce paramètre de balise permet d'indiquer l'identificateur de cette balise. | ||
| ImageAlign=alignement | Ce paramètre de balise permet de définir le type d'alignement horizontal que la cellule appliquera par défaut : | ||
| Constante | Description | ||
| "AbsBottom" | Cette constante indique que l'alignement absolue sera effectué à partir du bas | ||
| "AbsMiddle" | Cette constante indique que l'alignement absolue sera effectué à partir du milieu | ||
| "Baseline" | Cette constante indique que l'alignement sera effectué à partir de la ligne de base | ||
| "Bottom" | Cette constante indique que l'alignement sera effectué à partir du bas | ||
| "Left" | Cette constante indique que l'alignement sera effectuer à partir de la gauche | ||
| "Middle" | Cette constante indique que l'alignement sera effectué à partir du milieu | ||
| "NotSet" | Cette constante indique qu'il n'y a pas d'alignement | ||
| "Right" | Cette constante indique que l'alignement sera effectuer à partir de la droite | ||
| "TextTop" | Cette constante indique que l'alignement texte sera effectuer à partir du haut | ||
| "Top" | Cette constante indique que l'alignement sera effectuer à partir du haut | ||
| ImageUrl=valeur | Ce paramètre permet d'indiquer un lien URL vers l'image. | ||
| OnClick=valeur | Ce paramètre permet d'indiquer le gestionnaire d'événement lorsqu'un clic est effectué. | ||
| OnDataBinding=valeur | Ce paramètre permet d'indiquer le gestionnaire d'événement de DataBinding. | ||
| OnDisposed=valeur | Ce paramètre permet d'indiquer le gestionnaire d'événement de disposition. | ||
| OnInit=valeur | Ce paramètre permet d'indiquer le gestionnaire d'événement d'initialisation. | ||
| OnLoad=valeur | Ce paramètre permet d'indiquer le gestionnaire d'événement de chargement. | ||
| OnPreRender=valeur | Ce paramètre permet d'indiquer le gestionnaire d'événement de pré-rendu. | ||
| OnUnload=valeur | Ce paramètre permet d'indiquer le gestionnaire d'événement de déchargement. | ||
| runat=valeur | Ce paramètre permet d'indiquer où doit être exécuté la balise : | ||
| Constante | Description | ||
| "server" | Cette constante permet d'indiquer qu'il faut exécuter la balise du côté serveur. | ||
| SkinID=valeur | Ce paramètre permet d'indiquer l'identificateur de Skin. | ||
| Style=valeur | Ce paramètre de balise permet d'indiquer des paramètres de feuille de style associé avec cette balise. | ||
| TabIndex=valeur | Ce paramètre de balise permet d'indiquer l'ordre de sélection des champs et éléments dans un formulaire. | ||
| ToolTip=valeur | Ce paramètre de balise permet d'indiquer l'info-bulle. | ||
| Visible=valeur | Ce paramètre permet d'indiquer si la balise doit être affiché ou non : | ||
| Constante | Description | ||
| "False" | Cette constante permet d'indiquer que la balise n'est pas affiché. | ||
| "True" | Cette constante permet d'indiquer que la balise est affiché. | ||
| Width=valeur | Ce paramètre de balise permet d'indiquer la largeur de la balise. | ||
| ... | ... | ||
Description
Cette balise permet d'afficher une image avec des liens couvrant un secteur rectangulaire («ASP:RECTANGLEHOTSPOT»), en cercle («ASP:CIRCLEHOTSPOT») ou en polygone («ASP:POLYGONHOTSPOT»).
Remarques
- Le contrôle <asp:ImageMap> permet d'afficher une image cliquable contenant plusieurs zones interactives. Chaque zone peut être associée à une action spécifique, offrant une navigation riche et graphique.
- Il reprend le principe classique des cartes d'image HTML (<map> et <area>), mais sous forme de contrôle serveur, avec une gestion simplifiée des zones via des objets comme RectangleHotSpot ou CircleHotSpot.
- La propriété ImageUrl permet de spécifier l'image utilisée pour la carte. Il peut s'agir d'un fichier local au projet ou d'un lien vers une image à distancee hébergée sur un autre serveur.
- On peut définir plusieurs zones sensibles, appelées hotspots, sur l'image. Ces zones peuvent être de forme rectangulaire, circulaire ou polygonale, ce qui permet une grande flexibilité dans la conception.
- Chaque HotSpot dispose d'attributs tels que NavigateUrl, AlternateText et PostBackValue. Cela permet de définir des actions différentes selon la zone cliquée : redirection, postback,...
- Le contrôle prend en charge deux modes principaux : HotSpotMode="Navigate" pour les redirections, et HotSpotMode="PostBack" pour déclencher des événements côté serveur via le code-behind.
- Lorsqu'un postback est déclenché, l'événement Click du ImageMap est invoqué. On peut alors identifier la zone cliquée grâce à la valeur de PostBackValue transmise à l'événement.
- La propriété ToolTip sur chaque HotSpot permet d'afficher une info-bulle lorsqu'on survole une zone. Cela améliore l'expérience utilisateur en rendant les zones actives plus compréhensibles.
- Le contrôle peut être stylisé à l'aide de CssClass, et l'image elle-même peut être redimensionnée avec Width et Height, tout en maintenant la précision des coordonnées des zones.
- L'ImageMap est particulièrement utile dans des interfaces pédagogiques, interactives ou cartographiques : cartes géographiques, plans d'architecture, schémas annotés,...
- Le positionnement des HotSpots se fait en précisant des coordonnées exactes dans l'image. Cela exige une connaissance précise des dimensions, mais permet une grande finesse dans l'interaction.
- Chaque HotSpot peut contenir une AlternateText, ce qui est utile pour l'accessibilité et le référencement. C'est également une bonne pratique pour les lecteurs d'écran.
- Le contrôle fonctionne bien dans des interfaces responsives si l'image et les coordonnées sont gérés dynamiquement ou via des outils JavaScript/CSS adaptant le contenu au redimensionnement.
- Il peut être intégré dans des composants plus complexes comme des formulaires ou des panels conditionnels, permettant par exemple de guider l'utilisateur à travers des étapes visuelles.
- Grâce au mode serveur, les interactions avec les zones peuvent être entièrement personnalisées en fonction du contexte (profil utilisateur, permissions, données,...), ce qui donne un grand contrôle côté développeur.
Voir également
Articles - Les géants de l'informatique - Microsoft
Dernière mise à jour : Samedi, le 31 août 2017