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.

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>

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.

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

<img src="/static/imghwm/default1.png"  data-src="http://www.webjx.com/images/logo.gif"  class="lazy"      style="max-width:90%"  style="max-width:90%" 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 tag, and the parameter value of usemap must be the same as the name parameter value in the

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!