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

03fc64e1e502d5ba947b3a9af06d2d2a 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 03fc64e1e502d5ba947b3a9af06d2d2a 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 2f5e23b19a1cda7102ef5261ea362d0c pour diviser la zone, HTML doit être utilisé. Une autre balise dab9f699790ab0922e596ecb9f6677d5 est utilisée 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, à savoir 184caa39bf21253a65d4630c5a393910 .... .. 205a5be6c2444442266d3019416bb37a.

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 a1f02c36ba31691bcfe87b2722de723b newbook) >Citation;
2. Utilisez la balise dab9f699790ab0922e596ecb9f6677d5 pour définir la zone d'effet de la carte d'image et nommez-la :

3. Utilisez respectivement la balise 03fc64e1e502d5ba947b3a9af06d2d2a. Divisez trois zones d'action rectangulaires en fonction des positions des trois livres et définissez leur paramètre de lien href.

La production est terminée. Le code source de cet exemple est le suivant :

<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 a1f02c36ba31691bcfe87b2722de723b, et la valeur du paramètre usemap doit être la même que la valeur du paramètre name dans la balise dab9f699790ab0922e596ecb9f6677d5 , c'est-à-dire que le « nom de la carte-image » doit être cohérent

2. Toutes les zones de points chauds dans la même « carte-image » doivent être dans la portée de la carte-image, c'est-à-dire toutes 2f5e23b19a1cda7102ef5261ea362d0c doit être compris entre dab9f699790ab0922e596ecb9f6677d5 et 205a5be6c2444442266d3019416bb37a

3. Le format de coordonnées défini par le paramètre cords dans la balise 03fc64e1e502d5ba947b3a9af06d2d2a le paramètre de forme pour éviter d'apparaître dans la zone d'action rectangulaire définie par le paramètre de forme, tandis que la zone polygonale définie en cordes Le phénomène des coordonnées de sommet apparaît.

Différences entre HTML et XHTML

En HTML, l'élément 03fc64e1e502d5ba947b3a9af06d2d2a

Mais en XHTML, l'élément 03fc64e1e502d5ba947b3a9af06d2d2a doit être fermé correctement.

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!