In-depth understanding of HTML images and Images

In-depth understanding of HTML images and Images
Directory [1] [2] <map> [3] <area> -> image

Required attribute]

[1] src: Address

[2] alt: replacing text with images for exploration engine capturing

[Optional attribute]

[1] height: Image height

[2] width: Image width

[3] ismap: defines an image as a server-side image ing.

[4] longdesc: similar to the alt attribute, longdesc provides a long text description with more than 1024 characters.

[5] usemap: defines the client-side image ing for the image. usemap = "# <map> the name or id attribute of the element"

 

<Map> map

[Note] the usemap attribute in can reference the id or name attribute in <map> (depending on the browser). Therefore, you should add the id and name attributes to <map> at the same time.

 

<Area> image hot zone

<Area> always nested in <map> labels

Required attribute]

[1] alt: Replace text

[Optional attribute]

[1] coords: defines coordinates of clickable Areas

[2] href: define the target URL for this region

[3] nohref: exclude a region

[4] shape: defines the shape of an area.

[A] circle (circ/circle) coords = "x, y, r" x, y is the center coordinate, and r is the radius

[B] polygon (poly/polygon) coords = "x1, y1, x2, y2, x3, y3 ...... "X and y are coordinates of each vertex of a polygon.

[C] rectangle (rect/rectangle) coords = "x1, y1, x2, y2" x1, y1 is the coordinate of the upper left corner; x2, y2 is the coordinate of the lower right corner

[D] default in all regions (default)

[Note] <area> labels are in the "first come first served" order. If there are overlapping areas, refer to the <area> that appears first.

 <map name = "map" id =" map "> <area shape =" rect "coords =" 35, 38, 150,158 "href =" line4.html "alt =" Quadrilateral "> <area shape =" poly "coords =" 175,109,193, 44,268, 41,296,109,233,151 "href =" line6.html "alt =" hexagonal "> <area shape =" poly "coords =, 433,108,418,132,389,153,357,154,333,137,315,108 "href =" line12.html "alt =" 12 edges "> <area shape =" circle "coords =" 512,95, 60 "href =" line0.html "alt =" Circular "> </map>