Lesson No. 1 Web Publishing
IMAGE MAPPING
It is a single
graphic image that consists of number of hyperlinks incorporated within an
image.
The specific areas
mapped within an image are known as hotspots which are links to a resource.
Map is a text file
that contains the information of an image and the mapped areas of an image.
These areas can be
rectangles, circles or polygons defined in an image specified by coordinates in
pixels of the image.
There are two ways
to do image mapping
1) Client
Side mapping - They are executed on client machine from web browser
itself. All information is loaded along with the image. It executes quickly.
2) Server
side mapping - In this the program that executes the links is placed on
the server. The browser activates program on the server by sending x and y
coordinates of the position where hyperlink was created.
Client Side
mapping
In Client side mapping, the
image map is mentioned by using USEMAP attribute in the <img> tag. The
map is specified in the <map> and <area> tags, which defines the
hotspot in an image.
For specifying the areas of
the hotspot, the <area> tag is used within <map> tag.
The attributes for
<area> tag are as follows:
shape :- specifies
as values rect, circle and poly
rect -
for defining rectangle area, upper left and right bottom (X,Y) coordinates.
circle - for
defining circle area, coordinates of center point and radius is specified.
poly - for
defining polygon area, 3 or more pair of coordinated to form polygon
coords :- specifies
coordinates for rectangle, circle and polygon
href :- specifies
path of html file or URL of website.
alt :- specifies
alternate text given to hotspot
E.g. Client side image mapping
mapexample.html
<html>
<body>
<img src="images/globe.jpg" usemap="#test">
<map name="test">
<area shape="rect" coords="22,37,123,97" href="page1.html">
<area shape="circle" coords="406,38,30" href="page2.html">
<area shape="poly" coords="48,169,142,234,50,248" href="page3.html">
</map>
</body>
</html>
The coordinates for the shape are found by opening
the globe.jpg picture in Paint by placing the arrow over the points and note
down the coordinates.
Server Side
mapping
In Server side mapping the
map details are placed on the server. The browser activates program on the
server by sending x and y coordinates of the position where the hyperlink was
created. On receiving the coordinates the program on the server looks at the map
file for close match and then loads the file that is closet to coordinates.
In Server side mapping, the
image map is mentioned by using ISMAP attribute in the <img> tag.
The map details are save in
a text file with the extension .map and place this file in the same folder in
which html document containing the image is placed.
E.g.
Server side image mapping
- the map is written in globe.map file which is placed on server
globe.map
Default
http://exza.in/xyz.html
Rect
http://exza.in/page1.html
22,37,123,97
Circle
http://exza.in/page2.html
286,
90, 45
Poly
http://exza.in/page3.html
48,169,142,234,50,248
mapexample.html
<html>
<body>
<a href="http://exza,in/globe.map> <img src="images/globe.jpg" ISMAP> </a>
</body>
</html>
The href attribute of <a>
tag specifies the location of external map file and server side image map
program on the web server. The <img> tag is reference for the mapped file. The
ISMAP attribute in the <img> tag specifies that the image is mapped file. ISMAP
indicates a server side image map.
can u please display the output images ?
ReplyDelete