HTML - Leçon 15. Cartes de navigation - carte

Ces images cliquables peuvent être côté client ou côté serveur. Les liens de la carte client sont stockés dans le document lui-même, et en cliquant sur la souris, le navigateur détermine lui-même à quelle zone appartiennent les coordonnées de ce point et navigue vers le lien souhaité.

Avec la version serveur, ces coordonnées sont d'abord transmises au serveur, traitées là-bas par un programme spécial, et seulement après cela, le lien est évidemment préférable. Nous les considérerons.

Par exemple, imaginons que nous soyons un magasin d’électroménager et que dans l’en-tête de notre site Internet nous ayons l’image suivante :

Faisons-en une carte de navigation, c'est-à-dire lorsque vous cliquez sur le réfrigérateur, vous serez redirigé vers une page dédiée aux réfrigérateurs (avec modèles, descriptions et tarifs), lorsque vous cliquez sur l'aspirateur et le lave-linge, vous serez redirigé vers leurs pages correspondantes.

Pour ce faire, nous devons décrire les zones de cette image qui seront des liens. Les balises sont utilisées pour décrire ces zones avec un seul paramètre nom, qui spécifie le nom de la carte de liens et est ensuite utilisé pour créer un lien vers cette carte.

• forme- définit la forme de la zone, peut prendre les valeurs suivantes :
  • rectifier- zone en forme de rectangle,
  • cercle- zone en forme de cercle,
  • poly- zone en forme de polygone,
  • défaut- toute la région.
• cootds- définit les coordonnées d'une zone distincte :
  • Pour rectifier les coordonnées des coins supérieur gauche et inférieur droit du rectangle sont précisées,
  • Pour cercle les coordonnées du centre et du rayon du cercle sont précisées,
  • Pour poly les coordonnées des sommets du polygone sont spécifiées dans l'ordre requis.
• href- définit l'adresse du lien.
• cible- utilisé lors de l'utilisation de cadres et indique le cadre dans lequel la page doit être chargée.
• alt- définit un texte alternatif pour la zone.

À ces fins, certains programmes sont généralement utilisés, par exemple Image Ready, qui dispose d'un outil spécial pour délimiter les zones et crée automatiquement des descriptions de ces zones. La prise en compte du fonctionnement de ces programmes n'est pas incluse dans le cours HTML, nous définirons donc ici les coordonnées « à l'œil nu ». Jetez à nouveau un œil à notre image :

La largeur de notre image est de 738 pixels et la hauteur est de 192 pixels. Traçons des lignes le long des frontières de nos régions et déterminons approximativement les coordonnées. Nous sommes maintenant prêts à ajouter ces paramètres à nos balises .

Désormais, nos zones sont devenues des liens (si vous déplacez le curseur de la souris, il se transforme en paume). Il n'y a pas de pages sur ce site dédiées aux réfrigérateurs, les liens vous mèneront donc à la même page, mais si vous créez les pages souhaitées, cliquer sur la zone vous amènera à la page.

Ceci conclut nos leçons. Vous êtes familiarisé avec toutes les fonctionnalités du langage HTML. Pour consolider vos compétences, consultez les deux leçons Créer un site Web - mise en page tabulaire.

Enfin, je dois dire qu'il y a deux autres éléments merveilleux en HTML : les balises

Étiqueter

À l'intérieur du conteneur

• un ou plusieurs éléments< >. Ces éléments n'ont pas de contenu mais définissent les régions géométriques de l'image cliquable et les hyperliens associés à chaque région
• contenu au niveau du bloc. Ce contenu doit inclure< >, qui précisent les régions géométriques de la carte et les liens associés à chaque région

Si étiquette

Si des régions se chevauchent, l'élément définissant la région qui apparaît plus tôt dans le document est prioritaire.

HTML: 3.2 | 4 / XHTML: 1.0 | 1.1

Syntaxe

Attributs

classe	définit le nom de la classe à utiliser
dir	détermine la direction des personnages : ltr - de gauche à droite rtl - de droite à gauche
identifiant	identifiant unique
langue	définit la langue du document affiché
nom	nom de la carte image. Utilisé comme valeur du paramètre usemap de la balise
onflou	l'élément perd son focus
en cliquant	cliquer sur un élément
ondblcliquez	double-cliquez sur un élément
se concentrer	élément qui se concentre
onkeydown	appuyer sur une touche lorsque l'élément a le focus
sur une touche	appuyer et relâcher une touche lorsqu'un élément a le focus
sur la touche	relâcher une touche précédemment enfoncée lorsque l'élément a le focus
sur la souris	cliquer sur un bouton de la souris lorsqu'un élément a le focus
surmousemove	mouvement du pointeur de la souris lorsqu'un élément a le focus
onmouseout	déplacer le pointeur de la souris hors d'un élément
au survol de la souris	placer le pointeur de la souris sur un élément
sur la souris	relâcher un bouton de la souris précédemment enfoncé lorsqu'un élément a le focus
style	spécifie une feuille de style en ligne
titre	info-bulle

Exemple

• la balise de fermeture est obligatoire ()
• L'attribut id est obligatoire
• Il est recommandé de fournir une alternative textuelle à une carte graphique dans les cas où les graphiques ne sont pas disponibles ou où l'utilisateur ne peut pas les obtenir.
• Il n'est pas recommandé d'utiliser la carte image comme navigation principale, en raison de la mauvaise prise en charge des navigateurs plus anciens et vocaux.

Étiqueter — élément de niveau bloc, c'est-à-dire le contenu de la balise commence toujours sur une nouvelle ligne. Un saut de ligne est également ajouté après la balise.

Bonjour. Récemment, j'ai eu l'occasion de traiter une fonctionnalité HTML aussi spécifique qu'une image cliquable. Pour être honnête, je n’ai pas eu l’occasion de l’utiliser souvent et puis, généralement, tout se faisait dans des zones de forme rectangulaire. Mais ce n’était pas le même cas. La tâche consistait à publier des liens vers des régions individuelles de l'image, qui était une carte du pays, et, malheureusement, il n'était pas question de toiles ou de svg. Uniquement du HTML, uniquement du hardcore ! La tâche est donc définie, Google est activé et nous pouvons commencer.

Théorie

• coordonnées- coordonnées de la zone de sélection
• href- lien vers lequel vous accéderez lorsque vous cliquerez sur la zone
• nohref- indique que la zone ne contient pas de lien
• forme- formulaire de sélection
  • cercle- zone de sélection en forme de cercle
  • défaut- sélectionne toute la zone de l'image
  • poly- zone de sélection sous forme de polygone
  • rectifier- zone de sélection en forme de rectangle
• cible- détermine où le lien s'ouvrira

Puisque ma zone de sélection devait être polygonale, nous spécifions la valeur de l'attribut de forme, la balise de zone, comme zone poly-polygonale. Dans ce mode, les coordonnées du point par rapport au coin supérieur gauche sont indiquées, séparées par des virgules - x,y. Les points sont également séparés par des virgules, ce qui provoque d'abord une confusion lors de la lecture d'un tel code.

Nous écrivons Paint

Tout d’abord, préparons la mise en page :

Corps (marge : 0 ; remplissage : 20 px ; famille de polices : Arial, Helvetica, sans-serif ; ) img ( bordure : aucune ; contour : aucun ; affichage : bloc ; -moz-user-select : aucun ; -webkit-user -select : aucun ; sélection par l'utilisateur : aucun ; ) .canvas ( bordure : 2px solide #333 ; remplissage : 2px ; marge inférieure : 16px ; affichage : bloc en ligne ; //affichage : en ligne ; //zoom :1 ; ) .canvas.draw ( couleur de la bordure : #3C0 ; ) .canvas .inner ( position : relative ; ) .canvas .point ( largeur : 1px ; hauteur : 1px ; couleur d'arrière-plan : #fff ; bordure : 1px solide #000 ; débordement : caché ; position : absolue ; .bar (marge inférieure : 16 px ; ) .info ( couleur d'arrière-plan : #FCFCFC ; bordure : 1 px en pointillés #CCC ; taille de police : 12 px ; style de police : italique ; remplissage : 8px ; retour à la ligne : mot de rupture ;
En javascript, tout est assez simple. Pendant le processus d'écriture, j'ai utilisé ma propre bibliothèque de combat, alors ne soyez pas surpris par les fonctions non standard. Tout d'abord, attachons un événement mousedown à #canvas, dans lequel un point sur l'image. sera rendu et ses coordonnées seront enregistrées.

Var addPoint = function(e)( var e = _.getEvent(e), offset = _.getOffset(nodes["canvas"]), x = e.clientX + _.getDocScrollLeft() - offset, y = e. clientY + _.getDocScrollTop() - offset, node = nodes["canvas"].appendChild(_.node("div", ("class":"point"))); +"px"; node.style.left = x-1+"px"; points.push(("x" : x, "y" : y, "node" : node)); ;
Ensuite nous écrirons une fonction qui générera le code html de notre carte.

Var renderInfo = function())( var text; _.clearNode(nodes["info"]); nodes["info"].appendChild(_.node("span", " ")); };
) text += "">"; nodes["info"].appendChild(_.node("span", text)); nodes["info"].appendChild(_.node("br")); ) ) nodes["info"].appendChild(_.node("span", "

Encadrons le tout dans une classe, quelques fonctions d'assistance, c'est tout. J'espère que cet outil sera utile à quelqu'un.

"J'ai créé un modèle pour placer des liens vers différentes pages Web ("") dans certaines zones de celle-ci

Maintenant, si vous cliquez sur les formes avec des inscriptions, les pages correspondantes s'ouvriront : profil, agenda ou tous les articles de la section « Cours Photoshop » (attention ! après avoir transféré le blog sur WordPress et l'avoir retravaillé, les liens ne fonctionnent pas ! mais le la leçon reste d'actualité !)

Pour que l'image fonctionne, j'ai écrit approximativement le code HTML suivant :

Ce code peut être inséré dans le champ message (avec le bouton « Source » enfoncé) ou dans l'épigraphe...D'ailleurs, il y a d'autres posts sur le sujet : «Qu'est-ce que le HTML", "Code HTML des images", "

Lien photo »et ainsi de suite.

1. Coordonnées

Pour composer le code ci-dessus, j'ai retenu un peu de géométrie :)
Système de coordonnées : axe X - de haut en bas, axe Y - de gauche à droite
Pour définir les coordonnées d'une figure, vous devez définir :
- un carré (ou rectangle) dont les côtés sont parallèles aux axes - les coordonnées de deux angles opposés - X1, Y1 et X2, Y2
- polygone - coordonnées de TOUS les angles

— cercle — coordonnées du centre et rayon. Dans mon cas, il s'avère que j'ai besoin de coordonnées— pour le lien « Profil » (rectangle), points D, E, F, G, H — pour le lien « Journal » (polygone), Q et longueur R — pour le lien « Leçons Photoshop » (cercle). Tous ces numéros dans le code HTML ci-dessus sont surlignés en rouge.

De plus, vous devez connaître la taille de l'image en pixels (couleur verte) Il n'y a pas besoin d'une précision particulière, vous pouvez donc déterminer les coordonnées à l'aide de la « règle » dans Photoshop - pour l'appeler, cliquez sur

Ctrl+R C'était plus intéressant pour moi que quelqu'un d'autre calcule les coordonnées. Pour ce faire je lance MS Peinture

(Démarrer - Tous les programmes - Accessoires - Paint) et ouvrez-y un dessin. Lorsque vous passez le curseur sur les points souhaités, leurs coordonnées apparaissent dans le panneau inférieur, que j'écris soigneusement

2. Code HTML

Les cartes de navigation sont spécifiées par la balise La balise map comprend des balises

, qui définissent les régions géométriques de la carte de dessin et les liens qui leur sont associés.

— Voici comment j'ai compris : pour créer une carte de navigation il vous faut :

— balises avec description de l'image

— balises de la carte

balises de zone

• Dans mon cas, les valeurs se sont avérées être : largeur="640" hauteur="367"
• — dimensions de l'image
• src="https://site/f02c73a3cd94.jpg" - adresse de l'image sur le site usemap="# image" — nom conventionnel de l'image-map
• (peut être n'importe lequel) nom de la carte="image" (— nom de la carte pleinement

correspond à ce qui précède)

Les valeurs des zones de lien — href — la cible du lien, shape — la forme de la zone et coords — les coordonnées — correspondent à trois zones de l'image.

• Rectangle "Profil"
• href="https://site/profile/" — adresse de la page de profil
• shape="rect" - désignation de la forme "rectangle"

coords="235,61,472,117" — coordonnées des points A (235,61) et C (472,117)

• Polygone "Journal"
• href="https://site/blog" - adresse de la page du journal
• shape="poly" - désignation de la forme "polygone"

coords="235,118,362,118,474,152,457,207,229,146" - coordonnées des coins du polygone : points D (235 118), E (362 118), F (474 ​​152), G (457 207) et H (229 146)

• Encerclez "Leçons Photoshop"
• href="https://site/showjournal.php?journalid=2447247&keywordid=929323" — adresse de la page des articles de la section « Tutoriels Photoshop »
• shape="circle" - désignation de la forme "cercle"

coords="551,198,65" — coordonnées du cercle : centre — point Q (551,198) et rayon — R=65

3. Terminer

J'ai remplacé toutes les valeurs obtenues dans le code HTML « système » pour la carte-image de navigation et j'ai obtenu ce qui suit :

C'est ce code qui, lorsqu'il est utilisé, « se transforme » en une image avec des zones de liens.

Si vous trouvez une erreur, veuillez surligner un morceau de texte et cliquer sur Ctrl+Entrée.

Vlad Merjevitch

Les cartes d'images vous permettent de lier des liens vers différentes zones de la même image. Mis en œuvre en deux diverses options - serveur et client. Lors de l'utilisation de l'option serveur, le navigateur envoie une requête au serveur pour obtenir l'adresse du lien sélectionné et attend une réponse avec les informations requises. Cette approche nécessite un temps supplémentaire pour attendre le résultat et fichiers séparés pour chaque carte image.

Dans la version client, la carte se trouve dans le même document HTML que le lien vers l'image.

Version client de la carte-image

Pour indiquer qu'une image est une carte, utilisez l'attribut usemap de la balise .

La valeur est un lien vers une description de la configuration de la carte.

Onglet 4

.

La valeur de l'attribut name de cette balise doit correspondre au nom dans le usemap.

Pour définir la zone active, qui est un lien vers un document HTML, utilisez la balise

Attributs de la balise AREA

forme

Définit la forme de la zone active. La forme peut être sous la forme d'un cercle (circle), d'un rectangle (rect), d'un polygone (poly).

alt

Ajoute un texte alternatif pour chaque zone. Sert uniquement de commentaire pour le lien, car il n'est pas affiché à l'écran.

coordonnées

Définit les coordonnées de la zone active. Les coordonnées sont mesurées en pixels à partir du coin supérieur gauche de l'image, ce qui correspond à la valeur 0,0. Le premier nombre est la coordonnée horizontale, le second est la coordonnée verticale. La liste des coordonnées dépend de la forme de la zone.

Pour un cercle, trois nombres sont spécifiés : les coordonnées du centre du cercle et le rayon.

Pour un rectangle, les coordonnées des coins supérieur gauche et inférieur droit.

Pour un polygone, les coordonnées de ses sommets sont précisées (Fig. 2).

Riz. 2. Coordonner les points du polygone

1. Les cartes vous permettent de définir n'importe quelle forme de la zone de lien. Etant donné que les images sont de nature rectangulaire, il n'est pas possible de réaliser un lien graphique de forme complexe, par exemple pour indiquer une zone géographique, sans images cartographiques. En règle générale, dans les sujets géographiques, les cartes-images sont le plus souvent utilisées.

2. Il est plus pratique de travailler avec un seul fichier - vous n'avez pas à vous soucier de joindre des fragments individuels et le dessin peut être facilement placé au bon endroit.

Défauts

1. Vous ne pouvez pas définir d'info-bulle et de texte alternatif pour des zones individuelles. Le texte alternatif vous permet d'obtenir informations textuelles sur le dessin lorsque le chargement de l'image est désactivé dans le navigateur. Étant donné que les images sont chargées après que le navigateur a reçu des informations à leur sujet, le texte de remplacement de l'image apparaît plus tôt. Et au fur et à mesure du chargement, le texte sera remplacé par une image.

Pour les cartes d'images, cette fonctionnalité est pertinente, car si vous désactivez l'affichage des images, ce que font de nombreux utilisateurs, vous finirez par ne voir qu'un seul rectangle vide.

2. Avec une forme complexe de la zone de lien, la quantité de code HTML augmente. Le contour est approximé par un ensemble de segments droits ; pour chaque point d'un tel segment, deux coordonnées doivent être spécifiées et le nombre total de ces points peut être assez important. En toute honnêteté, il convient de noter que les formulaires complexes constituent un cas particulier et sont assez rarement utilisés.

3. Avec les cartes d'images, vous ne pouvez pas créer divers effets disponibles lors de la découpe d'une image en fragments : effet de roulement, animation partielle, optimisation individuelle des images pour leur chargement rapide.

Convivialité Du point de vue du confort d'utilisation, les images cliquables n'ont qu'un seul avantage : des liens de formes diverses. Cela ajoute de la clarté à la présentation des informations - nous ne sommes pas limités à la forme rectangulaire du lien et pouvons utiliser des liens de configuration complexe à nos propres fins. À tous autres égards, ils ne sont d'aucune utilité - les liens texte classiques sont plus informatifs et ils n'ont pas peur de désactiver l'affichage des images dans le navigateur. Le fait qu'une image se charge plus rapidement que la même image, mais découpée en fragments et enregistrée sous forme d'ensemble, facile à vivre. Chacun de ces fichiers finaux peut être réduit à l'aide de paramètres d'optimisation individuels. En conséquence, le volume total de tous les fragments occupera moins d'espace qu'une image. Il ne faut pas négliger le facteur psychologique - il semble à une personne qu'un ensemble de petites images se charge plus rapidement qu'une grande.

Le principal inconvénient des cartes est qu’il n’y a pas de limites clairement définies des liens. Ces limites doivent donc être mises en évidence par différents moyens déjà présents dans l’image. Si l'image ne se charge pas pour une raison quelconque, la compréhension de l'ensemble des liens devient alors très problématique.

Options alternatives

Il n’est pas toujours urgent d’utiliser des cartes d’images, sachez donc qu’il en existe d’autres options possibles accomplir la tâche assignée.

Utiliser Flash

Vous pouvez créer différentes zones de liens dans les vidéos Flash à l'aide des fonctionnalités graphiques vectoriels. Grâce à ses capacités étendues, vous pouvez créer des menus et une navigation époustouflants dans Flash. Mais ici aussi, la prudence est de mise pour ne pas perdre la forêt au profit des arbres.

Découpage d'images

C'est l'un des moyens les plus populaires en matière de design. Dans ce cas, une image est coupée en utilisant programmes spéciaux en fragments qui sont finalement rassemblés, créant l'illusion d'une image complète. Bien que les zones de découpe ne puissent être que rectangulaires, cela suffit dans la plupart des cas pour créer des liens.

Pour chaque fragment, vous pouvez sélectionner le format graphique le plus approprié dans lequel il sera enregistré, les paramètres d'optimisation et ajouter un texte alternatif. Ainsi, même avec l'affichage des images désactivé, les limites des zones et le texte remplaçant l'image seront clairement visibles.

CV