Image Maps Tutorial
 
Network Websites
Corporate website
Beautiful Clip Art
Fast Cars
Video Tiger
Fantasy Art
Beauty & Health
Tips & Tricks

Fast Loading Pages
Glowing Links II
Hide E-mail Address
Javascript Links
Link Colors
Marquees
Navigation
New Window
No Underline Links
Out of a Frame
Page Flash Effects
Preload Graphics Protect Graphics
Redirect Scrolling Javascript
Text Roll-Overs
Tooltip Links
[more tips...]

Tutorials
CSS
Colors
Forms
FTP
Image Maps
Meta Tags
Resources

Web Hosting
Counters & Trackers
Domain Names
Graphics
Web Page Design
Java Script
DHTML

 

Image Maps in HTML

An image map is just a kind of clickable image, which you can make to have different areas link to different URLs. (An example is below.) To make an image map, you need to add 2 groups of codes into your web page - the first is a map section, which contains area definitions, and the second is a special img tag, with an add-on to make it use the map.

NOTE: When you create an image map as part of your document, you should always create text links to compliment the image links. This allows users of non-graphic browsers or those with the images turned off to fully access your page. It also acts as a back-up should your image not load up.

The map tag

This is where you assign a name to your image map, which you will need to use later in the img tag. The name is a required parameter of the map tag, and the map will not work without it. When used, a map tag will look like this:

<map name="put name here">Area Tags Go In Here...</map>

Note that the map tag must be closed at the end.

The area tag

This is where you assign the individual clickable areas of your image. The area tag has 3 required parameters - the shape, the coords, and the href parameter. If an area tag is made without all three, your image map will not work! Here is an example area tag:

<area shape="put shape type here" coords="put coordinates here" href="put URL here">

Note that the things in brackets are not what you actually put there. Read on for explanations of those:

Shape and Coords:

There are three shapes that can be used for an image map - circle, rect, and poly. Each of the shapes requires a different number of numbers in the coords parameter. The order of the area tags is very important - the first area tag that mentions an area is the one which is used, so you should make sure you set your small areas first, and the large ones (which may wrap around small ones) last.

For a circle, you must specify three numbers: The X and Y coordinates of the center of the circle, and the radius.

<area shape="circle" coords="284,131,60" href="link.htm">

rect makes a rectangular area clickable, and for it, you need 4 numbers - the X and Y coordinate of the top left corner, and the X and Y coordinate of the bottom right corner.

<area shape="rect" coords="91,148,194,262" href="link.htm">

poly is the last type of area tag. It is used to create a polygon, or multi-sided shape, which the viewer can click on. For coords, it requires a list of X and Y coordinates of all of the points along the edge of the polygon. For complicated poly shapes, the coords parameter can be very long, and it becomes easy to make mistakes. It is usually best to keep your poly areas down to 8 points or less.

<area shape="poly" coords="203,213,203,387,325,336" href="link.htm">

href or nohref - Last is the destination for your clickable area, which is specified by the href field, in exactly the same manner as the href parameter of the <a> tag. Optionally, if you wish to specify an area, which does not react to being clicked on, you can replace the href parameter with nohref.
An example of nohref:

<area shape="default" nohref>

Thus, any area not defined will not react to being clicked on.

The <img> tag used here is exactly the same as the normal one, with one addition - you must add a usemap parameter to it, which points to the map you created previously in your document. For example, an image map that uses a map named "navigation" would look like this:

<img src="navigation.gif" alt="Navigation" usemap="#navigation">

Full Example:

If you'd like to see a working example of an Image Map (an alien spaceship), go Here.

Tutorials

Sponsor

Hot Wedding Ideas

Advertise
Really affordable rates.
Feedback
Comments, suggestions?

 

 

home | tips & tricks | tutorials | tools | resources | contact | advertise
© 2000 - 2001 GT Media Inc. All rights reserved.