HTML imagemap allows multiple links to be embedded in one image by specifying areas and coordinates. Three shapes (rect, circle, polygon) can be used. Each imagemap must have a name and link.
When a link is added to an image in Hypertext Markup Language (HTML), that link is added to the entire image. This can be a problem if the programmer wants to create a single image with multiple areas or buttons and each area is used for a different link. An HTML imagemap allows the programmer to specify certain areas where the link will go, allowing him to embed several links in one image. This is done by specifying a shape for the link and telling the HTML what coordinates to use for the link.
Images used for the Internet are measured in pixels. Knowing how many pixels there are in an image is the essential first step in creating an image map. For example, a rectangular image with a height of 400 pixels and a width of 250 pixels is used. Next, the programmer needs to know how to accurately measure the shape in coordinates for the HTML imagemap to work properly.
The top left corner is called 0,0 when using an HTML imagemap. The bottom right corner in this case would be 250,400. Measurements are taken with the width first and then the height. An easy way to think of it is that the first measurement is how to tell the HTML how far right to go from the left edge and the second is how to tell how many pixels down to go. If the programmer wants a point on the map to be 10 pixels from the left edge and 50 pixels down, the coordinates would be 10.50.
There are three different shapes that the programmer can invoke for an HTML image map: rect, circle and polygon. “Rect” stands for rectangle and the programmer must first type in the coordinates for the top left corner and then the bottom right corner. A circle is specified by typing the coordinates where the circle starts and then the radius of the circle. A polygon is created by typing in all five coordinates, from top right.
HTML imagemap encoding works like this:
Each HTML imagemap must have a name, and the “url.html” section is the link where that section of the imagemap will take a user to when they click on it. When the image is inserted into the website with HTML, the programmer must write: usemap=”test”. This will tell the image which HTML imagemap to use.
Protect your devices with Threat Protection by NordVPN
