Tip:
Highlight text to annotate it
X
If you recall, in our last lecture we are talking about html forms. Now using forms
what we are able to do? We are able to create an environment through which two-way communication
was possible between the web client which is the browser and the web server. So a form
was displayed on the screen as part of an html page which a user can fill up and when
the form was submitted the data that where filled up would be going all or would be transmitted
to the web server where a particular program which is linked to that particular form which
we had called as a CGI script or a CGI program that would start running.
And the CGI program would take the form data that are filled up as an input and would do
some processing. And whatever it generates as output would be coming back and shown on
the screen of the browser. Now before going into how a CGI script can be created, the
details of it. We would like to talk about another technology or another way in which
we can interact with the web server. But not through textual, text boxes, submit button;
but through some images by selecting some portions of images. There are some predefined
or well defined rules that you can define on the different portions of the image. And
depending on where you are clicking on that image you may choose to carry out certain
operation.
So our topic of discussion today is something called image map which provides just that
kinds of a capability.
Now let us see what is an image map? Basically an image map it is an image a graphics a jpeg
or gif image which is displayed on the screen. It allows us to create links to different
URLs depending upon where we click on the image. Now here I am giving a very simple
example where this kind of capability may be required or may be useful or desirable.
Suppose I want to develop an information system about our country; information about the different
states of the country. So one alternative would be that I create an html page where
there would be hyperlinks corresponding to all these states. And I click on the name
of the state and I get some more detail about the particular state. As an alternative and
as you can say, as a more user friendly way of doing, so what we can have is that the
map of India may be displayed on the screen and I have the option of clicking on a particular
state using the mouse. This is a classical example of an image map application.
Suppose I click on a region inside West Bengal, then I immediately go to the next page which
is the page corresponding to West Bengal. So this is some kind of a hyperlink. But it
is based on an image. The geometry of the region where I am clicking and which is taking
me to somewhere else. This can be defined in a number of ways as we shall see shortly.
So this image mapping allows us to create links to different URLs as I just mentioned.
This is very useful for creating links or maps as I have just mentioned on some diagrams.
I can have diagram where ever I click on the diagram the corresponding information can
be linked with it. You can have very fancy buttons instead of simple looking buttons.
You can have very graphical oriented very you can say colorful and some kind of a visually
good looking buttons which you can also implement using image map. May be as part of the same
image you can have all the navigation buttons.
So it is possible. Now when you are having an image map, if you think there are basically
two things you need to decide upon. First of course the map itself which get displayed
on the screen which is an image. The map is nothing but an image file. But associated
with that image there has to be another file which is conventionally or traditionally called
the map file. The map file actually tells you or defines the different areas of the
images image and the corresponding URLs. Say, suppose you have you have image like this.
You say that if you click on any point in this particular area, then you will be going
to some particular URL, if you click somewhere here then you go somewhere else. So the map
file will specify the definition of these areas and the corresponding URLs. If you click
there where to go, there are a number of different ways of specifying these and we shall see
this.
So in essence an image map is a single image that contains a number of clickable regions
or hot spots. Hot spots are nothing but clickable regions. Now this is different from the case
which we had talked about when we are discussing about html tables. We had said that if you
have a big image the different pieces of image can be stored as a separate file and they
can all be composed in the form of the table. So that, when the table is displayed as if
you will see that the total image is getting displayed. And the different segment of the
table can act as an image hyperlink to some particular URLs. But here the situation is
different.
Here you have a single image and that single image is providing multiple links depending
on where on the image you are clicking. So there can be a number of such hot spots or
region. So when we click on a particular hot spot using the mouse we go to a new location
which is defined by URL that is associated with the hot spot. We shall see how you can
do this and as I mentioned that this mechanism requires the loading of only one image from
the server. This therefore requires fewer server calls and also it is in general better
looking as compared to several pieces of information which were brought and composed together.
So this essentially is the idea behind image maps why we use it.
Well, let us see what are the different kinds of image map that you can have. There are
broadly two types of image maps that you can have. And this classification depends on the
way they are configured. Configured means how we specify the details about the map the
regions and the corresponding URLs. And secondly, depending on where the actual processing is
carried out. See actual processing is carried out means, on the map I am clicking using
a mouse someone should decide that well, the place where I have clicked using the mouse
corresponds to hotspot number one and so you should transfer to a particular URL, URL1
and the corresponding URL1 content should now come on my screen. So somewhere in the
overall system this processing should be carried out.
Now there are two alternatives. This processing can be done at the end of the web server or
it can be done at the end of the browser itself; on the client side itself. So depending on
these that how they are configured and where the processing is carried out. We can classify
image maps as either the server side maps which are the traditional one which was the
first one to come up. Subsequently something called client side image map was also introduced,
we will see that the client side maps are more efficient in terms of the operations.
They are not supported by some of the old browsers. But all recent browsers support
the client side. So in the newer websites you will find that the image maps, if there
are any they all use the client side maps.
So let us start by talking about server side image maps. Now, as the name implies a server
side image map requires something to be stored on the server side. The image map is stored
on the server some information is stored on the server.
So let us see what are the basic ingredients that are required to implement such an image
map. Now there is an html document that you are viewing from the html document. Somehow
we are providing a link to an image map which is getting displayed as part of the html document.
So basically we need a few things. First we must create the image map, before we are actually
designing the system with well-defined boundaries. Because, if we do not create the web the map
the image map and do not know the exact co-ordinates of the boundaries. Then we cannot carry out
any processing. If I say that the user has clicked the mouse on a co-ordinate 100 comma
50, what does that mean? Which region does it correspond to? This you can decide only
if the exact co ordinates of the different regions or hot spots are known to you.
And this is known by some image editor program through which you are creating the image map.
So this is the first step. You have to create the image map and you have to note down the
exact coordinates. We will see that how we can define with respect to coordinates. So
there has to be well defined boundaries of the regions. The second step is that once
you know the exact geometry of the regions. Now you can create a map configuration file.
Now the map configuration file will contain the relative pixel coordinates marking the
boundaries of the different clickable regions. Relative pixel coordinate means the exact
pixel co ordinate of the screen is not important. Say for example if you have a rectangle, then
possibly the coordinates of the two opposite diagonals will be sufficient to specify the
geometrical rectangle which is not require to specify the co ordinates of all the 4 vertices.
But when you are defining a polygon you may have to define the co ordinates of all the
vertices. So it depends how you define. So this relative pixel coordinate is used because
you are defining the co ordinates not with respect to the screen on which the image is
displayed. But with respect to the image itself. Usually the top left corner of your image,
the top left corner wherever you have that particular point is defined as the coordinate
(0, 0). With respect to that, the other coordinates are defined. May be this will be the x axis.
This will be y axis, that way it will be defined. And in the image map, we will see that the
allowable geometries for the server side image mapping particular are circle, polygon, points,
rectangle, these are the four kinds of geometrical shapes which you can define.
And thirdly, after we have defined the regions we have to establish appropriate html hyperlinks
with each of the regions. And secondly you have put all the corresponding links to the
page. Because ultimately this image map is displayed as part of an html page. So you
have to tell that in html, how I can include such an image map. Secondly, I have to tell
that for this image map where I can find the corresponding file, map configuration file.
So all this things have to be clearly specified. So the map image map configuration file and
also this is optional, it is not required for all cases.
Sometimes you may specify a CGI script program also. So when you click on the map, the CGI
script program will start running and it will take as input the coordinate on the map where
you have clicked. Depending on the coordinate you may want to do some processing that can
be done by the CGI script. But if you do not want to do any special kind of processing,
if you want to do just a jump to a particular URL, this you can specify in the map configuration
itself and you do not need explicitly a CGI script. That is why CGI script is optional
in this kind of cases.
Let us see a typical example. In html page, how we can include a server side image map?
This is the skeleton of html file. First you have a line here. This is a hyperlink. This
is the begin hyperlink and this is the end hyperlink. And at one attribute of this hyperlink
specifies a URL. Now, in this case, this URL points to a file called menu dot map. Now
this menu dot map is the map configuration file. This particular file contains information
about the coordinate’s geometrical shapes and the corresponding hyperlinks. So this
menu dot map is the file where all the details about the regions and the corresponding URLs
can be found. Well, within this hyperlink the body we have included an image. This is
just like a normal image inclusion.
The only difference is that I have used an attribute called ISMAP. The attribute ISMAP
is important here because if you do not use this attribute ISMAP, this will be like a
conventional clickable image. This image I can I can always make it hyperlinked just
like this. But if we use this map this means two things. Number one, it means that the
image that you are trying to load is a clickable map or an image map. And number two the hyperlink
URL that we have specified that is not the URL of the web page you are trying to load.
But rather it is the name of a map configuration file. These are the two things that are implied
if the ISMAP attribute is present in this image tag specification. This is how you can
include an image and the image map specification as part of the html file.
Now suppose, you have the image that I displayed. Now you click on a particular, suppose this
is the image there are number of regions in the image, you click somewhere in a particular
region. This is the region you have clicked. Now depending on where you click you are expected
to go to a particular URL. So this acts so what similar to a form. And when you submit
a form, some data that was filled up in the form would go to the web server. And the web
server would forward it to the corresponding CGI script program. But here also something
similar takes place. Whenever you click on an image map the corresponding x and y coordinates,
the relative x and y coordinates of the image will be stored in some variables. And they
will be sent to the web server exactly in the same way you sent form data name, value;
name value pair, name equal to value name equal to value with an ampersand in between
it will be sent like that. Now this server can do two things. The server can know that
this is an image map coordinate.
So let me consult the image map file and find out that this coordinate corresponds to which
hyperlink. So if I know the hyperlink I can fetch the page from there and I can forward
it back. So after you click on this region of the image, the thing that is transferred
to the server is like this. Suppose the URL of the server http myserver.com, if you look
at the previous slide so here menu dot map was the name of the file. So actually menu
dot map will come. Well, this menu dot map shows that it is under the root directory.
But if it is under CGI bin extra so all those things would have come here cgi bin. And if
there are any other subject maps, all this things would come here. So the exact path
name the map configuration file and just like the get method of form submission, there will
be a question mark followed by the data x and y. So the values of the x and y coordinate
would follow the question mark like in a get form submission exactly the same syntax. This
x and y are the coordinates of the point where you have clicked.
Now with respect to server image map server side image maps, there are several slightly
different formats depending on which web server you are using. Syntax is slightly different.
But the essential idea is the same. The way you create the files are the same. So these
are four very popularly used servers we will give the example on the apache server means
how we can do the configuration.
So this is an example for an apache server. Let us have a look at this. This is the map
configuration file. Say I give the name of this file as mymap dot map something. Typically
the map files are given an extension dot map. There were a few things you need to understand
here. The first line starts with a hash symbol which means it is a comment. Now you can introduce
as many comments as you want in this file forget the first the line which fall the default
line we will come back to this. Forget also the third line for the time being. Let us
look at the last four lines. The last four lines give us a demonstration of the four
different kinds of geometrical shapes that you can use. Circle. This is the name of the
shape or the type of the shape. This is followed by the name of a URL where you want to go
when you click on this particular region. And this defines the geometry of the circle.
The first coordinate (45, 45) is the coordinate of the center (80,45) is the coordinate of
some point on the circumference. We will see the details later. Similarly the next line
tells you that it is a rectangular shape. This, the URL can be anything just for convenience
I have given the same name rectangle dot html and this, the coordinate. The first coordinate
(20, 10) is the coordinate of the top left corner (178,70) is the coordinate of the bottom
right corner. Well you can also define a point followed by a URL a point will obviously have
a single coordinate. Point means whenever you click in the close vicinity of a point.
Because you cannot click exactly on a point because a point is a pixel very small point.
So when you click in the close vicinity of the point which is closer than any other region
surround, then we will select that point and you go to the corresponding URL.
And the last line specifies that you define a polygon. This is the URL and for a polygon
we have define the co ordinates of all the vertices. So here you see that there are three
vertices which means, these are triangle we are defining. Now there are a few things.
Now when you are defining a configuration file like this. The URL if you click on a
region you are going to a URL. The URL may be on the local machine may be on some other
machine. So this apache says that the URL should get absolute URL you have to give the
complete path name. Relative path name is not allowed, but in the example you see that
we have, where we here, we apparently given the relative path name so many circle.html,
rectangle.html and so on. The base URL command which I have given here this gives you the
prefix of the absolute attribute. That means when I give circle.html, this means actually
http www.iitkgp.ac.in slash demo slash circle dot html.
So instead of writing the same thing four times, I can define it at the beginning as
base URL and by default in all the other URLs I am giving that will be prep ended at the
beginning. This is a way of a short cut. Now you imagine that you have an image you have
defined certain regions of the image and you have defined a hyperlink corresponding to
it. An URL corresponding to it. And it is not mandatory for you that you must assign
each and every area of the image to some hyperlink. So there may be some areas which are not linked.
Now if someone clicks on such an area which is not part of region or hotspot, then what
happens? Then you go to the URL specified by the default specification. Default means
when you are clicking on some place which is not part of a hot spot then where do oh
where do you want to go?
So let us see the different options in a little detail. When you are defining the default
as in the first line. This is typically the first line in the map file. This defines the
URL to which the users will be taken. If they click on an undefined area of the image. Undefined
area means, an area which is not being assigned to a URL in the map configuration file. Similarly
I had said when you are defining a circle; you specify two different coordinates to define
the geometry of the circle. Your first is of course the center of the circle and the
second one is a point on the circumference. This can be any point on the circumference.
This can be, this, you can also have this point and so on. So far, for defining a circle
you need two different coordinates. Center and any point on the circumference. Rectangles
again need two coordinates. The first one is the upper left corner. As I had mentioned,
the second one is the bottom right corner. For defining points, points are referred to
as single coordinate. And as I said that when you click closest to that point on the image
map as compared to any other region in the vicinity. This will take you to the specified
URL.
And regarding polygon as I said you can define any kind of polygon. You can have a polygon
like this. You can have a polygon like this also. So here there are 1, 2, 3, 4 and 5 vertices.
So as many vertices are there you have to specify so many coordinates in order. So actually,
when you specify a polygon, you have to specify in order the coordinates. And you are free
to choose this starting point. You can choose you can start from any one of the vertices
and you traverse the other vertices following the edges. And the only restriction is that
in a polygon the maximum number of vertices you can define is 100. Now here, let me tell
you about one thing that in a map not all regions will be a regular geometric shape
like what we have mentioned circle, rectangle, polygon.
Let us come back to that example I had given for India map. Suppose we have to define the
region for the state of Bihar, there are so many zig zag boundaries of the state of Bihar.
This we cannot define by circle. This you cannot define by a polygon. But we can approximate
it by a polygon. We can define many points on the boundary of the state and we can join
them as straight lines. This is an approximation of the actual shape we approximate it by a
polygon with many vertices. This is how we typically model complex shapes in an image
map.
So a very small will illustrate that, suppose this is an image, there are so many regions
I can define the individual regions. For example, this is region 1. This I can define by two
coordinates. One is this coordinate; top left, bottom right. This is region 2. This again
I can define by top left, bottom right. Say, this is region 3 this is also rectangle. This
also I can define by top left, bottom right. Number 4 is the circle. Circle, I can define
by a center and any point on the circumference. Region 5 is this triangle. This I can define
by its three vertices 1, 2 and this 3. 6 is this polygon, I can start anywhere say I start
here 1, 2, 3, 4 and 5. So once you know the coordinates creating the map file is easy.
This is why I mentioned you must use a proper image editor program to create the map file
at the beginning. Because once you create the map file you know exactly which coordinates
are the points of your interest and you can directly create your map file knowing those
coordinates. So this is why you need this.
Now this I have mentioned the purpose of base URL. This is explained here. I mentioned that
for server side image script as it is supported by apache. For all the specified URLs, you
need to specify the entire path. But however if the common prefix URL are the same then
you can save the amount of typing by specifying the base URL command. You can specify a URL
prefix and whatever you have given after that; that will come after a slash this slash this.
So this URL is just a way for saving the amount of typing attribute. Because, in reality for
a map file most of the hyperlinks would correspond to the same server pages which are resulting
in the same server. So using this base URL you can save the amount of text you need to
type.
So just to summarize in a server side image map you have a browser which is a client,
you have the server; the image map resides on the server. And you have html page that
is also in the server browser fetches this html form. Html form contains a link to this
image. So this also gets fetched. So now in the browser you have the page displayed with
the image map. Now using the mouse you click on the image map. As soon as you click, then
another request goes to the web server with the x and y coordinates. Now the server knows
from the URL that is being sent which carries the x and y numbers that which map configuration
file. There will be a map configuration file out here MCF. So the corresponding map configuration
file would be consulted.
And the region that x, y corresponds to would be found out and the corresponding URL would
be would be extracted from there. And once you know the URL, either the URL will be sent
back to the browser or the server will fetch the URL and the new page will be sent back
to the browser. This is how the whole thing works in general. This is how server side
image map works where everything all the information is stored in the server side. So whenever
you click on an image map you need to consult the map file which is stored on the server
to find out which URL you need to fetch. You click somewhere else again you go the server
and consult the map file and find out again. So for every click on the image map you need
to go to the server and find out.
Now let us see that what are these client-side images maps which I had mentioned are supposed
to be better the server side in terms of efficiency? Let us see.
Now in client side image maps, as the name implies the image maps are stored on the client
side. That means on the side of the browser, here the map information is not stored in
a separate file on the browser, on the server. Rather it is part of the html file itself.
When you fetch html file from the server, the map information come to the browser along
with it. So it is contained in the html document itself. Now this map information consists
of three things. Ffirst a link to an ordinary image file. This can be a gif file, a jpeg
file or there is a new standard png, portable network graphics which is supposed to be the
next generation image format of the internet. But it has not become popular as yet. So this
might come up in the future. So these three image formats are supported. Then a map, you
define the map use the map tags for that. A map delimited by map tags which contains
similar to the server side image maps the coordinates and the URLs and you will see
exactly how to do this. Third thing is that you use another attribute along with the img
tag called usemap. This will tell you that this particular map description has to be
associated with this particular image. Well, why this is required? This is required because
in a particular html file, there is no guarantee that there will be a single map file. There
can be 2 or 3 map files. There will be 2 and 3 corresponding images. So an image has to
be linked to the corresponding map file. So the usemap attribute of an image inclusion
tag specifies that which map-description should be associated with this particular image and
this usemap also tells that this is a clickable image map; not a regular image.
So advantages are obvious. First they are self-contained within the html document they
are available in the browser itself. There is no dependence on the server to handle the
client’s requests. Because whenever you click on a place in the image, the information
is available with the browser itself. So there is no need to go back to the server to find
out. Alright, so this facilitates faster processing and improves the response time and since everything
is done locally, there is no longer required to specify a default URL. Because if you click
outside the hyperlink area nothing will happen. The image as it was seen on the screen will
remain. But for a server side image map you may need to do some additional processing
for that. But for client side you need not do anything for that specially.
And there is another difference. Suppose this is your browser window. You that on the bottom
there is something called a status bar, some information gets displayed there. Now in a
client side image map, suppose you have a clickable image and you are moving your mouse
on top of it. So as you move your mouse on top of it continuously, so there can be several
regions. The URL corresponding to the region where you are moving the mouse that will continuously
get displayed in the status bar. So if you move from here to here, the URL will change.
So you can look at the status bar and you can understand that well if I click here,
then I would go to this particular URL. I can see the URL there http something, but
in a server side image map when you move the mouse over an image only the coordinates was
visible in the status bar. Because URL is not available locally URL is known only at
the server end. But we are looking at the coordinates I cannot understand anything meaning
full. That is why a client map can give me more because at information about the URL
where I am expected to go if I click alright.
The only disadvantage of client side image map is that they are not universally supported
by all browsers. Of course most of the modern browsers support. In particular Netscape navigator
version “1.0” and Internet Explorer version “2.0”, they do not support client side
maps. But the subsequent versions do support. So if you have a subsequent version, you need
not worry about the compatibility issue, you can have client side maps. Now let us see
how we can define client side map as part of the html page.
So a simple example. Well, here we are showing only the map description part of the html
file. We shall see the complete html file later. This is just the map description file
which uses as I had mentioned the map tag with the map tag. There is an attribute which
assigns a name to the map. This particular map as assigned a name called demo underscore
map. Just one point to notice is that in plant side map the geometric point type is not supported.
But circle, rectangle, polygon, these are supported. So this example illustrates all
these three there is a tag area which defines the hot spots the attributes are shape which
tells you what kind of shape it is circle, rect or poly. Coords gives you the coordinates.
Now for a circle there is a small difference. Here there are three coordinates. Here there
three numbers you can see.
First two numbers as usual specifies the coordinate of the center, the last number 20. This is
not a coordinate, but rather the radius. So the coordinate of the center and the radius
this you specify when you define a circle. Then you specify the hyperlink where do go.
Well you can define an alternate text. This is optional, that is when you move the mouse
on top of that region, a text will popup showing that name circle or rectangle. This you can
define or if you do not give this alternate description those would not come. Similarly
for rectangle top, left, bottom, right URL and this alternate text for polygon again.
Similarly, the coordinates of the vertices the URL and the alternate text. Now this is
how I am defining the map and called it demo map. Now let us see how I can include the
image.
This I had mentioned point is not supported. Circle is specified and this is another point
in the client side in between if I want to include a comment, it is just like html I
can use the comment inclusion command less than exclamation sign and greater than.
Now when I am including an actual image as part of the html file, I can use the conventional
img tag. I can specify the image which I want to load. But in this case I will use the attribute
usemap which tells me two things. Number one, it tells me that this is an image map I am
dealing with, not a regular image. And secondly it also tells you that which map this particular
image associated with this map name is preceded by this hash symbol. So hash demo map will
tell you that demo map is the name of the map description which is there in some place
in the same html file which will correspond to this particular image map. So this will
be referring to the image mymap.gif as I have said, this is will be since we have a name
demo.map, it will be searching for a map element with the name attribute of demo map. This
it will try to find out.
Now, the complete example looks like this where it starts with html, head, body, that
same map description as I had shown earlier same thing. So this map description would
be there, somewhere as part of the html file.
Then, I can have this image inclusion command and this USEMAP. Well, I have not shown any
text you can have. In addition to this you can have as much text you want. But this is
how you can have the html file where you can have the map description and the image include
it.
Now there is one issue. As I mentioned that the client side maps are better, but some
older browsers do not support it. May be some of the browsers which are non-proprietary
they also do not support it. Suppose today I want to design a website and I want to design
a web page which would be compatible to everything. See if some browser does not have support
for a particular feature, some proper error message should at least appear. So that the
user knows that I am trying to trying to access something which this particular version of
browser cannot support.
Let us see how we can do this. We can do this by combining both client and server side maps
the motivation I have just mentioned, motivation that there are few things that are, that we
are trying to exploit browser if they encounter an unknown tag they simply ignore. This is
one point we are trying to trying to exploit because older browsers will simply ignore
the map tag because they do not understand what is map. Newer browsers which use client
side map older browsers will use the server side map. But the question is how we can do
this? Let us see how we can do this. You can do this by a specification like this in the
html file. Let us see what this means.
This is an anchor tag. We have given a hyperlink, these points to a map file just like server
side map in the img. I have included the image, but I have included both USEMAP and ISMAP.
USEMAP is used for client side ISMAP is used for server side. Now if it is an older browser
the older browser cannot understand USEMAP. But it can understand ISMAP it can understand
the rest. So, older browsers will treat this as if this is something corresponding to a
server side image map. But the newer browsers when it finds it USEMAP description, it will
know that this demo map description is there somewhere in the same file. So it will ignore
the remaining part of this. It will simply take this particular file take this map and
proceed accordingly. So if you have a description like this, then you can have compatibility
across all browsers. And if the browser supports you can have client side if not you can have
server side.
Now there is a small point relating to the creation of image maps. How we can do this?
Normally, image maps are created using some proper image editing tool. Some of the popular
tools using which you can create image maps are map edit. Macromedia Dreamweaver, adobe,
Golive and there are many others. Now whatever tool you use, the basic steps you need to
follow while creating the map are more or less the same. Let us try to see that what
are the steps involved.
First of course, the image that you want to make a map image you have to open it in the
image map editor. See, image map editor is slightly different from an image editor. Because
an image map editor allows you to define the allowed hotspots or regions on an image. It
can also allow you to specify the hyperlinks associated with it. The image map file can
get automatically created, if the editors are poor sited. So after opening the file
you can define the different areas. Now areas as you know, if it is a client side area the
only allowable areas are rectangle circle or polygon. So this image map editor will
also have only these three options of defining a rectangle, a circle or a polygon. So, on
that image you can define accordingly that what kind of geometry you are trying to put.
Now once suppose this is your image and you have defined a polygon like this, a triangle.
Now once you have defined a triangle and once you have selected this area, you can enter
the URL for that particular area. So you define the URL corresponding to this polygon and
you do this for all other region. Suppose I have a circle here I have a rectangle here
you repeat this process. That means you define an area on the image you specify a URL after
selecting that. So in this process you repeat for all the clickable areas you want to define
or create on the image. If it is a server side image, you also need to define a default
URL if you need to. This also most image map editors allow you to then of course you will
have to select the type of the image map client or server side. Because the way the map file
will be generated the syntax is slightly different in the two cases.
So with this we come to the end of the discussion on image maps. Now before going into our next
discussion which we will start in our next lecture that will be on CGI scripts, how do
you form data? How this coordinate data can be handled on the server side?
Let us quickly go through the solutions to the questions of the previous lecture.
First question was why it is said that the use of forms can provide dynamic contents?
See, dynamic means something which is not residing statically and if somewhere. So a
form in conjunction with a server side program like a CGI script can generate a dynamically
created html file. Like the example of the search engine that we had seen in the last
class depending on the request you are giving the page that is coming to you is created
accordingly.
What is the purpose of the method attribute of the form tag?
This indicates how the form data will be sent to the web server when the form is submitted.
And as you know that, this attribute can have two values GET and POST.
What is the purpose of the action attribute? Well action attribute actually specifies the
URL of the origin server which will be receiving the form data. Actually this points to the
CGI script. The URL means a particular program which is pointing to on the origin server
which will be executing and the data on the form will be taken as input by that program.
Illustrate the use of method and action in a form definition with the help of an example.
Now this example we had seen earlier also that two attributes the method specifies the
type, action specifies the URL of the CGI script. So after that the description of the
form can be given.
What is the difference between the TEXT and PASSWORD values in the type attribute of a
form element? Both generate a text box kind of a thing.
But in PASSWORD whatever you type will not appear in the box, they will be hidden.
What is the difference between radio and check box values in the type attribute?
The basic difference is in the radio group only one button of the group can be selected.
But in check box you can select as many numbers of buttons you can at the same time.
What is the purpose of the select tag? This is used to define a selectable list of
elements.
What are the different ways to submit a form? There are broadly three ways clicking on the
submit button, clicking on an image map or pressing the enter key on a text box or a
text area.
Now let us come to the questions from today’s lecture.
What is a hot spot? What is the essential difference between client
side and server side image maps? What information does the image map configuration
file contain? What is the purpose of the default URL in
case of server side image map? Why is client-side image map faster and puts
less load on the server? Why is the ISMAP attribute used?
Why is the USEMAP attribute used? Show a client side image map configuration
specification where there are four triangular shaped areas joined together to form a square
shaped structure. Means, this shape is like this. There is a square there are four triangular
shaped structures 1, 2, 3 and 4, you give this specification for this. So with this
we come to the end of today’s lecture. Thank you.
In this lecture, we would be talking about CGI scripts.
Now we had been talking about the necessity for having CGI scripts. The necessity of having
some kind of processing capability on the side of the web server. So that some kind
of processing can be done at that end. We gave some typical examples that of submitting
a form data. And the data going on the server side and some processing taking place on that
side before the results coming back. So in this lecture we would talk about the basic
technology behind CGI scripts. How we can write a CGI script program and what are the
different things we need to remember when we are trying to write such a program.
The first thing is CGI is an acronym. CGI stands for Common Gateway Interface. CGI stands
for Common Gateway Interface. Now in CGI we can do a few things. Now using CGI, we can
create interactive webpages. We can also provide two way interaction and dynamic web page creation
using CGI. Pages can be created dynamically. Of course this will be based on what the user
wants. And one thing you may be thinking that the CGI’s are nothing but some programs
which are running on the side of the server. Why are they called scripts? They are called
scripts due to traditional reasons. Traditional reason means that the first CGI programs that
were written they were written using UNIX shell scripts or Perl scripts. So for those
of you who are not familiar with UNIX shell scripts let me tell you.
UNIX shell scripts provide us with a very powerful string handling capability. It is
a very small and simple language using which you can combine the UNIX commands in a very
powerful way and you can do certain things in a very efficient way and repetitively.
So UNIX shell scripts and Perl scripts were used to write the first CGI programs. But
in actuality, CGI programs can be written in almost any language: C, Java, C++, anything.
Depending on the server you are using CGI scripts or CGI programs will be residing in
some special directory. Typically a directory called CGI bin is created under which these
CGI script programs are stored.
Now, let us talk of a very popularly used web server program apache. Now in apache,
see apache is a web server which is freely available on the net.