Comment utiliser le hotspot d'image de zone HTML

Cette fois, je vais vous montrer comment utiliser le hotspot de la zone htmlimage, et quelles sont les précautions pour utiliser le hotspot d'image de la zone html Ce qui suit est un cas pratique, prenons. un regard. La balise

est principalement utilisée pour l'image map. Cette balise peut être utilisée pour définir la zone d'effet (également appelée point chaud) dans la carte d'image, de sorte que. lorsque l'utilisateur déplace la souris vers la zone d'action spécifiée. Lorsque la zone d'action est cliquée, elle sera automatiquement liée à la page prédéfinie. Sa structure syntaxique de base est la suivante :

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

class et id : spécifiez respectivement le type et le numéro d'identification du hotspot.

alt : Texte alternatif utilisé pour définir les hotspots.

href : utilisé pour définir l'adresse url liée au hotspot.

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

Remarque : x1, y1, x2, y2 Les positions de ces points sont déterminées en fonction de l'image et non de la taille de la fenêtre.

La marque divise la zone d'action dans la carte-image, donc la zone d'action qu'elle divise doit être dans la zone de la carte-image, donc avant d'utiliser la marque < Area> pour diviser la zone, HTML doit être utilisé. Une autre balise .

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

Voici une photo d'une nouvelle étagère. L'effet est le suivant : lorsque la souris clique sur le livre "Annuaire du site Web". Lorsque la souris clique sur le livre "Website Design Guide", une nouvelle fenêtre s'ouvrira pour afficher l'Introduction et la page de commande (urlall.htm) de ce livre. .htm); lorsque la souris clique sur le livre "Web Page Skills Encyclopedia", une nouvelle fenêtre s'ouvrira pour afficher l'introduction du livre et la page Web de la commande (pagejqlall.htm). Méthode de production :

1. 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 newbook) >Citation;
2. Utilisez la balise

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

Quelques points auxquels il convient de prêter attention lors de la création des effets introduits dans cet article. :

1. N'oubliez pas de définir les paramètres usemap et ismap dans la balise , et la valeur du paramètre usemap doit être la même que la valeur du paramètre name dans la balise

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

Lecture connexe :

Comment faire apparaître une boîte de dialogue temporaire QQ sur une page Web

Comment utiliser le déclencheur méthode pour y parvenir Cliquez sur l'entrée du type de fichier pour faire apparaître la boîte de dialogue de sélection de fichier

Comment utiliser js en HTML pour obtenir l'heure du système local

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!