Home Advertise with us Forum Articles Sitemap Contact
Logo  

HTML image Maps

Image maps are nothing but simple images with a list of coordinates relating to a particular image. These are also known as clickable areas or hotspots of the image. As opposed to normal image links where the complete image links to one single destination, the image maps are created in order to have various parts of the image link to different web pages.

The biggest advantage of creating image maps is that, it provides a scope to hyperlink different parts of the image without actually dividing it into separate image files. The <map> tag is used to create an image map.
Example:

<img src="image.gif" width="145" height="126" alt="Planets" usemap="#Map" />

<map name="Map">

 <area shape="rect" coords="302,69,421,103" href="www.example.com " target="_parent" alt="example.com" />

</map>

The image maps can be created using a text editor. However, this method is supposed to be a tedious time consuming way. A better alternative preferred by most web designers is to create image maps using applications like, Dreamweaver, , KImageMapEditor & several others.

All major browsers support the <map> tag. The map tag supports the following standard & event attributes:

Attribute
Value
Description
DTD
class classname Specifies a classname for an element
STF
dir rtl
ltr
Specifies the text direction for the content in an element STF
onclick script Script to be run on a mouse click STF
id id Specifies a unique id for an element STF
ondblclick script Script to be run on a mouse double-click STF
lang language_code Specifies a language code for the content in an element STF
onmousedown script Script to be run when mouse button is pressed STF
onmousemove script Script to be run when mouse pointer moves STF
style style_definition Specifies an inline style for an element STF
onmouseout script Script to be run when mouse pointer moves out of an element STF
onmouseover script Script to be run when mouse pointer moves over an element STF
onmouseup script Script to be run when mouse button is released STF
title text Specifies extra information about an element STF
onkeydown script Script to be run when a key is pressed STF
onkeypress script Script to be run when a key is pressed and released STF
onkeyup script Script to be run when a key is released STF
xml:lang language_code Specifies a language code for the content in an element, in XHTML documents STF

Besides the major above mentioned attributes, there are a few other standard & event attributes that the <map> tag supports.
 

HTML Tip 1

Use only hexadecimal #RGB values for colors. The behavior of named colors is browser-idiosyncratic and totally unpredictable.
 
 

HTML Tip 2

You can resize your images without a graphics program by changing the HEIGHT and WIDTH in your image tag.