Testing the Image
Before saving the maps file, it is best to test it.
Activate the image test with the button on the far right it of the toolbar. click on it; a new window is displayed with the image map. Run the cursor over the image areas and notice that, as you pass over the mapped areas, the URL which was associated with it appears in the status bar at the foot of the page.
An example appears in the following illustration:
To end the test, press Done.
Image Map Formats
There are currently three map file standards: NCSA, CERN, and CSIM.
NCSA and CERN are used to create server side type image maps and consists of text files separate from the HTML page. The CSIM standard is used to create client side type image maps and consists of text which is part of an HTML page.
In the case of server-side maps, it is important to know which of the two standards is used by the server that will store the image map. The most common format is NCSA.
See the typical format of a file of this type:
#comment
text URL x 1,y1 x2,y2
circle URL cx,cy x1,y1
poly URL x1,y1 x2,y2 x3,y3...
The lines starting with the symbol # are comment lines and are not executed by the server.
The lines starting with the word Rect contain data referring to a rectangle image. This contains the associated URL and four coordinates that are used to define the rectangular area.
The lines starting with the word circle indicate the definition of a circular area. Besides the URL, they contain two pairs of coordinates. The first corresponds to the centre of the circle and the second to any point of the edge.
The lines starting with the word poly indicate the definition of an irregular or polygonal area. Besides the URL, they show coordinates pairs corresponding to each vertex of the figure.
The CERN format is shown next:
rect (x1,y1) (x2,y2) URL
rectangle (x1,y1) (x2,y2) URL
circ (cx,cy) r URL
circle (cx,cy) r URL
poly (x1,y1) (xn,yn) URL
polygon (x1,y1) (xn,yn) URL
It allows the abbreviation or complete use of the words corresponding to the type of area (rect, circ, poly, or rectangle, circle, polygon). The difference between this format and NCSA is in the inversion of the position of the URL and the coordinates. This format does not allow inclusion of comments.
Saving the Image
To save the image, use the File|Save menu or press the toolbar button with the figure of a diskette. A dialogue box is displayed.
After entering the URL of the HTML program and the NCSA type, press the OK button.
In the next dialog box, enter a name for the map file. In this example, we created a name identical to the GIF image to make the association of these images easier.
The file generated has the .map extension. See below the result of the work contained in the map1jr.map file:
#$MTIMFH
#$-: Image Map file created by Map THIS!
#$-: Map THIS! free image map editor by Todd C Wilson
#$-: Please do not edit lines starting with "#$"
#$VERSION: 1.30
#$TITLE: Demo server side
#$AUTHOR: Sourabh Kumar
#$DATE: Wed Jun 10 17:42:02 1998
#$PATH:D:\CD\Htmladv\IMGMAP\
#$GIF: Map1jr.gif
#$FORMAT: ncsa
#$EOH
default http://www.sktech2022.blogspot.com.br/examp15b.htm
poly http://www.sktech2022.blogspot.com.br/triang.htm 112,82 152,24 192,81 112,82
circle http://www.sktech2022.blogspot.com.br/circle.htm 108,82 108,117
rect http://www.sktech2022.blogspot.com.br/square.htm 36,18 100,75
Note that it has several comment lines and four lines indicating the standard URL and the coordinates of the three areas are defined. Also note that they appear in the order in which the areas were created. Because of this, when clicking on the area of the circles superimposed on the rectangle, the URL of the circle is activated, as it is found first.
Now let's create the examp15b.htm page. The source code of this page is listed below:
<html>
<head>
<title>Clickable image maps</title>
</head>
<body>
<h2>This image is an image map</h2>
<a href="/cgi-bin/imagemap/map1jr.map"><img src="map1jr.gif" ISMAP></a>
<p>
Click one of the figures and a new page will be displayed. Note that, when passing the cursor over the figure, the cursor coordinates appear in the status line. The program in the server, which has the configuration data of this image, will indicate what procedure should be activated when a certain coordinates is pressed.
</body>
</html>
The most important line is that containing the link to the image map. The address /cgi-bin/imagemap was obtained from the provider of the page. Notice that the <IMG> command has the name of the GIF image used as background and the ISMAP parameter indicates that it is an image map. Without this parameter, the image map will not work. This program at the address shown on the next screen.
Here is the result of this program:
Upon passing the cursor over the figure, you will notice that the browser status bar shows the coordinates of the cursor as part of the URL of the map1jr.map map file. Click on the middle of the triangle, and a new page will be displayed, corresponding to the contents of the map file. Of course, you must be online in order to do this. See what it looks like in the following illustration:
To return to the previous page, click on the browser back or return button.
Disadvantages of Using Image Maps
Without a doubt, an image map lends a professional touch to your page. However, you should consider that its use is problematic when a user has a non graphic browser. He simply will not be able to access the image and your links. In this case, it is recommended that text hyperlinks be provided to access the URLs of the image map. The following example shows a page from the site of national geographic magazine, where a world map contains links to the continents. At the bottom of the page is a list of links that can also be used to access the regions.
This technique is useful even for users with graphic browsers. When the net is too slow, the user can click on the text link without having to wait for the image to be fully loaded.
Share This Post
PRINT THIS POST
No comments:
Post a Comment
If you have any doubts. Please let me know.