image map
DESCRIPTION
Image mapTRANSCRIPT
UNIT – IVIMAGEMAPS
Image Map, also called a clickable image, is a single image that contains multiple links. Clicking on a portion of an image map takes you to the link connected with that part of the visual presentation.
The two types of image maps are:
1. Server-Side2. Client-Side
The main difference between two types is where the processing takes place. In Server-side the processing is done at the server side an d In client –side the processing is done at the client side.
Server-Side Image Maps
In Server-Side image map, the coordinates of the click are transmitted to the server computer, which determines the instruction that apply to that click.
Advantage
1. Most widely used and supported by web servers and web browsers.
2. They have been around longer than client-side maps.
Disadvantage
3. Server-Side image map requires input from the server, it generally responds slower than a client-side image map.
4. The Server may need supplemental software to process the image map.
5. The server administrator may have to specify how the image map is processed.
Client-Side Image Maps
Client-Side image maps allow you to place the map coordinates for your image map right into your html page to be handled by the browser of the person viewing your page.
Advantage
1. They are faster and more reliable because all the calculations is performed on the client computer.
2. They are more user friendly as visitor movers the cursor over an image-map, the status bar generally displays the URL of the link.
3. Client-side Image Maps can be tested before placing them on the server.
Disadvantage1. The only disadvantage is that old browsers do not support Client-
side Image maps.
Creating Client-Side Image Maps
1. Defining the image area2. Creating the image map3. Activating the image map
Defining Image Area
All image are simply a combination of three shapes:
A. CirclesB. RectanglesC. Polygons (any shapes other then circles and rectangles)
In this step we define these three shapes in an image using any image-editing program.
2. Creating and Activating the Image Map
After creating the image area, we include tags and attributes that tell a browser what to do when a visitor clicks the defined map area. We can include this information in the same HTML document which contains the image or in other separate document.
Include following coding inside the <body> tag for client-side image map
<html><head><title>image map</title></head><body><img src="imagemap.jpg" alt="image map" usemap="#websites1">
<map name="websites1"><area shape="rect" coords="20,100,177,186" href="http://www.google.com" alt="home page of google" / >
<area shape="circle" coords="361,156,100" href="http://www.yahoo.com" alt="home page of google" / >
<area shape="polygon" coords="541,71,703,22,868,18,859,110,557,230" href="http://www.msn.com" alt="home page of google" / >
</map>
</body></html>
Server Side Image MapsThe process of making Server Side Image Maps is identical to client side maps. The only difference are in map file format. Each type of server can have a different type of image-map configuration.Only two main server –side map formats exist: NCSA (National Center for Supercomputing Applications) and CERN.
