Maison  >  Article  >  interface Web  >  Explication détaillée sur l'utilisation de la balise en HTML

Explication détaillée sur l'utilisation de la balise en HTML

黄舟
黄舟original
2017-06-19 15:26:062907parcourir

1, balise de zone : elle divise la zone active dans l'image carte Cette balise peut être utilisée pour définir la zone active (également appelée point chaud) dans la carte d'image, de sorte que lorsque l'utilisateur se déplace. la souris Lorsque vous cliquez sur la zone d'action spécifiée, elle sera automatiquement liée à la page prédéfinie pour le positionnement.
2, balise zone> : la zone qu'elle divise doit être dans la zone de la carte image, donc avant d'utiliser la balise 03fc64e1e502d5ba947b3a9af06d2d2a pour diviser la zone, vous devez utiliser une autre balise HTML dab9f699790ab0922e596ecb9f6677d5 définir la zone d'effet de la zone cliquable et définir un nom pour la zone cliquable spécifiée.

La structure syntaxique de base est la suivante :

<area    
class=type    
id=Value     
href=url     
alt=text     
shape=area-shape     
coods=value>

forme et coordonnées : sont les deux principaux paramètres utilisés pour définir la forme et la taille du hotspot. Son utilisation de base est la suivante :

<area shape="rect" coords="x1, y1,x2,y2" href=url>表示设定热点的形状为矩形,左上角顶点坐标为(X1,y1),右下角顶点坐标为(X2,y2)。
<area shape="circle" coords="x1, y1,r" href=url>表示设定热点的形状为圆形,圆心坐标为(X1,y1),半径为r。
<area shape="poligon" coords="x1, y1,x2,y2 ......" href=url>表示设定热点的形状为多边形,各顶点坐标依次为(X1,y1)、(X2,y2)、(x3,y3) ......。

03fc64e1e502d5ba947b3a9af06d2d2a La marque divise la zone d'action dans la carte-image, donc la zone d'action divisée doit être dans la zone de la carte-image, donc quand using 03fc64e1e502d5ba947b3a9af06d2d2a Avant de marquer la zone divisée, vous devez utiliser une autre balise HTML dab9f699790ab0922e596ecb9f6677d5 pour définir la portée de la zone cliquable et définir un nom pour la zone cliquable spécifiée. L'utilisation de cette balise est très simple. , 2ff04bb4ac696a59af8801f084cf44f2 ... 205a5be6c2444442266d3019416bb37a.

Ce qui suit est un exemple pour illustrer l'utilisation de ces deux balises :

Voici une image d'une nouvelle étagère. L'effet est : lorsque la souris clique ". En cliquant sur le livre "Website Design Guide", une nouvelle fenêtre s'ouvrira pour afficher l'Introduction et la page web de commande (urlall.htm) de ce livre lorsque la souris clique sur le livre "Website ; Design Guide", une nouvelle fenêtre s'ouvrira. Ouvrir une fenêtre pour afficher l'introduction de ce livre et la page web de commande (siteall.htm) ; lorsque la souris clique sur le livre "Web Page Skills Encyclopedia", une nouvelle fenêtre sera ouvert pour afficher l'introduction de ce livre et la page Web pour les commandes (pagejqlall.htm). Méthode de production :

Insérez l'image, définissez les paramètres pertinents de l'image et définissez le paramètre usemap="newbook" ismap dans la balise a1f02c36ba31691bcfe87b2722de723b pour représenter la référence à la carte d'image ( newbook)

Utilisez la marque dab9f699790ab0922e596ecb9f6677d5 pour définir la zone d'effet de la carte image et nommez-la :

Utilisez la marque 03fc64e1e502d5ba947b3a9af06d2d2a pour cibler respectivement les emplacements des trois livres. Divisez trois zones d'action rectangulaires et définissez leur paramètre de lien href.

1    <img src="image/htmlp3.gif" width="207" height="148" alt="新书架" hspace="10" align="left" usemap="#newbook" border="0">     
2    <map name="newbook">     
3    <area shape="rect" coords="56,69,78,139" href="urlall.htm" target="_blank" alt="这里收集十万多个网址。" title="这里收集十万多个网址。">     
4    <area shape="rect" coords="82,70,103,136" href="siteall.htm" target="_blank" alt="网站设计师的启蒙读本。" title="网站设计师的启蒙读本。">     
5    <area shape="rect" coords="106,68,128,136" href="pageall.htm" target="_blank" alt="网页制作者不可不读的书。" title="网页制作者不可不读的书。">     
6    </map>

Quelques points auxquels vous devez prêter attention lors de la création des effets présentés dans cet article :

N'oubliez pas de définir les paramètres usemap et ismap dans le fichier a1f02c36ba31691bcfe87b2722de723b tag, et la valeur du paramètre de usemap doit être la même que < ;map>La valeur du paramètre name dans la balise est la même, c'est-à-dire que le "nom de la carte d'image" doit être cohérent ;

Tous Les zones de points chauds dans la même "carte d'image" doivent être dans la portée de la carte d'image, c'est-à-dire que toutes les balises 03fc64e1e502d5ba947b3a9af06d2d2a doivent être comprises entre dab9f699790ab0922e596ecb9f6677d5 et 205a5be6c2444442266d3019416bb37a; Le format de coordonnées défini par le paramètre cords dans la balise 03fc64e1e502d5ba947b3a9af06d2d2a doit être le même que le paramètre de forme. La forme de la zone est adaptée pour éviter le phénomène selon lequel la zone d'effet rectangulaire est définie dans le paramètre de forme, mais le format de coordonnées défini par le paramètre cords dans la balise 03fc64e1e502d5ba947b3a9af06d2d2a les coordonnées des sommets de la zone du polygone sont définies dans les cordes.

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:Explication détaillée de l'utilisation de la balise en HTML dans les pages WebArticle suivant:Explication détaillée de l'utilisation de la balise en HTML dans les pages Web