CSS image hotspot link settings

First, the principle of hot

The image is mapped to the image by usemap= the #Map property with the hotspot area named "Map" and the connection.

In general, the UserMap property of a picture corresponds to the attribute value of the name of the map hotspot. So if there are multiple images in the page to add hotspots, then the usemap value of each image must be the same as the name value of the corresponding hotspot map, and the different hot zone name values cannot be the same, if the same, then the hot area on the image will be the first hotspot region of the same name.

Two, to set the image of the hotspot link to use three kinds of tags:<map><area>

1. Shape: Define Hot spot shape

Shape=rect: Rectangle
Shape=circle: Round
Shape=poly: Polygon

2, Coords: Define the coordinates of the area point

A. Rectangle: must use four digits, the first two digits are the upper left corner coordinates, the last two digits is the lower right corner coordinates
Example: <area shape=rect coords=100,50,200,75 href= "URL" >

B. Circle: Must use three digits, the first two digits are the coordinates of the center, the last digit is the radius length
Example: <area shape=circle coords=85,155,30 href= "URL" >

C. Arbitrary graphics (polygons): Fill in the shape each inflection point coordinate
Example: <area shape=poly coords=232,70,285,70,300,90,250,90,200,78 href= "URL" >

Third, examples

<imgsrc=".. /menu. GIF "width= "204"Height= "510"Border= "0"Usemap= "#Map" /><Mapname= "Map"ID= "Map">    < AreaShape= "Rect"coords= "12,37,181,88"href= "URL1"onfocus= "This.blur ()"/>    < AreaShape= "Rect"coords= "12,97,182,143"href= "URL2" />    < AreaShape= "Rect"coords= "18,155,179,200"href= "URL3" />    < AreaShape= "Rect"coords= "18,211,182,260"href= "URL4" /></Map>/* Where onfocus= "this.blur ()" means to remove the dashed box */

CSS image hotspot link settings