*Episode 16.1* HTML (Server-Side Image Maps)

     

       In the Episode 1 of this series, you learned that it is possible to use an image as a hyperlink in place of the text specified in the <A HREF> command. When you click on the image used as the hyperlink, you automatically load the URL specified by the <A HREF> command. With the image map feature, you can use a single image to access several distinct URLs.

     An image map can be defined as an image in which the area or surface is divided into regions. Each region is associated with a specific URL that is accessed when the user clicks on the limits of the area associated with the URL.

Types of Image Maps

    Server-side-- This type of image map has the advantage of working with practically any browser. It uses a parameter file that is resident in the web server of the page being associated. When the HTML page image is clicked upon, the position of the image which received the click and the name of the parameter file to be used is sent to the server the parameter file is used to check which URL should be associated with the position that was passed.

   Client-side-- This new type of image map offers advantages in relation to the server-side type. The first advantage is the fact that all the information needed to access another page is in one place; there is no traffic on the net to send or receive information related to the URLs that will be accessed. The second region is that the author of the page can immediately the and directly test the page. However, the major disadvantage of this method is that older browsers don't support it.

Creating a Server-side Image Map

     Like forms, using server-side image maps involves not only the use of HTML commands, but the collaboration of other programs to create the image. It also requires the use of a special program which is responsible, at the page server, for managing the image. The basic steps of how an image map works are the following:

1. The client's computer displays the page having a GIF image aaj embedded with the <IMG> command and the ISMAP parameter. 
2. The image map is associated with a special URL in the server corresponding to the file controlling the image, a map file. This file is nothing more than a text file which stores the URLs associated with the image map, as well as the coordinates of the image regions which are associated with the URL.
3. When you click on the image, the coordinates corresponding to the cursor position when the mouse button was breast are passed to the server. The server accesses the map file specified by the <A HREF> command of the image map and checks the region to which the coordinates passed belong. Next, it directs the client to the URL associated with that image.
4. The URL is opened.

       To create a server-side type image map, these steps are necessary:

1. Create the GIF image that will be used as a base for the image map.  
2. Create the map file associated with the GIF image.
3. Create the appropriate commands in the HTML page to access the map file.
4. Place the map file in the server.

Creating the Background Image:-

      The base image, or background image, can be created with any program that generates the GIF or JPG formats. You can use any type of image handled by the browser as an image map. It may be a scanned photograph, a drawing, or artwork. The ideal format is GIF, but JPG may also be used. In this example, we created a very simple image with the paint shop Pro program, containing three superimposed geometrical figures. The image created is called map1jr.gif and is found in the CD's imgmap directory.

Creating the Map File:-

     See the basic steps for using the server side type image map feature using the Map This! program which is on the companion CD.

Creating the Image Map:-

     The next step consists of the creation of the image map. Each image map created must have a corresponding map file resident in a special directory of the page server. For this example, we used the Map This! program.

       The following figures show the Map This! program:

         Through file menu, we activate the new option, which brings up a dialog box advising that it is necessary to choose a GIF or JPG image to serve as background for the image map.

       After pressing OK, we select the imgmap directory and choose the map1jr figure:

      The next figure shows the loaded image and the main screen of Map This!. Some of its main buttons are explained below.

       In this example, we want to Mark each geometrical figure as a distinct area, so that when clicking on one of them, The reader will receive a new page indicating which figure was clicked. Note that the figures are superimposed, that is, the triangle is over the circle, which is over the square. In these situations, it is necessary to establish an order of creation of the figures. The figure having priority Over The other should be specified first. In this case, we will start with the triangle and follow with the circle and the rectangle.

      The lines containing the coordinates also contain the name of the URL associated with them and the type of area they represent.

      You can also create this file the hard way. Use an image editing program that allows viewing the cursor position and manually mark this data. A rectangle,  specified by the keyword RECT, must contain at least the coordinates of the top left corner and the bottom right corner. A circle (CIRCLE) must contain at least a pair of coordinates corresponding to the centre of the figure and to one point of its edge. A polygon, identified by the keyword POLY, must contain the coordinates of all its vertices, as shown in the next figure.

     Knowing these coordinates, you can even create a map file by hand, as it is made up of a line for each figure and the specification of its coordinates.

     My suggestion is that you use a program like Map This! and save your self a lot of work.

     We will start with the triangle. Click on the polygon tool and then on the bottom left corner of the triangle. The cursor figure changes shape. Next, move the cursor to the top of the triangle, as shown in the next figure.

        Depending on the size or shape of the figure, it may be necessary to create numerous vertices for the polygon. There is a zoom feature that makes it easier to you view the points. To use this, however, we must interrupt our work by pressing the right mouse button.

      After increasing the zoom, select the polygon tool again and click on the bottom left vertex of the triangle, releasing the button after clicking. Upon reaching the top vertex with the cursor, click again to mark that position. Next, move to the bottom right corner of the triangle, click again, and take the cursor to the initial marking point to close the triangle area. click. If you clicked on the right spot, the outlined area will be highlighted as shown in the next figure.

       If this doesn't happen, it means you didn't "close" the area, that is, you clicked near but not on the starting point. If this happened, the program will assume that you are drawing an irregular figure. In this situation, it is best to cancel what has been done by pressing the right mouse button and start over.

       To mark the circle area, click on the circle tool, click on the centre of the figure, and move the mouse until you reach the edge of the circle, as shown in the next figure.

      Unless you hit the centre of the figure exactly, which is difficult, your circle will be uneven. You can press the right mouse button to restart the marking. Otherwise, leave it as is--- you don't need to be a perfectionist here. When clicking on the image map, it will be very difficult for a user not to hit the figure he wishes to click on.

     Now we will mark the rectangle area. This is easy. After clicking on the rectangle tool, click on the top left corner of the rectangle and move the mouse to the bottom right corner. Although this corner of the figure is hidden by the circle, you can Orient yourself by lining up the bottom and right edges.

     See the following figure:

Associated a URL with the Area:-

       After having created the three areas, you need to associate each one with the address of the page or object their will be accessed when the area is clicked.

      See the following figure:

       The quickest way of creating this association is to click the cursor button on the the toolbar and click on the desired area with the right mouse button. This opens a click menu; select edit area info.

       It displays the following dialog box in which the complete URL address associated with the image should be entered. Enter the complete address of the URL when you are creating a server side type image map.

       Repeat this operation for the other two images, using the following addresses:

👈Episode 15.                                                                                      Episode 16.2👉

Share This Post

PRINT THIS POST