Maison > Article > interface Web > Comment utiliser la balise de carte et la balise de zone

Comment utiliser la balise de carte et la balise de zone

php中世界最好的语言original: 2018-03-19 09:20:112915parcourir

Cette fois, je vais vous montrer comment utiliser les balises de carte et les balises de zone. Quelles sont les précautions concernant les balises de carte et les balises de zone. Voici un cas pratique, jetons un coup d'oeil.

Objectif de la balise map : est lié à la balise img et est souvent utilisé pour donner une signification particulière à une certaine zone du client image , cliquez sur cette zone pour accéder à un nouveau document.

Étant donné que la balise map est liée à la balise img, nous devons ajouter les attributs ID et name à la balise map, afin que l'attribut usemap dans le img tag Citez l'attribut id ou name dans la balise map (en raison des différents navigateurs, l'attribut usemap reçoit la valeur de l'un des deux, donc généralement les attributs name et id sont écrits avec la même valeur ), et faites correspondre la balise de zone à utiliser.

L'exemple de code est le suivant :

<!doctype html>
<html>
    <head></head>
    <body>
        <img src="http://s2.sinaimg.cn/middle/69906822ga1e24ba6e971&690" width="444" height="395" alt="中国地图" usemap="#province"/>
	<map name="province" id="province">
	    <area shape="rect" coords="80,112,110,125"  alt="新疆" href="https://baike.baidu.com/item/%E6%96%B0%E7%96%86/132263?fr=aladdin">
	    <area shape="rect" coords="77,209,110,229"  alt="西藏" href="https://baike.baidu.com/item/%E8%A5%BF%E8%97%8F/130045">
	    <area shape="rect" coords="150,176,185,192"  alt="青海" href="https://baike.baidu.com/item/%E9%9D%92%E6%B5%B7/31638">
	    <area shape="rect" coords="197,236,235,261"  alt="四川" href="https://baike.baidu.com/item/%E5%9B%9B%E5%B7%9D/212569">
	    <area shape="rect" coords="170,300,211,325"  alt="云南" href="https://baike.baidu.com/item/%E4%BA%91%E5%8D%97/206207">
	    <area shape="circle" coords="227,200,8"  alt="甘肃" href="https://baike.baidu.com/item/%E7%94%98%E8%82%83">
	    <area shape="circle" coords="240,177,5"  alt="宁夏" href="https://baike.baidu.com/item/%E7%94%98%E8%82%83">
	    <area shape="circle" coords="285,133,8"  alt="内蒙古" href="https://baike.baidu.com/item/%E7%94%98%E8%82%83">
	</map>
    </body>
</html>

L'effet d'affichage est le suivant :

On peut voir qu'il s'agit d'une carte. S'il ne s'agit que d'une image, elle aura l'air très monotone, nous utilisons donc la balise map pour donner un sens aux régions de chaque province. Ici, je clique sur la région du Xinjiang et je saute. Accédez à l'encyclopédie Baidu du Xinjiang, comme indiqué ci-dessous :

De cette façon, nous pouvons directement comprendre l'histoire et la culture de chaque province, et il n'est pas nécessaire de chercher une par une, ce qui la rend plus humaine.

La balise Area définit la zone de l'image qui reçoit une signification particulière. Ses principales valeurssont alt, cooreds, href, shape, target, etc.

1. Attribut alt

Définition : Spécifie le texte alternatif de la zone.

Remarque : Si vous écrivez l'attribut href, l'attribut alt est requis

2. attribut cooreds

Définition : Définir les coordonnées de la zone concernée

Description : Utilisée en conjonction avec l'attribut de forme

　(1 ) Lorsque l'attribut de forme est rect, cela signifie que la zone concernée est un rectangle, alors la valeur de l'attribut de coordonnées est (x1, y1, x2, y2), où x1, y1 sont les coordonnées du coin supérieur gauche , et x2, y2 sont les coordonnées du coin inférieur droit ;

(2) Lorsque l'attribut de forme est un cercle, cela signifie que la zone pertinente est un cercle, alors l'attribut de coordonnées la valeur est (x, y, rayon), où x, y sont les coordonnées centrales du cercle, le rayon est le rayon du cercle

(3) Lorsque l'attribut de forme est poly, cela signifie que la zone concernée est un polygone et que la valeur de l'attribut cooreds est (x1,y1,x2,y2, x3,y3......xn,yn), spécifie les coordonnées de chaque sommet du polygone Puisque le navigateur fermera automatiquement le polygone, les coordonnées de la queue ne doivent pas nécessairement être égales à la première coordonnée.

3. Attribut href

Définition : Définit la cible connectée à la zone concernée

Remarque : L'attribut href a généralement trois valeurs

(1) Chemin absolu : généralement utilisé pour pointer vers d'autres sites Web tels que (href="https://www .baidu.com" )

(2) Chemin relatif : généralement utilisé pour pointer vers un fichier au sein de votre propre site Web tel que (href="//favicon.ico")

(3) Lien d'ancrage : généralement utilisé pour pointer vers l'ancre dans la page telle que (href="#header")

4. attribut de forme

Définition : Définit la forme de la zone concernée

Description : (1) Valeur par défaut (par défaut) : Spécifie tous les domaines

(2) rect : La zone pertinente est spécifiée sous forme de rectangle

(3) cercle : La zone pertinente est spécifiée sous forme de cercle

(4) poly : stipuler que la première zone proche est un polygone

5. Attribut cible

définition : défini Où ouvrir le lien cible

Description : (1) _blank : Ouvrir le document lié dans une nouvelle fenêtre

(2) _self : Par défaut, le document lié est ouvert dans le même cadre

(3)_parent : Le document lié est ouvert dans l'ensemble de cadres parent

( 4)_top : Ouvrir le document lié dans toute la fenêtre

(5) framename : Ouvrir le document lié dans le cadre spécifié

Description : La balise area peut parfois être utilisée en remplacement de la balise a, car la balise a ne peut pas imbriquer directement la balise a. Dans certains cas, nous devons l'utiliser, nous pouvons alors la remplacer. la balise a avec la balise de zone pour rendre la mise en page plus belle.

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture recommandée :

Quelles sont les étapes permettant à Jest de tester les composants natifs de réactionComment utiliser la fonction de découpage personnalisée de js

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Une discussion détaillée de l'initialisation du style CSSArticle suivant：Une discussion détaillée de l'initialisation du style CSS

Articles Liés

Voir plus