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.

With HTML things have changed drastically and definitely for the good. Just imagine when at one point people just could not afford the communication cost, HTML has changed the communication technology. It did not do the whole changing but it definitely played a major part in the revolution. Without the development of HTML, things would not have been what they are at present.

So far we have seen how HTML was initiated and what all happened in its development stage. How many versions have been there and what were the changes made in each version. The basic HTML structure, the meaning of tags, what role they play in HTML designing. We have gone through the basic reason for developing HTML. Now sharing and linking being done, we still have to scroll through the topics. Many web pages have something like hundred topics on one page and scrolling to each topic can be laborious and useless. You feel times have changed but still there are many dreading jobs which can be avoided but how you don’t know. Well for those who put up a hundred topics on one page and cant afford another page for the topics should make way for navigating from one topic to another. This makes life easier and saves a lot of time used up by unnecessary scrolling. But before we proceed with the linking in the same document we need to know something about linking. A link, hyperlink or web link, forms the basis of the HTML language. There are two ends to a link- called anchors and a direction. A Link starts at the source anchor and destination anchor. Let us see how this scripting is done in HTML.

<H1>Table of Contents</H1>
<P><A href=”#section1″>Introduction</A><BR>
<A href=”#section2″>Some background</A><BR>
<A href=”#section2.1″>On a more personal note</A><BR>
…the rest of the table of contents…
…the document body…
<H2><A name=”section1″>Introduction</A></H2>
…section 1…
<H2><A name=”section2″>Some background</A></H2>
…section 2…
<H3><A name=”section2.1″>On a more personal note</A></H3>
…section 2.1…

Without going into the technical details, here we have seen how the source and destination anchors are used and what exactly their purpose is. Now similarly we can also navigate from one part of the document to the other part. There are some steps involved in doing so. We have described the method in the next few lines. You can use the normal anchor tag here to navigate from one part of the document to another. Here instead of using name of another page, you can use the same portion of the document. You can name the area of the document you are interested in navigating in the bracket named area. This code looks something like shown below.

name=”name_of_area”>text</a>

you can call a link to the place you are right now to go to the area you want to you can use a statement given below.

href=”#name_of_area”>text</a>

HTML has definitely improved the way a web page works. It has given various features over its development stages. We always find some new addition or unwanted deletion in the new versions.