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 attribute "usemap" inside the <img> tag.
<img src="image.jpg" alt="Text" usemap="#map_name" />
- The value of the "usermap" represents the name of the map.
Then begins to form the map, using the <map> tag:
<map name="map_name"> ... </map>
- "map_name" must be the same value added at "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:
<area shape="value" coords="coordinates" href="url" />
- 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 XHTML, the "name" attribute of the <map> tag is deprecated, and will be removed. Use the "id" attribute instead.

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 name="map1">
 <area shape="rect" coords="9, 120, 56, 149" href="url">
 <area shape="rect" coords="100, 200, 156, 249" href="url">

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
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" coordonatele unei regiuni (in pixeli); se calculeaza in functie de coltul din stanga sus al imaginii (care are coordonatele (0, 0), adica x = 0, y = 0); variaza in functie de SHAPE = forma regiunii:
- 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.
 <title>Image Map</title>

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

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

This code will display:
Harta de imaginiDate de contact Curs HTML Pagina principala
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.

Daily Test with Code Example

Which attribute can be used to add CSS styles directly in the HTML tag?
type style class
<div style="width: 80%; border: 3px solid #888888;">Content</div>
Which CSS transform method distorts the HTML element in a given angle (including its content)?
translate() scale() skew()
#some_id {
  transform: skew(20deg, 25deg);
  -ms-transform: skew(20deg, 25deg);   /* IE 9 */
  -webkit-transform: skew(20deg, 25deg);   /* Safari and Chrome */
Click on the function which converts a Date object to a string.
indexOf() toString() getDate()
var rightnow = new Date();
alert( rightnow.toString() );
Which function applies a callback function to the elements of the given array?
array_merge() array_search() array_map()
$arr = arra("abc", "<p>xyz</p>", "<em>PHP</em>");
// apply the strip_tags() function to delete HTML tags from each array item
$arr = array_map("strip_tags", $arr);
Image Map

Last accessed pages

  1. Bubbles3 (47598)
  2. SHA512 Encrypt hash in JavaScript (7776)
  3. Mahjong2 (855)
  4. Mahjong Games (17769)
  5. Get Lower, Higher, and Closest Number (1574)

Popular pages this month

  1. Qwop (3030)
  2. Drag Racer V3 (1516)
  3. Bubbles3 (728)
  4. Flash Games - Free online Games (677)
  5. Courses Web: PHP-MySQL JavaScript Ajax HTML CSS Flash-AS3 (665)