How to use html area image hotspot

This time I will bring you html areapictureHow to use hotspots, what are the precautionsfor using html area picture hotspots, the following is a practical case, let's take a look.

03fc64e1e502d5ba947b3a9af06d2d2aThe mark is mainly used for imagesmap. Through this mark, the area of ​​effect (also called hotspot) can be set in the image map, so that when the user moves the mouse to the specified When the action area is clicked, it will automatically link to the preset page. Its basic syntax structure is as follows:

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

class and id: specify the type and id number of the hotspot respectively.

alt: Alternative text used to set hotspots.

href: used to set the url address linked to the hotspot.

shape and coords: are the two main parameters used to set the shape and size of the hotspot. Its basic usage is as follows:

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

Note: The positions of x1, y1, x2, y2 are determined based on the picture, not the size of the window.

03fc64e1e502d5ba947b3a9af06d2d2a mark is used to divide the action area in the image map, so the divided action area must be within the area of ​​the image map, so before using the 03fc64e1e502d5ba947b3a9af06d2d2a mark to divide the area, HTML must be used Another tag dab9f699790ab0922e596ecb9f6677d5 is used to set the scope of the image map and set a name for the specified image map. The usage of this tag is very simple, namely 26393ed51c8fd1ed33c701c04870eefb .... .. 205a5be6c2444442266d3019416bb37a.

The following is an example to illustrate the usage of these two tags:

Here is a picture of a new bookshelf. The effect is: when the mouse clicks on the book "Website Directory" When the mouse clicks on the book "Website Design Guide", a new window will be opened to display the introduction to the book and the order page (urlall.htm). The book's introduction and order webpage (siteall.htm); when the mouse clicks on the book "Web Page Skills Encyclopedia", a new window will be opened to display the book's introduction and order's webpage (pagejqlall.htm). Production method: 1. Insert the image, set the relevant parameters of the image, and set the parameter usemap="newbook" ismap in the a1f02c36ba31691bcfe87b2722de723b tag to indicate the ## of the image map (newbook). #Quote
;
2. Use the dab9f699790ab0922e596ecb9f6677d5 mark to set the area of ​​effect of the image map, and name it: newbook;
3. Use the 03fc64e1e502d5ba947b3a9af06d2d2a mark respectively Divide three rectangular action areas according to the positions of the three books, and set their link parameter href.

The production is completed. The source code of this example is as follows:

<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>

Some points that should be paid attention to when creating the effects introduced in this article:

1. In b58615d17cdad80908c952c279ba30e5 tag, and the parameter value of usemap must be the same as the name parameter value in the dab9f699790ab0922e596ecb9f6677d5 tag, that is to say, the "image map name" must be consistent;

2. All hotspot areas in the same "image map" must be within the scope of the image map, that is, all 03fc64e1e502d5ba947b3a9af06d2d2a markers must be between dab9f699790ab0922e596ecb9f6677d5 and 205a5be6c2444442266d3019416bb37a;

3. The coordinate format set by the cords parameter in the 03fc64e1e502d5ba947b3a9af06d2d2a tag must match the shape of the action area set by the shape parameter to avoid appearing in the rectangular action area set by the shape parameter, while the coordinates of the vertices of the polygonal area are set in cords. phenomenon occurs.

Differences between HTML and XHTML

In HTML, the 03fc64e1e502d5ba947b3a9af06d2d2a element does not require a closing tag.

But in XHTML, the 03fc64e1e502d5ba947b3a9af06d2d2a element must be closed correctly.

I believe you have mastered the methods after reading these cases. For more exciting information, please pay attention to other related articles on the php Chinese website!

Related reading:

How to pop up a QQ temporary dialog box on a web page

How to use the trigger method to achieve this Click the file type input to pop up the file selection dialog box

How to use js to get the local system time in html

The above is the detailed content of How to use html area image hotspot. For more information, please follow other related articles on the PHP Chinese website!