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

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 pour diviser la zone, vous devez utiliser une autre balise HTML

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） ......。

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 Avant de marquer la zone divisée, vous devez utiliser une autre balise HTML

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 pour représenter la référence à la carte d'image ( newbook)

Utilisez la marque

Utilisez la marque 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 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 doivent être comprises entre ; Le format de coordonnées défini par le paramètre cords dans la balise 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 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!