• _blank - ouvre la page dans une nouvelle fenêtre
• _self - charge la page dans la fenêtre actuelle
• _parent - charge la page dans le cadre parent
• _top - annule tous les cadres et charge la page dans une fenêtre de navigateur complète

5. Attribut title="(!LANG:hint" - выводит всплывающую подсказку. можно также сделать более красивую всплывающую подсказку: как сделать красивую всплывающую подсказку для ссылки »!}

6. Attribut nohref - rend la zone inactive. Utilisé lors de la superposition d'objets. Il est utilisé assez rarement, mais parfois il peut être une solution indispensable. Par exemple, vous pouvez rendre inactif un petit cercle à l'intérieur d'un grand cercle.

La zone nohref doit venir en premier.

Exemple de code :

L'utilisation d'une carte de liens sur une image n'a lieu que dans un éventail restreint de tâches. Par exemple, lors de la création d'une sorte de schéma ou de carte. Dans d'autres cas, utiliser une carte pour créer des menus et d'autres éléments graphiques semble déraisonnable.

"J'ai fait un blanc pour placer des liens vers différentes pages Web sur certaines sections de celui-ci ("")

Maintenant, si vous cliquez sur les chiffres avec des légendes, les pages qui leur correspondent s'ouvriront : profil, journal, ou tous les articles de la section "Leçons Photoshop" (attention ! après avoir transféré le blog vers WordPress et l'avoir retravaillé, les liens ne travail ! mais la leçon reste pertinente !)

Pour que l'image fonctionne, j'ai écrit quelque chose comme ce code HTML :

Ce code peut être inséré dans le champ message (avec le bouton "Source" enfoncé) ou dans l'épigraphe...

Au fait, il y a d'autres articles sur le sujet :Qu'est-ce que le HTML ?Code HTML des dessins", "Picture-link" et ainsi de suite.

1. Coordonnées

Pour composer le code indiqué, je me suis souvenu d'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 de la 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 coins
- cercle - coordonnées du centre et du rayon.

Dans mon cas, il s'avère que nous avons besoin des coordonnées des points A, C - pour le lien "Profil" (rectangle), des points D, E, F, G, H - pour le lien "Journal" (polygone), Q et la longueur R - pour le lien " Photoshop Lessons" (cercle). Tous ces chiffres dans le code HTML en haut 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 trouver les coordonnées à l'aide de la "règle" dans Photoshop - pour l'appeler, j'appuie sur ctrl+r

J'étais plus intéressé à ce que quelqu'un d'autre calcule les coordonnées. Pour cela je cours Peinture MS(Démarrer - Tous les programmes - Accessoires - Paint) et ouvrez l'image qu'il contient. Lorsque vous survolez les points souhaités dans le panneau inférieur, leurs coordonnées apparaissent, que j'écris avec diligence

2. Code HTML

Les cartes de navigation sont définies par balise

La balise de carte comprend des balises , qui définissent les zones géométriques du plan de dessin et leurs références associées.

Je l'ai compris comme ceci - pour créer une carte de navigation, vous avez besoin de :

— balises de description d'image

— balises de carte

— balises de zone

Dans mon cas, les valeurs étaient:

• largeur= "640" hauteur= "367"-dimensions des images
• src="https://website/f02c73a3cd94.jpg" — URL de l'image sur le site
• usemap="# image"— nom conditionnel de l'image de la carte (peut être n'importe lequel)
• nom de la carte= image- nom de la carte (pleinement comme ci-dessus)

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 (zone) sur l'image.

Rectangle "Profil"

• href="https://site/profil/" — 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)

Cercle "Cours Photoshop"

• href="https://website/showjournal.php?journalid=2447247&keywordid=929323" — URL de la page des messages de la section Tutoriels Photoshop
• shape="cercle" - 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

Remplacé toutes les valeurs reçues dans le "système" du code HTML pour la carte d'image de navigation et obtenu ce qui suit :

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

Pour la formation, il existe une option facile "légère" pour créer des sections de liens - le post "Formation : zones de liens dans l'image"

Si vous trouvez une erreur, mettez en surbrillance un morceau de texte et cliquez sur Ctrl+Entrée.

Bonjour les amis. Dans cette vidéo, nous continuerons à parler des images cliquables en HTML. Mais d'abord, rappelons-nous ce dont nous avons parlé dans la dernière vidéo. Le fait est que ces vidéos sont assez étroitement liées les unes aux autres, et pour comprendre de quoi il s'agit, vous devez regarder les vidéos précédentes de la section images.

Dans le dernier didacticiel vidéo, nous venons de commencer à nous familiariser avec les images cliquables en HTML. Nous avons examiné à quoi cela devrait ressembler à la fin, cependant, avec l'utilisation de scripts. Nous avons parlé un peu des coordonnées. C'est ainsi que nous les définirons. Comme vous vous en souvenez peut-être, j'ai opté pour l'une des méthodes, c'est la méthode utilisant l'attribut ismap, car, à mon avis, cette méthode de détermination des coordonnées est la plus simple et la moins compliquée, c'est-à-dire qu'elle nous convient.

En conséquence, dans la dernière vidéo, nous avons créé un lien d'image. Et puis à partir de l'image, ils ont créé une carte du serveur de l'image, ce qui nous aidera à déterminer les coordonnées des points chauds.

Il est maintenant temps de commencer à créer l'image cliquable en HTML. Dans cette vidéo, nous couvrirons pas mal d'informations, en commençant par la théorie et en passant à la pratique.

Commençons par regarder deux autres balises HTML, ce sont les balises

balise HTML de la carte.

Étiquette

Cette balise a un attribut de nom obligatoire. Dans lequel nous devons spécifier le nom de notre carte d'image. De plus, il convient de noter que cette balise n'est pas un élément de bloc, ce qui signifie qu'elle doit être écrite à l'intérieur d'un élément de bloc, par exemple, une balise de paragraphe ou une balise div universelle.

balise HTML de zone.

Étiquette responsable de la spécification des points chauds à l'intérieur du conteneur

Détermination des coordonnées d'un carré, d'un rectangle, d'un cercle et d'un polygone.

Toujours dans ce didacticiel vidéo, nous analyserons en détail comment déterminer correctement les coordonnées d'une figure particulière. Combien de coordonnées devrait-il y avoir pour une forme particulière. Cela est dû au fait que chaque figure de base a son propre ensemble de coordonnées et l'ordre dans lequel elles sont obtenues.

Tout d'abord, nous examinerons en détail la théorie de la détermination des coordonnées d'un carré, puis d'un cercle et enfin d'un polygone.

Après cela, à l'aide d'un exemple concret, nous déterminerons les coordonnées d'un carré et d'un rectangle. Ensuite, nous déterminons les coordonnées du cercle. Et enfin, nous indiquons les coordonnées du triangle, qui à son tour joue le rôle d'un polygone.

En général, cette vidéo sera un guide très utile pour ceux qui se sont intéressés au sujet de la création de cartes d'images en HTML.

Tutoriel vidéo : Création d'une image cliquable en HTML.

Les références HTML et autres matériaux peuvent et doivent être téléchargés !

Dans le prochain tutoriel vidéo, nous étudierons enfin le sujet de la création d'images cliquables, parlons du dernier attribut de la balise usemap , qui nous aidera à associer une image à une image cliquable. Et regardons quelques autres exemples en direct d'images cliquables dans différentes images.

au document html.

Découvrons maintenant ce qu'est une image cliquable.
À l'aide d'une image cliquable, vous pouvez faire en sorte que lorsque vous cliquez sur différentes zones de la même image, vous arriviez à différentes pages. Une image cliquable est également appelée carte de navigation par certains.
Je comprends que c'est difficile à comprendre avec des mots, donc je suggère de regarder un exemple de la façon dont une image cliquable ressemble en direct.
Faites juste attention : l'image est la même, mais les zones et le chemin de transition sont différents.

N'ayez pas peur, ce n'est pas difficile du tout. Le plus important est de comprendre la théorie et de la consolider avec la pratique.

Eh bien, commençons par la théorie.

Les images cliquables (cartes de navigation) sont spécifiées par la balise .
Étiquette - c'est la boîte à l'intérieur de laquelle sont placées les balises .
Étiquette sert à définir une région géométrique avec un lien attaché à chaque région.

attributs de zone

1. attribut de forme
shape - définit la forme de la région ( rectangle, cercle, polygone).
Rectangle - "rectangle". Exemple : forme=" rect";
cercle - "cercle". Exemple : forme=" cercle";
polygone - "poly". Exemple : forme=" poly"

2. attribut de coordonnées
coords est l'emplacement de la forme géométrique.

Regardons un exemple sur la forme géométrique d'un rectangle.

Vous savez déjà que si vous avez besoin d'une forme rectangulaire, vous devez définir la valeur dans l'attribut shape « rectifier ».

Le point de référence part du coin supérieur gauche de l'image, dont les coordonnées sont (0;0)

Vous devez donc spécifier les coordonnées de l'espace de travail près des coins supérieur gauche et inférieur droit du rectangle.

Par exemple avec le rectangle #1, prenez les coordonnées suivantes :

x1=25, y1=36, x2=114, y2=98

Voici à quoi ressemblera le code :

Tout va bien jusqu'à présent. Mais maintenant, nous devons lier l'image à la carte.
Pour ce faire, trouvez n'importe quel nom pour la carte, par exemple, "karta1" et écrivez-le dans la balise

Relions maintenant la carte à l'image. Pour ce faire, nous utilisons l'attribut usemap.
Exemple d'écriture :
usemap=" #map_name"

Dans notre cas, cela ressemblera à ceci :

Maintenant, rassemblons tout et écrivons plus de coordonnées dans un autre rectangle n° 2 avec de telles données (x1=153, y1=11, x2=219, y2=127).

Regardez maintenant le résultat. Cliquez sur le rectangle #1 et sur le rectangle #2

Vous devez d'abord spécifier le type de zone. Pour ce faire, écrivons la valeur "circle" dans l'attribut shape.

Passons maintenant aux coordonnées.
Pour créer des coordonnées pour une zone circulaire, vous devez écrire des données au centre (xy) et spécifier la longueur du rayon (R).
L'ordre d'écriture des coordonnées pour l'attribut coords serait :

Pour le cercle numéro 1, prenez les coordonnées suivantes :

x=46, y=48 ; et la longueur du rayon - R=35

Maintenant, rassemblons tout et notons plus de coordonnées pour le cercle n ° 2 avec les données suivantes x = 158, y = 75, R = 53.

Regardez maintenant le résultat. Cliquez sur le cercle #1 et sur le cercle #2 :

La zone polygonale est la zone la plus difficile d'une carte de navigation.

Vous devez d'abord spécifier le type de zone. Pour ce faire, définissez l'attribut shape sur la valeur "poly»

Passons maintenant aux coordonnées.

L'ordre d'écriture des coordonnées pour l'attribut coords serait :

Explication:
x1, y1 - coordonnées du premier coin ;
x2, y2 - coordonnées du deuxième coin ;
xN,yN - coordonnées du dernier coin

Autrement dit, pour le polygone numéro 2, cela ressemble à ceci :

Donnez maintenant un nom à la carte et liez la carte à l'image :

Maintenant, rassemblons tout et écrivons plus de coordonnées dans l'hexagone #1 avec les données suivantes : x1=54, y1=20, x2=109, y2=20, x3=147, y3=58, x4=109, y4=96, x5=54, y5=96, x6=16, y6=58.

Regardez maintenant le résultat. Cliquez sur le polygone #1 et sur le polygone #2 :

Possibilité de combinaison

Il y a des cas où vous devez utiliser différentes zones sur la même image en même temps, par exemple, un cercle et un rectangle :

Ajout à l'aide de TITLE

Pour chaque zone, des conseils peuvent être écrits en utilisant l'attribut title.

Regardez maintenant le résultat. Passez votre souris sur le cercle puis sur le rectangle :

C'est tout. Avec la carte d'image en HTML (carte de navigation), nous l'avons compris.

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

Ces images cliquables peuvent être côté client et côté serveur. Les liens des cartes clientes sont stockés dans le document lui-même, et sur un clic de souris, le navigateur lui-même détermine à 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, où elles sont traitées par un programme spécial, et seulement après que le lien est suivi.Évidemment, les cartes de navigation du client sont préférables. Nous les considérerons.

Par exemple, imaginons que nous sommes un magasin d'électroménager et que dans l'en-tête de notre site nous avons l'image suivante :

Faisons-en une carte de navigation, c'est-à-dire Cliquer sur un réfrigérateur vous amènera à une page dédiée aux réfrigérateurs (avec modèles, descriptions et prix), cliquer sur un aspirateur et une machine à laver vous amènera à leurs pages respectives.

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-lien et est utilisé plus tard pour établir un lien vers cette carte.

• formes- définit la forme de la zone, peut prendre les valeurs suivantes :
  • rectifier- surface en forme de rectangle,
  • cercle- zone en forme de cercle,
  • poly- surface sous forme de polygone,
  • défaut- toute la zone.
• 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 définies,
  • pour cercle fixer les coordonnées du centre du cercle et le rayon,
  • pour poly définir les coordonnées des sommets du polygone dans l'ordre souhaité.
• href- définit l'adresse du lien.
• cible- utilisé lors de l'utilisation de cadres et spécifie le cadre dans lequel charger la page.
• autre- définit le 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 tracer les zones et crée automatiquement des descriptions de ces zones. La prise en compte du travail de ces programmes n'est pas incluse dans le cours HTML, nous allons donc définir ici les coordonnées "à l'œil". Regardez à nouveau notre image :

Notre image mesure 738 pixels de large et 192 pixels de haut. Traçons des lignes le long des frontières de nos régions et déterminons grossièrement les coordonnées. Nous sommes maintenant prêts à ajouter ces options à nos balises. .

Maintenant, 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 de réfrigérateur sur ce site, donc les liens mènent à la même page, mais si vous créez les bonnes pages, cliquer sur la zone vous permettra de naviguer.

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

Enfin, il faut dire qu'il y a deux autres éléments merveilleux dans HTML - les balises