How to use html area image hotspot-HTML Tutorial-php.cn

Home

Web Front-end

HTML Tutorial

How to use html area image hotspot

php中世界最好的语言

Feb 11, 2018 am 10:47 AM

html how

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.

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

Copy after login

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

Copy after login

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

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 mark to divide the area, HTML must be used Another tag 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 .... .. .

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 tag to indicate the ## of the image map (newbook). #Quote
;
2. Use the mark to set the area of effect of the image map, and name it: newbook;
3. Use the 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>

Copy after login

Some points that should be paid attention to when creating the effects introduced in this article:
1. In < Don't forget to set the usemap and ismap parameters in the img> tag, and the parameter value of usemap must be the same as the name parameter value in the 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 markers must be between and ;

3. The coordinate format set by the cords parameter in the 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 element does not require a closing tag.

But in XHTML, the 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!