Writing HTML | About | FAQ | Alumni | Tags | Index | back |

23. Clickable Image Maps

Objectives

• Understand the difference between server-side and client-side processes
• Create an inline image that has different portions hyperlinked to other web pages, pictures, and other sites on the Internet

Lesson

In lesson 7a we learned how to write the HTML to place an inline image in our page and in lesson 8e we saw how we could make the entire picture act as a hyperlink to some other related item. Since the early days of the web, there has been a way to have different parts of an inline image be hyperlinked-- known as a "clickable image map". One of our favorite examples was the Hall of Dinosaurs from the Berkeley Paleontology museum.

But until recently, the clickable image maps required that some things be processed from the web server. This is how it worked:

1. Viewer sees page with clickable image map and... clicks on the part of it in the lower right hand corner.
2. Web browser says, "Hey! I got a mouseclick in this image! Gotta send a message to the web server- Someone clicked at these coordinates of this image."
3. The web server says."Hmmm. I got these coordinates for this image- The HTML file it was called from says look up the coordinates in this file... Okay, the file says, if the coordinates are in this rectangular region, then send the viewer to this URL" The server then returns this information to the web browser.
4. Web browser says,"Okay! The server said go to this URL- Let's go!"

NetScape's Navigator 2.0 browser was one of the first built with the capability to handle the calculations and transmit the proper URL based upon coordinates that were built inside the HTML for a page. This is a client-side process. That entire conversation above now takes place just between the browser and itself!

The HTML needed for a client-side clickable image map is:

  <img src="image.gif" usemap="#map_name">

  <map name="map_name">
  <area shape="rect" coords="x1,y1,x2,y2" HREF=URL1>
  <area shape="rect" coords="x1,y1,x2,y2" HREF=URL2>
         :
         :
   </map>

NOTE: To identify the coordinates for the hot region you will have to use some sort of graphics program. Yahoo lists several other utility programs that make this easy to do. For this lesson, we will be providing the exact coordinates for you.

In this lesson we are going to add to our Volcano Terminology page (file term.htm) a picture showing different kinds of volcanic eruptions. Each one will be hyperlinked to an external web site. In addition we will create two more links to our own (local) files.

1. First, you will need to download a copy of the image file we are using. If you need help, refer to the instructions for downloading graphics files. When you are ready, use the link below to view/download the image:

   volcano types image

   Save this file as volc.jpg and make sure that you store it in your pictures folder/subdirectory.

2. Open your term.htm file in your text editor.

3. Below the last paragraph ("...a historically active volcano on the island of Martinique. <p>"), add this HTML:

   There are many different types of volcanic eruptions and 
   landforms. They can be classified according to the degree 
   of "explosiveness" and the height of the eruption column:
   <p>
   <center>
   <font size=+2>
   Investigate each type by clicking on a picture
   </font><br>
   <img src="../pictures/volc.jpg" usemap="#volcmap" border=0>
   <p>
   </center>
   

   NOTE: We have inserted an inline image that will reference a set of coordinates associated with the name "volcmap". The <center>...</center> tag aligns the image in the middle of the page (see lesson 20). The border=0 attribute inside the <img> tag suppresses the display of a hypertext box around the image.

4. Next we will add the HTML for the map coordinates. This can be placed anywhere within the HTML document- it is HTML that is not displayed in the web browser. We suggest just adding it below the HTML you added in the previous step:

   <map name="volcmap">
   <area shape="rect"
    href="http://volcano.und.nodak.edu/vwdocs/frequent_questions/grp7/europe/question308.htm" 
      coords="48,46,204,153">
   <area shape="rect" href="explode.htm" 
      coords="0,66,26,227">
   <area shape="rect" href="height.htm" 
      coords="95,283,378,309">
   <area shape="rect" href="http://www.geo.mtu.edu/volcanoes/pinatubo/"  
      coords="321,154,468,261">
   <area shape="rect" href="http://www.geo.mtu.edu/~boris/STROMBOLI_main.htm" 
      coords="172,155,318,274">
   <area shape="rect" href="http://www.soest.hawaii.edu/hvo/" 
      coords="36,155,168,276">
   <area shape="rect" href="http://www.geo.mtu.edu/volcanoes/santamaria/" 
      coords="90,3,343,123">
   </map>

   NOTE: You should see that 5 of the 7 defined areas connect to remote internet sites. The two others are local documents that we will create in the next step.

5. Save your term.htm file.

6. We now have to create two more HTML files that will be linked from the image map. Create a new document in your text editor and place in it:

   <html>
   <head>
   <title>Explosiveness</title>
   </head>
   <BODY BGCOLOR=#000000 TEXT=#EEEEBB 
   LINK=#44DDFF VLINK=#00FF88>
   <H5>Volcano Web / 
   <A HREF="index.htm">Index</A> / 
   <A HREF="term.htm">Volcano Terminology</A> / 
   </H5>
   
   <h1 align=center>Explosiveness</h1>
   The <b>explosiveness</b> of an observed volcanic 
   eruption is estimated by the calculated force of 
   the eruption. Experiments have shown that when water 
   comes in contact with hot magma, the eruption is 
   much stronger- this is known as <b>hydro-volcanism</b>.
   <p>
   For pre-historic eruptions, the explosiveness is estimated 
   by the degree of fragmentation of small volcanic particles. 
   A more explosive eruption will "shatter" volcanic tephra 
   much more then a less explosive eruption.
   <p>
   <a href="term.htm"> 
   <img src="../pictures/left.gif" alt="** " border=0> 
   Return to <i>Volcano Web</i></a>
   
   <HR>
   <ADDRESS>
   <B><A HREF="index.htm">Volcano Web</A> : 
   <A HREF="term.htm">Volcano Terminology</A> : 
   Explosiveness</B> <p>
   
   created by Lorrie Lava, 
   <A HREF="mailto:lava@pele.bigu.edu">
   lava@pele.bigu.edu</A><br>
   Volcanic Studies, <A HREF="http://www.bigu.edu/">
   Big University</A><p>
   <TT>last modified: April 1, 1995</TT>
   </ADDRESS>
   <p>
   <tt>URL: http://www.bigu.edu/web/explode.htm</tt>
   <p>
   </body>
   </html>
   

   Save this document in the same directory as your other HTML files and call it explode.htm

7. Now create a second blank document and in it put:

   <html>
   <head>
   <title>Height of Eruption Column</title>
   </head>
   
   <BODY BGCOLOR=#000000 TEXT=#EEEEBB 
   LINK=#44DDFF VLINK=#00FF88>
   <H5>Volcano Web / 
   <A HREF="index.htm">Index</A> / 
   <A HREF="term.htm">Volcano Terminology</A> / 
   </H5>
   
   <h1 align=center>Height of Eruption Column</h1>
   The <b>height</b> of a volcanic eruption cloud 
   (in kilometers) is taken from direct observation 
   or from estimates based upon historic accounts. 
   <p>
   For pre-historic eruptions, this scale is calculated 
   based upon the <b>dispersal</b> of the volcanic products- 
   i.e how far and wide they are scattered. Volcanic 
   eruptions that have very tall columns will spread 
   tephra far and wide.
   <p>
   <a href="term.htm"> 
   <img src="../pictures/left.gif" alt="** " border=0> 
   Return to <i>Volcano Web</i></a>
   
   <HR>
   <ADDRESS>
   <B><A HREF="index.htm">Volcano Web</A> : 
   <A HREF="term.htm">Volcano Terminology</A> : 
   Height of Eruption Column</B> <p>
   
   created by Lorrie Lava, 
   <A HREF="mailto:lava@pele.bigu.edu">
   lava@pele.bigu.edu</A><br>
   Volcanic Studies, 
   <A HREF="http://www.bigu.edu/">
   Big University</A><p>
   <TT>last modified: April 1, 1995</TT>
   </ADDRESS>
   <p>
   <tt>URL: http://www.bigu.edu/web/height.htm</tt>
   <p>
   </body>
   </html>
   

   Save this document in the same directory as your other HTML files and call it height.htm

8. Now open the term.htm file in your web browser. The image of the different volcanoes should appear and as you move the mouse over the different regions of the image, the cursor should change to a "hand" and somewhere in the bottom of the web browser window, there should be an indicator of the URL the "hot" region will link to when clicked.

Covering Your Bases

For our case we can set up a special page that has a message for web browsers that do not support client-side image maps:

1. First we will need to create a new HTML file called nomap.htm. Open a new file in your text editor and in it put:

   <html>
   <head>
   <title>No Image Map Available</title>
   </head>
   <BODY BGCOLOR = #000000 TEXT=#EEEEBB 
   LINK=#44DDFF VLINK=#00FF88>
   <H5>Volcano Web / 
   <A HREF="index.htm">Index</A> / 
   <A HREF="term.htm">Volcano Terminology</A> / 
   </H5>
   
   <h1 align=center>Sorry!</h1>
   Apparently your web browser does not support 
   client-side image maps. You can still reach the 
   nformation by following these links:
   <ul>
   <li><A HREF="explode.htm">Explosiveness</A>
   <li><A HREF="height.htm">Height of Eruption Column</A>
   <p>
   <li><A HREF="http://volcano.und.nodak.edu/vwdocs/frequent_questions/grp7/europe/question308.htm">Surtseyan</A>
   <li><A HREF="http://www.geo.mtu.edu/volcanoes/santamaria/">Phreato-Plinian</A>
   <li><A HREF="http://www.soest.hawaii.edu/hvo/">Hawaiian</A>
   <li><A HREF="http://www.geo.mtu.edu/~boris/STROMBOLI_main.htm">Strombolian</A>
   <li><A HREF="http://www.geo.mtu.edu/volcanoes/pinatubo/">Plinian</A>
   </ul>
   <p>
   <a href="term.htm"> 
   <img src="../pictures/left.gif" alt="** " border=0> 
   Return to<i>Volcano Web</i></a>
   
   <HR>
   <ADDRESS>
   <B><A HREF="index.htm">Volcano Web</A> : 
   <A HREF="term.htm">Volcano Terminology</A> : 
   No Image Map</B> <p>
   
   created by Lorrie Lava, 
   <A HREF="mailto:lava@pele.bigu.edu">
   lava@pele.bigu.edu</A><br>
   Volcanic Studies, 
   <A HREF="http://www.bigu.edu/">Big University</A><p>
   <TT>last modified: April 1, 1995</TT>
   </ADDRESS>
   <p>
   <tt>URL: http://www.bigu.edu/web/nomap.htm</tt>
   <p>
   </body>
   </html>

   Save this file as nomap.htm

   NOTE: See how we have offered the viewer access to the same information that was available from clickable image map. A good web page does not restrict someone from content simply because they are using a different web browser.

2. Now open up the term.htm file in your text editor.

3. Find the line that looks like:

     <img src="../pictures/volc.jpg" usemap="#volcmap" border=0>

   and replace it with

     <a href="nomap.htm">
     <img src="../pictures/volc.jpg" usemap="#volcmap" border=0>
     </a>

   NOTE: You should be able to dissect this HTML- if the web browser can understand client-side image maps, it does so, Otherwise, the whole image is hyperlinked to the nomap.htm page.

4. Save this file and then Reload it into your web browser.

Check Your Work

Review

1. What is the difference between client-side image mapping and server-side image-mapping?
2. What does the <map>...</map> tag do?
3. How can you handle cases where a web browser does not understand client-side image mapping?

More Information

  <img src="../pictures/buttonbar.gif" usemap="maps.htm#bmap3">

Let's say you are creating several (or many) pages that will have at the top of the page an image of some buttons that are hyperlinked to different web pages. If you use this method, you could reference just one image file and one file that contains the coordinates. If you ever have to update your navigation bar (a new graphic? a change in the URL for one of the buttons?) then you need only modify one file! compared to modifying <map>...</map> tags if they were inserted into every web page that used the button bar.

Independent Practice

Coming Next....

GO TO.... | Lesson Index | back: "Tables" |

URL: http://www.mcli.dist.maricopa.edu/tut/tut23.htm