IT online Exam

Friday 7 July 2017

Lesson No. 1 Web Publishing - Image Mapping

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.

1 comment:

Bitcoins