*Episode 17* HTML (Client-side Image Maps)

    

 

     The use of client side image maps is much more practical than the server side type, as everything required to activate a URL is in the HTML page. The coordinates and the URLs associated with the background image are incorporated in the HTML document. Below is the structure of the client side image map:

 <MAP NAME=#map_name">

 <AREA SHAPE=type COORDS="position" HREF="link" TARGET="name">

 </MAP>

  All the commands of a client-side mapped image should be enclosed by the <MAP> </MAP> Commands.

    The <MAP> command should contain the the NAME parameter associated with the image map, which should begin with the the # sign, as as if it were an anchor.

    The HTML document should contain, outside the <MAP> command area, the <IMG> command specifying the background figure name and the USEMAP parameter followed by the map name. The # sign should precede the the map name.

 <IMG SRC="pic.gif" USEMAP="#brazil">

    Each area defined should be specified by the <AREA SHAPE> command, which should indicate the type of area such as RECT, CIRCLE or POLY. A fourth type, called DEFAULT, it can be used to define a URL which is activated in the event the user presses an image area that was not mapped. If you wish to use a frame structure, you may use the TARGET parameter to specify the window which will be used to display the URL being loaded.

Creating Client side Image Maps

     Use the map this! Program how to create a client side image map, following the same steps for creating the server side image map. The difference between the two task will appear only when you define the URL of each area and in the type of map that will be created.

     After opening the map this! Program, activate the File|New option and loaded the map1jr image, which is in the the imgmap directory of the CD or your hard drive, as shown next:

       Mark the three areas as we did in the previous episode, and, for each one of them, enter the address of the pages shown next. Note that only the page name is entered, as they are found in the the same directory in which the map will be created.

     Test the map to see if everything is right.

Changing the Order of the Areas

      Although not necessary in this case, sometimes image aaj areas are created in the wrong order when there are figures with several overlapping areas. If this happens, correcting the order is simple. Click on the show area list button.

      It opens a panel where the order of the areas is shown. To move an area in the execution order, just select the area in the list and press the up aur down arrows. In the above figure, area 3, the square, is selected. If you wanted to change the order, you would press the up arrow to place it in second place. However, don't execute this operation for our example! Press the show area list button again to close this panel.

Saving the Client side Map

     Activate the File|Save menu or press the button with the diskette figure. In the dialog box, enter the data shown in the the next figure.

     Note that we entered the name CS.HTM as the standard URL and selected the CSIM format. Press ok; the program will ask for the name of the HTML file to be created. Enter CS.HTM  and press save. Below is the result of the program generated, which is called cs.htm.

 <MAP NAME="democlient">

 <!-- #$-: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 -->

 <!-- #$AUTHOR:Sourabh Kumar -->

 <!-- #$DATE:Wed June 10 19:06:23 1998 -->

 <!-- #$PATH:D:\CD\Htmladv\IMGMAP\ -->

 <!-- #$GIF:Map1jr.gif -->

 <AREA SHAPE=POLY COORDS="112,82,152,24,192,82,112,82" HREF="traing.htm">

 <AREA SHAPE=CIRCLE COORDS="108,81,36" HREF="circle.htm">

 <AREA SHAPE=RECT COORDS="35,17,101,74" HREF="square.htm">

 <AREA SHAPE=default HREF="cs.htm">

 </MAP>

  An HTML program is generated only with the map definition area. For the program to work correctly, it is necessary to complete it with the commands that are sound in bold in the following listing.

 <html>

 <BODY>

 <IMG SRC="map1jr.gif" USEMAP="#democlient">

 <MAP NAME="democlient">

 <!-- #$-: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 -->

 <!-- #$AUTHOR:Sourabh Kumar -->

 <!-- #$DATE:Wed June 10 19:06:23 1998 -->

 <!-- #$PATH:D:\CD\Htmladv\IMGMAP\ -->

 <!-- #$GIF:Map1jr.gif -->

 <AREA SHAPE=POLY COORDS="112,82,152,24,192,82,112,82" HREF="traing.htm">

 <AREA SHAPE=CIRCLE COORDS="108,81,36" HREF="circle.htm">

 <AREA SHAPE=RECT COORDS="35,17,101,74" HREF="square.htm">

 <AREA SHAPE=default HREF="cs.htm">

 </MAP>

 </BODY>

 </html>

   Next to the <HTML> </HTML> Commands, the <IMG> command is the most important. It indicates the background image and, with the USEMAP parameter, indicates the name of the image map that will be used for that figure.

     See the executed program:

Multiple Image Maps

      You can create several image maps within a page. Just create the map definitions and insert the appropriate command for the background image. The cs3.htm document source two image maps in a single page. We also show the standard behaviour of Netscape navigator and Internet Explorer 4.0 navigator allows you to create a standard page which is called when the user clicks outside of the mapped figure. Notice that in the first map, if a click is made outside one of the figures, the page cs3.htm will be loaded. In the second example, a page advising the error is displayed.

 <html>

 <TITLE>CS3.HTM MULTIPLE MAPS</TITLE>

 <BODY>

 <IMG SRC="map1jr.gif" USEMAP="#democlient">

 <hr>

 <IMG SRC="map2jr.gif" USEMAP="#secondmap">

 <MAP NAME="democlient">

 <!-- #$-: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 -->

 <!-- #$AUTHOR:Sourabh Kumar -->

 <!-- #$DATE:Wed June 10 19:06:23 1998 -->

 <!-- #$PATH:D:\CD\Htmladv\IMGMAP\ -->

 <!-- #$GIF:Map1jr.gif -->

 <AREA SHAPE=POLY COORDS="112,82,152,24,192,82,112,82" HREF="traing.htm">

 <AREA SHAPE=CIRCLE COORDS="108,81,36" HREF="circle.htm">

 <AREA SHAPE=RECT COORDS="35,17,101,74" HREF="square.htm">

 <AREA SHAPE=default HREF="cs.htm">

 </MAP>

 <MAP NAME="secondmap">

 <!-- #$-: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 -->

 <!-- #$DATE:Fri May 31 06:23:30 1998 -->

 <!-- #$PATH:D:\Htmladv\IMGMAP\ -->

 <!-- #$GIF:Map2jr.gif -->

 <AREA SHAPE=RECT COORDS="21,23,102,66" HREF="square.htm">

 <AREA SHAPE=CIRCLE COORDS="142,47,23" HREF="circle.htm">

 <AREA SHAPE=POLY COORDS="193,52,193,23,221,24,241,50,211,72,193,49,193,52" HREF="polygon.htm">

 <AREA SHAPE=default HREF="error.htm">

 </MAP>

 </BODY>

 </html>

  The next two figures show so how this program works. Internet Explorer doesn't have this feature.

    Note that when passing the cursor over the non mapped area using Netscape, the URL of the error.htm program appears, which is activated by the click of the mouse. Internet Explorer 4.0 does not show anything in this situation.

     The rest of this episode contains a project demonstrating mapped images. This is a useful feature, but don't abuse it. Always remember that the more images your page has, the slower it is to access.

A Project with Mapped Images

      The Brazil folder on the companion CD has a a personal project of a page about Brazil. The initial page is called Brazil.htm (yes, Brazil with an "s"). It shows geographical data about the country and a map highlighting the countries different regions.

    A new page is activated when a click is made on the north region (norte), thanks to the client side mapped image feature. In this page, the user can click on one of the states to obtain more information about it or select the hyperlink. (In this example, the hyperlink only e functions for the state of amazonas.)

     As an example, click on the state of amazonas (Amazon). A screen with details about the state is displayed:

     The remaining states of Brazil, all the mapped in the initial page, do not actually contain the image corresponding to their states:

    

      Note that the state of Sao Paulo has a hyperlink which, if clicked, eccesses the page of this state.

     With what you have learned so far, creating a project like this one is not difficult, only time consuming.

     Here is how we did this part of the project. The pages about Brazil and the states where are obtained from Embratur's site. The mapareg.gif image contains the map of Brazil divided into regions. Using the map this! Program, we created a CSIM image map, which was used in the Brazil.htm page. We also obtained the files of the regions norte.htm, centrooeste.htm, and the rest from Embratur's site and changed them. They did not originally contain images, just text.

     Using the paint shop Pro 4 program (or any other image editing program), we loaded the mapareg.gif file and selected and cut out the north region, as shown in the next figure:

     Next, we used the Edit|Paste menu with as new image to create a new image of the north region.

     Now, see what the cutout figure looks like:

      The next step was to clean up the figure. To do this, we choose the white background colour. Using the airbrush and fill tools, we raised the lines and the other colours.

     Next, using the text tool, we put in the names of the states:

    Finally, we saved the file with the name Notre.gif.

    The next step was the creation of the CSIM type map file, establishing and area for each state:

     This file was saved with the name nortemapa.htm. the last step was to blend the content of the nortemapa.htm file with the norte.htm file:

     This system now allows navigation through maps of all regions of Brazil. As you can see, creating HTML pages more than HTML language programming; it is necessary to now the other tools to be able to create attractive and interesting pages.

    Complete this project. Include hyperlink to the Bahia.htm file linking the world Bahia in the nordeste.htm file. Do the same in the soul.htm file, creating a link to the the Parana state (parana.htm file) using the word Parana as the link. Also include in the sudeste.htm the map of that regions (sudeste.jpg).

👈Episode 16.2.                                                                                      Episode 18👉

Share This Post

PRINT THIS POST