HTML.co.uk

In HTML, image maps refer to an image consisting of different parts each pointing towards a different link on the web. These types of maps are used to represent various information related to a particular organization as a whole. The user can see all the options in the form of graphics and then he can select the necessary one to have the details of only the selected portion. Apart from the organizations, Image maps are frequently used by those websites which display maps of different regions. The main advantage of using image maps is that the user gets an easy and interactive way to link to different parts of an image without dividing it.

Example of the HTML code needed for an Image Map:

<MAP NAME=”map1″>
<AREA HREF=”contentmantra.html” ALT=”content mantra” TITLE=”content mantra”>
<AREA HREF=”italics.html” ALT=”italics” TITLE=”italics”>
</MAP>

<IMG SRC=”testmap.gif”
ALT=”map of italics” BORDER=0 WIDTH=300 HEIGHT=300
USEMAP=”#map1″><BR>

[<A HREF="contentmantra.html" ALT="contentmantra">contentmantra</A>]
[<A HREF="italics.html" ALT="italics">italics</A>]

Client side and Server Side Image Maps:

Image maps can be implemented either on client side or on the server side. If it is implemented on the client side, then the determination of the target URLs can be done on the user’s machine. On the contrary, if it is implemented on the server side then the data related to the page location must be passed to the server in order to determine the target URL. The client side image maps are comfortable to access but it cannot offer flexibility in complex decision making like the server side image map do.

Importance of Rollover effects on the Image Maps:

Rollover effects refer to those special effects which occur when the user takes the mouse cursor over the target object. There can be various types of rollover effects which can tell you that the object has been targeted or not. In image maps the most common type of rollover effect is the caption effect. In this kind of effect, whenever the user takes the mouse cursor over a particular part of an image map, a small text is shown which describes that particular part. Thus, the user gains sufficient knowledge about different portions of the map and decides well in advance whether to select a particular area or not. Rollover effects can be embedded with the help of different types of scripts and DHTML coding.

When not to use Image Maps:

No doubt that the image maps are one of the best possible tools to show the information on the web sites, but still there are some situations when one should avoid using them.

• Image maps should not be used if most of the end users are using text based web browsers because these browsers cannot display the graphics.

• Large image maps make the web page very heavy and it takes a long time to get the web site loaded on a slow internet connection.

• If you want to use server side image maps, then make sure that you have a live web server first because these maps cannot be tested without a web server.