23. Clickable Image Maps

Make different parts of an inline image hyper-active with Client-Side Image Maps...

Objectives

After this lesson you will be able to:

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

Note: If you do not have the working documents from the previous lessons, download a copy now. Also, you may want to first look at the test page to see of your browser supports the tags used in this 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".

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

Viewer sees page with clickable image map and... clicks on the part of it in the lower right hand corner.
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."
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.
Web browser says,"Okay! The server said go to this URL- Let's go!"

This is a server-side process; one that was pretty efficient and a web server could handle it in a split second. But it meant that to use clickable image maps one always had to have access to a web server.

Spyglass was the first browser 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! For more information about image maps, see the Imagemap Help Page (IHiP).

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

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

where image.gif is the file name of the image and map_name is an anchor link (see lesson 8d) elsewhere in the same HTML file:

  <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>

Each line in the <map>...</map> tag identifies a different "hot" region, specified by the coordinates, coords=. x1,y1 are the horizontal and vertical pixel locations for the upper left corner (relative to the upper left corner of the entire image), while x2,y2 are the horizontal and vertical pixel locations for the lower right corner. URL1, URL2, ... are the URLs (or file names for local files) that the region should correspond to when clicked.

NOTE: To identify the coordinates for the hot region you will have to use some sort of graphics program. The Image Map Help Page or 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.html) 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.

First, you will need to download a copy of the image file we are using from the Lesson 23 Image Studio. Save this file as volc.jpg and make sure that you store it in your pictures folder/subdirectory.
Open your term.html file in your text editor.
Below the last paragraph ("...a historically active volcano on the island of Martinique. "), add this HTML:
```
There are many different types of volcanic eruptions and landforms. 
They can be classified according to the 
<A HREF="explode.html">degree of "explosiveness"</A> 
and the <A HREF="height.html">height</A> of the eruption column:

<center>

Investigate each type by clicking on a picture
 
<img src="../pictures/volc.jpg" usemap="#volcmap" border=0>

</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.

We also have built in links to two new HTML documents that we will create below.

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="" 
   coords="48,46,204,153">
<area shape="rect" href="explode.html" 
   coords="0,66,26,227">
<area shape="rect" href="height.html" 
   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.swisseduc.ch/stromboli/" 
   coords="172,155,318,274">
<area shape="rect" href="http://hvo.wr.usgs.gov/volcanowatch/" 
   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.

Save your term.html file.

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.html">Index</A> / 
<A HREF="term.html">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 than a less explosive eruption.
<p>
<a href="term.html"> 
<img src="../pictures/left.gif" alt="** " border=0> 
Return to <i>Volcano Web</i></a>

<HR>
<ADDRESS>
<B><A HREF="index.html">Volcano Web</A> : 
<A HREF="term.html">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.html</tt>
<p>
</body>
</html>

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

Now create a second HTML document in your text editor and in it enter:


<html>
<head>
<title>Height of Eruption Column</title>
</head>

<BODY BGCOLOR=#000000 TEXT=#EEEEBB 
LINK=#44DDFF VLINK=#00FF88>
<H5>Volcano Web / 
<A HREF="index.html">Index</A> / 
<A HREF="term.html">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.html"> 
<img src="../pictures/left.gif" alt="** " border=0> 
Return to <i>Volcano Web</i></a>

<HR>
<ADDRESS>
<B><A HREF="index.html">Volcano Web</A> : 
<A HREF="term.html">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.html</tt>
<p>
</body>
</html>

Save this document in the same directory as your other HTML files and call it height.html
Now open the term.html 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.

You should compare your web page to this sample of how your clickable image page should look.

Covering Your Bases

A few years ago client-side image maps was a new development in HTML, and you had to allow for web browsers that did not support them. This is less the case now. Netscape's documentation provides some examples for handling this situation. If you have access to server-side image mapping, you can set it up so that if the browser does not support the client-side interpretation, it will then refer to the server.

All in all, it is better to use client-side image maps because it avoids extra communications from web browser to web server and back.

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:

First we will need to create a new HTML file called nomap.html. 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.html">Index</A> / 
<A HREF="term.html">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 
information by following these links:
<ul>
<li><A HREF="explode.html">Explosiveness</A>
<li><A HREF="height.html">Height of Eruption Column</A>
<p>
<li><A HREF="">Surtseyan</A>
<li><A HREF="http://www.geo.mtu.edu/volcanoes/santamaria/">Phreato-Plinian</A>
<li><A HREF="http://hvo.wr.usgs.gov/volcanowatch/">Hawaiian</A>
<li><A HREF="http://www.swisseduc.ch/stromboli/">Strombolian</A>
<li><A HREF="http://www.geo.mtu.edu/volcanoes/pinatubo/">Plinian</A>
</ul>
<p>
<a href="term.html"> 
<img src="../pictures/left.gif" alt="** " border=0> 
Return to<i>Volcano Web</i></a>

<HR>
<ADDRESS>
<B><A HREF="index.html">Volcano Web</A> : 
<A HREF="term.html">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.html</tt>
<p>
</body>
</html>

Save this file as nomap.html
NOTE: See how we have offered the viewer access to the same information that was available from the clickable image map. A good web page does not restrict someone from content simply because they are using a different web browser.
Now open up the term.html file in your text editor.
Find the line that looks like:
```
 <img src="../pictures/volc.jpg" usemap="#volcmap" border=0>
```
and replace it with
```
 <a href="nomap.html">
 <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.html page.
Save this file and then Reload it into your web browser.

Check Your Work

Compare your web pages with this sample of how it should appear. If your pages are different from the sample or the hypertext links do not work correctly, review the text you entered in the text editor.

Review

Review topics for this lesson:

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

More Information

For more information, we suggest you visit the Image Map Help Page or Imagemap Authoring Guide and Tutorial Sites

Independent Practice

Identify a place in your web pages where a clickable image map would add to the interactivity or navigation of your design. Don't just throw one in for the sake of having one in there! You will have to do some work to identify the "hot" regions (you could guess if you are really desperate). Following the example in this lesson, write the HTML for the clickable image.

Coming Next....

Adding META tags to the HEAD for your pages... Why? Stay tuned!

GO TO.... | Lesson Index | previous: "More for Images and Lists" | next: "META tags" |

Writing HTML: Lesson 23: Clickable Image Maps
©1994-1999 Maricopa Center for Learning and Instruction (MCLI)
Maricopa Community Colleges

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