home  THE WWW  : Client Side Image Maps 

Creating Client Side Image Maps (CSIM)

An image map is an image with certain areas that have been designated as links to other documents. Image maps are a great alternative to regular anchor tags, can contain any element that's used in anchor tags (mailto:, ftp://, http:// etc.), can be created from any web-friendly image format and are very easy to create and use.

Image maps come in two flavors, client-side and server-side. This document will mainly focus on the client-side variety as they are more common and many of the principles can be applied to server-side image maps (SSIM) as well.

Creating a client-side image map (CSIM) is easy to do using any graphics program. For example, using the marquee tool in Adobe Photoshop®, you can easily gather the coordinate information for your image map. However, there are also a few pieces of software that specialize in creating CSIMs. MapEdit and LiveImage are two examples.

Rectangular:

  1. First create your image and save in a web-friendly format. As an example we'll use this image:
    Image - 2k

  2. Next you have to define the areas that you want to use as hyperlinks.

    This is Box Number 1 This is Box Number 2 This is Box Number 3 This is Box Number 4 Image - 2k
The Code:

The <map name="example"> is the name you give to your CSIM. The image you choose should also have the name of the map in the <img...usemap="#example"> tag.

The <area alt="Alt Text" href="Link 1" shape="rect" coords="2,2,99,48"> is where you define the size/coordinates of the area and where it will be linked to.

When you're specifying a rectangular shape ("rect") four coordinates; x1,y1 and x2,y2 are required. It's easy to get these with any image editing program using the marquee or a similar tool.

Circular:

  1. Again, create your image first and save in a web-friendly format. We'll use this image:
    Image - 1.26k

  2. Next you have to define the area(s) that you want to use as a hyperlink. We've chosen to just use the whole circle for this example.

    You are in the circle Image - 1.26k
The Code:

When specifying a circle only three coordinates: x1,y1 and r are required. x1,y1 is the center of the circle and r is the radius of the circle.

Polygon:

  1. Like before, first create your image and save in a web-friendly format. For this example we'll use this image:
    Image - 1.26k

  2. Next you have to define the area(s) that you want to use as a hyperlink. In this case, the tips of this image hyperlinks.

    You are in the top-most tip You are in the right-most tip You are in the left-most tip Image - 990b
The Code:

When creating a CSIM utilizing polygons you must give a list of coordinates seperated by commas.

Related Items

Email and Web Hosting by Internet Connection 2004-2007 ©
Contact IC Support via AIM! Our SN is ICSupportDesk