ExpertRating - Online Certification and Employment Testing ExpertRating - Online Certification and Employment Testing ExpertRating - Online Certification and Employment Testing

ExpertRating Home
ExpertRating Benefits
Recommend ExpertRating
Suggest More Tests
Privacy Policy
HTML Tutorial - Index
HTML Tutorial - Introduction
HTML Tutorial - Formatting
HTML Tutorial - Links
HTML Tutorial - Images
HTML Tutorial - Forms
HTML Tutorial - Tables
HTML Tutorial - Frames
HTML Tutorial - Style Sheets
HTML Tutorial - Advance Tags

Online Personal Trainer Certification
Personal Trainer Certification (Spanish)
Six Sigma Certification
Find a Personal Trainer
Project Management Certification
Six Sigma Certification
Six Sigma Black Belt Certification
Master Black Belt Certification
Six Sigma Green Belt Certification
Life Coach Certification
Lean Management Certification
Lean Six Sigma Certification
First Aid Certification
CPR Certification
Yoga Certification
Aerobics Certification
Pilates Certification
Business Analyst Certification
SEO Certification
Online Business Writing Course & Certification
Makeup Artist Certification
Baby Sitting Course & Certification
Time Management Certification
Health Club Management Certification
Medical Coding Certification
Medical Billing Certification
Business Analysis Course
Master Trainer Certification
Total Quality Management Certification
Kaizen Certification
Creative Writing Certification
Event Management Certification
Test Search by Job Title
Administrative Assistant Certification
Virtual Assistant Certification
  All Online Courses


  Home > Courses, Tutorials & eBooks > HTML Tutorial > Images

HTML Tutorial - Images

                                                                                                                     Page 2 of 2

Map Tag

A map tag is used to map an image. In other words; this image, called the mapped image, contains some regions that act as links to other documents. It is written as <map>. The user can set these regions and these regions are quite similar to a hyperlink. This is because when they are clicked on, they refer to some other document.

To create an image map, another tag called area tag is used which will be explained later.

Attribute of Map Tag


The name attribute sets the name of the image map. It determines which map definition the image uses.


<map name=”map1”> </map>

Area Tag

The area tag defines a region in an image map. This tag includes various attributes as it cannot function alone. It requires the href attribute to link to other documents.


<area attributes></area>

Attributes of Area


The href tag indicates the URL that the <area> tags links to. The syntax of this tag is similar to the anchor tag.


<area href=”image1.jpg” ></area>


The alt attribute in the <area> tags works just like it works in the <img> tags. It indicates the alternative text that is to be displayed if the browser does not display the picture.


<area href=”image1.jpg” alt=”my image” > </area>


The cords attribute is the coordinate attribute. This tag is used with the shape attribute (the shape attribute has been described later).

It specifies the coordinates of the area that has to be clicked and indicates where the shape is located in the image map. The Cords tag is necessary when the shape attribute is set to Rect, Circle or Poly. It is not required if the shape is set to Default.


<area href=”image1.jpg” alt=”my image” cords=”6,116,97,44” > </area>


The shape attributes indicate what shape the area is. The shape of the map must be set to the following values:


Rectangular shape indicates that the area is a rectangle. The cords attribute consists of two pair of x/y coordinates for a rectangle. The first pair sets the coordinates of the upper left corner of rectangle. The second pair sets the coordinates of the lower right corner of the rectangle.


<area href=”image1.jpg” alt=”my image” shape=rect cords=”6,116,97,44” > </area>


Circle shape indicates that the area is a circle. The first two numbers in the cords attribute indicate the coordinates of the centre of the circle. The next number indicates the radius of the circle.


<area href=”image1.jpg” alt=”my image” shape=circle cords=”60,40, 44” > </area>


Poly shape indicates that the area is some type of polygon. For a polygon each pair of coordinate in cords indicates the single corner of the polygon.


<area href=”image1.jpg” alt=”my image” shape=poly cords=”150,217, 190,257, 150,297, 110,257” > </area>


Default indicates that the area isn’t really a shape but the href attribute applies to the whole area. In this attribute coordinates are not given.


<area href=”image1.jpg” alt=”my image” shape=default > </area>



Home  |  About Us  |  Privacy Policy  |  Site Map  |  FAQs  |  Contact Us
© ExpertRating 2015. All Rights Reserved.