HTML Image Map

Google+ Pinterest LinkedIn Tumblr +

Introduction
An image map is an image with clickable areas. These areas are not only clickable, they can be turn into hyperlinks, and they can receive focus. When you design an image map, you give the function you want for a particular area. There is what is called the client side image map and the server side image map. In this article I talk about the client side image map.

An area can be a rectangle, circle or polygon. You the web side designer decides where and how large the area will be on the image.

You need basic knowledge in HTML or XHTML, JavaScript and CSS to understand this article.

Note: If you cannot see the code or if you think anything is missing (broken link, image absent), just contact me at forchatrans@yahoo.com. That is, contact me for the slightest problem you have about what you are reading.

HTML Elements involved
You need three HTML elements for an image map. You need the normal HTML Image element, for the image. You need what is called the HTML MAP element and the HTML AREA element. An HTML AREA element corresponds to a clickable area on the image. So there can be more than one AREA element for an image. The Area elements form the content for the Image Map element. So if you have one image with three clickable areas, you would have something like this:

myimg.jpg

There are three types of HTML elements involved. You have the normal image element, and a MAP element. Inside the map element, you have the AREA elements.

The Image Element
The image tag is a single tag element. In the one above, you should be familiar with all the attributes except, usemap. The value of this attribute is what connects the image element to the map element. The map element is what gives you the map (unseen demarcations) on the image. The value of the usemap begins with a hash followed by text. This text has to be the value of the name attribute of the map element. The map element must have a name attribute. In the above code, the value of the name attribute of the map element is “myImgMap”; this is the text of the value of the usemap attribute of the image element. The usemap occurs only in the image element and not in the MAP or AREA element.

The width and height attributes you see are the width and height of the image in pixels.

The MAP element
The MAP element is a double tag element; that is, it has a start tag and an end tag. It has just one attribute, the name attribute. This is the name of the tag, in the same way that other tags have names. The value of this name attribute is the text that follows the hash character of the corresponding image tag. It is a good habit to write your MAP element just below the image element, in your code.

The AREA Elements
An area element determines the shape and position of a clickable area on the image. You can have as many areas as you want on the image. Each of these areas must have an area element in the map element. The shape of any area is either a rectangle, or a circle or a polygon. There are three area elements above. The last one is a triangle (polygon – see below).

Area elements are single tag elements. Each of these elements has an attribute called the shape attribute. If you want a rectangle then you put “rect” as value to this attribute. If you want a circle, then you put “circle” as value to this attribute. If you want a polygon, then you put “poly” as value to this attribute.

An area element can be made a hyperlink or made to respond to mouse clicks. The corresponding area on the image has a lot of element attributes (characteristics); it can receive and lose focus, for example.

Coordinates of the AREA Elements
You need figures (in pixels) to determine the position and size of a clickable area on the image. These figures are typed (without the pixel unit) as value to the coords attribute of the AREA tag. Each area element has the attribute, called coords. The figures that form the value of these attributes are called coordinates. The arrangement of the figures in the value depends on the shape of the area.

The position of an area is measured from the top-left corner of the image. From this point, as you move to the right, we say you are increasing the value of the x coordinate; as you move downward we say you are increasing the value of the y coordinate. The top-left corner of the image is said to have the coordinates, (0,0). Other points in the figure can have coordinates such as (2,4), (4,1) and (8,3). All these figures are in pixels. There are two figures within each set of parentheses. Each set identifies a point on the image. The first value in each set is called the x-value. The second value is called the y-value. These x and y values correspond to the x and y displacements (distances) of a point from the top-left corner of the image

Coordinates of a Rectangular Area
You need two pairs of coordinates to define the position and size of a rectangular area. You need the coordinates of the top-left corner of the rectangle and the coordinates of the bottom-right corner of the rectangle. With these two pairs of coordinates, you determine the position and size of the rectangle. The more the pairs of coordinates are distant the bigger the rectangle. In the value of the coords property, you start with the pair of the top-left corner of the desired rectangle; this is followed by the pair of the bottom-right corner of the desired rectangle. This gives four coordinates altogether.

You put these four coordinates without their parentheses as value to the coords attribute, separating them with commas. In the rectangle of the above code, the coordinates of the top-left corner of the desired rectangle are (10,10); the coordinates of the bottom-right corner are (60,40).

Coordinates of a Circular Area
With the circle, you need a pair of coordinates that determine the center point of the circle. Then you need the length of the radius of the circle in pixels. This gives you three figures for the value of the coords attribute of the area element for the circle. In the above code, the coordinates of the center of the circle is (150,100). The radius of the circle is 30. These three values are in pixels. The unit of pixel (px) is not written. For the three figures, the coordinates of the center are written first; the radius is written next.

Coordinates of a Polygon Area
The polygon can be regular or irregular. What matters are the coordinates. Each vertex of the polygon has a pair of (x,y) coordinates just as the top-left and bottom-right corners of a desired rectangle has (x,y) coordinates. In the value of the coords attribute of the polygon you start with the pair of coordinates of one point. You move round the polygon typing the coordinates of the vertices without skipping any. When you are through, make sure the first coordinate pair that you typed is typed again at the end of the list of coordinate pairs.

In the code above we have a triangle. The first coordinate pair is (270,170); the second is (300,200); and the third is (240,200). The first one is repeated as (270,170) at the end of the list. All the figures in the value of the coords attribute are separated by commas.

Making an Area a Hyperlink
To make an Area element a hyperlink, just give it the href attribute and the corresponding value, like in the code above.

Making an Area respond to a Mouse Event
To make an Area respond to a mouse event, just give it an event attribute and value as for the third area element in the above code.

You can try the above code. Just use any .jpg image and give it the name, myimg.jpg. As you move your mouse pointer to any area that is a link, the mouse pointer would become a hand. If you move your mouse pointer over the area that is the triangle, an alert box will display, “Seen”.

Conclusion
An image map is an image with clickable areas. You need three types of elements for an image map: the image element itself, which must have a usemap attribute, the MAP element and one or more AREA elements. The AREA element goes into the MAP element. There can be many Area elements in the Map element. The Map element must have a name attribute. Its value is the text part of the value of the usemap attribute of the image element. You determine the behavior of an AREA element by giving it the relevant attribute (e.g.href) and value.

The Area element has many of the attributes that other HTML elements have. In an image map, the area element has the greatest number of “responsibilities”.

Chrys

Share.

About Author

Leave A Reply