Image Map

Image maps are parts of the same image that is 'divided' in several areas, each with its own link.
An image-map is an image with clickable areas. So, you can use a single image for several links inside it.

Creating Image Map

To create an image map, add the usemap attribute inside the <img> tag.

- The value of the 'usermap' represents the name of the map.
Then begins to form the map, using the <map> tag:

- 'map_name' must be the same value added in 'usemap' attribute, it creates a relationship between the image and the map.
The map element contains a number of <area> tags, that defines the clickable areas in the image map:

- The '<area>' tag defines an area inside an image-map. The 'shape' attribute specifies the shape of an area, the 'coords'attribute specifies the coordinates of an area.

In the following example you can see the general form of an image-map with two rectangle areas:

<img src='image.jpg' usemap='#map1'>
<map id='map1'>
 <area shape='rect' coords='9, 120, 56, 149' href='url'>
 <area shape='rect' coords='100, 200, 156, 249' href='url'>
</map>

In the table below are presented the attributes which can be used, and their description:

Element	Attribute	Description
<img attributes >	- Tag used to add an image in an HTML document
	ismap	Specifies an image as a server-side image-map
	usemap='#map_name'	Specifies an image as a client-side image-map
	alt='Title'	Specifies an alternate text for an image
	src='img_address'	the URL of an image
<map attributes > ... </map>	- Defines an image-map
<map attributes > ... </map>	id='map_name'	Specifies the name for an image-map
<area attributes />	- Defines a clickable area inside an image-map
	shape='value'	Specifies the shape of an area. The 'value' can be: rect, circle, poly
	coords='coordinates'	the coordinates of a region (in pixels); are defined according to the top left corner of the image (it has coords (0, 0); x = 0, y = 0); varies depending on SHAPE: - for 'rect' - it specifies the coordinates of the top-left corner and the bottom-right corner of the rectangle (x1, y1, x2, y2) - for 'circle' - it specifies the coordinates of the circle center and the radius (x, y, radius) - for 'poly' - it specifies the coordinates of the edges of the polygon. If the first and last coordinate pairs are not the same, the browser must add the last coordinate pair to close the polygon (x1, y1, x2, y2, ..., xn, yn)
	href='url'	Specifies the destination of a link in an area
	alt='text'	an alternate text for an area
	target='value'	Specifies where to open the linked page specified in the 'href' attribute (_blank, _parent, _self, _top)

The following example creates an Image Map with three different areas: circle, rectangle and polygon; each of them with its own link.

<html>
<head>
 <title>Image Map</title>
</head>
<body>

<img src='image_map.gif' alt='Image Map' width='300' height='300' usemap='#map1'>

<map id='map1'>
 <area
 href='dir/contact.php' alt='Contact page' title='Contact page'
 shape='rect' coords='6,116,97,184'>
 <area
 href='html/course.html' alt='HTML Course' title='HTML Course'
 shape='circle' coords='251,143,47'>
 <area
 href='index.html' alt='Home page' title='Home page'
 shape='poly' coords='150,217,90,257,150,297,110,257'>
</map>

</body>
</html>

This code will display:

When you move the cursor over an area in the image, the arrow will turn into a little hand. Each area will open a different web page.

<<-Creating Hyperlinks - Links -- Creating HTML Tables->>

Daily Test with Code Example

HTML

CSS

JavaScript

PHP-MySQL

Which tag is used to add lists into <ul> and <ol> elements?

<ul>
 <li>http://coursesweb.net/html/</li>
 <li>http://coursesweb.net/css/</li>
</ul>

Which value of the "display" property creates a block box for the content and ads a bullet marker?

block list-item inline-block

.some_class {
  display: list-item;
}

Which instruction converts a JavaScript object into a JSON string.

JSON.parse() JSON.stringify eval()

var obj = {
 "courses": ["php", "javascript", "ajax"]
};
var jsonstr = JSON.stringify(obj);
alert(jsonstr);    // {"courses":["php","javascript","ajax"]}

Indicate the PHP class used to work with HTML and XML content in PHP.

stdClass PDO DOMDocument

$strhtml = '<body><div id="dv1">CoursesWeb.net</div></body>';
$dochtml = new DOMDocument();
$dochtml->loadHTML($strhtml);
$elm = $dochtml->getElementById("dv1");
echo $elm->nodeValue;    // CoursesWeb.net

Image Map

Html Course

Creating Image Map

Daily Test with Code Example

HTML

CSS

JavaScript

PHP-MySQL

Last accessed pages

Popular pages this month