Lesson01_08 Image Map_Basic Tutorial

1. Image hyperlink:
The format is:

2. What is an image map?
Divide a picture into multiple areas, each area points to a different URL address

3. How to generate an image map
(1) First define the shape, position coordinates, and url address information of each hotspot area of ​​the image. This process is called image hotspot mapping.
This process is explained using the tag, where the name attribute specifies a name for this hotspot mapping.
(2) Each area in the mapping in the image hotspot is described with the tag. The format of the tag is:
The HREF part can also use nohref means that clicking in this area is invalid. (3) After defining it, you need to add an attribute setting named usemap to the image tag, as follows:

Example: The code is as follows :

<map name=mymap>
<area shape="rect" coords="0,0,50,50" href="http://www.loncer.cn">
<area shape="rect" coords="0,50,150,50" href="http://www.thinkme.cn">
<area shape="rect" coords="50,0,100,50" href="http://www.sina.cn">
</map>
<img src="/upload/200729134227624.gif" usemap="#mymap">

The effect is as follows:

Instructions for setting the shape attribute:

rect defines a rectangular area, and the coords attribute is set to the coordinates of the upper left corner and lower right corner of the rectangle. Each coordinate value is separated by a, sign;

poly defines a polygonal area, and the coords attribute setting value is the coordinate value of each vertex of the polygon;

cicle defines a circular area, and the coords attribute setting values ​​are circular coordinates and radius. The first two are coordinates, and the latter one is the radius.

Example: The code is as follows: The effect is as follows: Example: The code is as follows: The effect is as follows: Example: The code is as follows: The effect is as follows: Example: The code is as follows: The effect is as follows: Example: The code is as follows: The effect is as follows: Example: The code is as follows: : The effect is as follows: Example: The code is as follows: The effect is as follows: