HTML Image Map

 HTML Image Map is used to divide blocks on the image file and use them as hyperlinks . You can divide only a single block or divide into multiple different blocks. The technique used is to mark the position of the picture. The application is also quite extensive. Some web editing software also includes the function of Image Map, such as Dreamweaver.

HTML Image Map Image Map Example

Suppose we have a picture as follows, the upper left corner is x1, y1, and the lower right corner is marked x2, y2. At this time, we want to add Image Map to the blue framed figure in this picture For an image map, the coordinates of these two corners will be used. Please see the syntax example below.



The code is written as follows

<img src="Image URL" width="300" height="200" usemap="#TestMap">
<map name="TestMap">
　<area shape="rect" coords=" x1, y1, x2, y2 "href="link URL">
</map>

Let’s explain this grammar a little bit. First, the first line <img src="picture URL" width="300" height="200" usemap="#TestMap"> is to call out our picture and set the width to 300. The height is 200, and usemap means that we want to use the Image Map parameters of the TestMap below.

Then look down, the content contained in the <map></map> tag is the Image Map image map parameter we set, <area> refers to the map area, and shape is the style of the set graphic. In this example We set shape="rect", which represents a square shape. You can also set it to other shapes. For example, the round shape is shape="circle", and the irregular shape is written as shape="polygon". For coords, please fill in the coordinates of the four corners, fill in x1, y1, x2, y2 respectively. Please do not make any mistakes in the order. The last href is the URL to be linked.

Is the square shape not enough? Of course not enough! If what we are going to do today is a round button, or a more powerful map of Taiwan for travel information, it may also use round or irregular shapes, so we will provide you with round and irregular shape Image Map images. Map syntax.

Round Image Map Image Map Syntax

<area shape="circle" coords="Center x coordinate, center y coordinate, radius" href="link URL">

Irregular shape (or polygonal) Image Map

<area shape="polygon" coords="The coordinates of the first point, the coordinates of the second point, ...., the coordinates of the Nth point" href="link URL">

Although the writing method of circle and polygon is slightly different, the concept is actually the same. If you master the coordinates or center of various graphics, you can easily make accurate Image Map image maps. If you use something like Dreamweaver or FrontPage It may be easier to make it when the software queries each coordinate of the graph.