Fragments, Imagemaps, and Targets

Topics

Fragments (named locations in files) and Extended URLs that link to them.
Imagemaps (images with clickable regions)
Targets, or opening a link in a new window.

Extended URLs

Sometimes, you'll see a URL like this:

http://puma.wellesley.edu/~cs110/lectures/L04-imagemaps/index.html#maps

The part after the pound sign, #, is optional. When it's there, it indicates a particular place within the index.html file. This place is technically called a fragment. How do you specify the place? You have to name it. You'll notice that computers always name things: names for machines, names for directories, names for files, names for printers, names for tags, names for attributes, and so forth. It's exhausting, but computer scientists haven't been able to figure out a good way to use phrases like "the computer in SCI 207" or "the next to the last part of the file." Also, names are shorter than those phrases.

How do you name a place in a file (the fragment)? Strangely enough, the anchor tag is used. So, to name the next section "maps," I put the following in this file (you can use View Source to check):

    <a name="maps">Image Maps</a>

A modern alternative is to put the ID attribute on a tag:

    <h2 id="maps">Image Maps</h2>

Notice that this anchor tag doesn't have an HREF attribute! It's the "head" of the arrow, not the tail. If you click on the URL earlier, the one that ends with index.html#maps, it'll take you to the fragment named "maps," which is below in this very web page.

Exercise 0

Save this simple web page to your desktop using your web browser's "File" "Save As" menu item. Then open it with TextWrangler. You'll notice that the page has three long sections. Add three named fragments and add hyperlinks so that you can rotate among the three fragments. (A solution is available at the end of this page, but try it yourself first.) Isn't that fun?

A popular use for these extended URLs is to have a "table of contents" at the top of a long page, with hyperlinks to sections of the page. (Click here for an example of a page table of contents .) You should know that some usability experts suggest that you Avoid Within-Page Links. Do you agree?

Image Maps

Lots of interesting web sites have image maps: a picture where parts of the image are hyperlinks to other web pages. Some things to note:

Imagemaps are useful when there is a natural connection between an image and the navigational structure of a set of pages, and
They can add visual interest to links, but
It's not always obvious when an image contains links, and
The boundaries between links are sometimes invisible, and are not always aligned well with the image.

Here's an example. Click on the regions to try it out. (Note that this is a PNG file, which some old browsers don't support.)

an example imagemap, two circles, a rectangle and a triangle Nose
Left Eye
Right Eye
Head
Background

This is done simply by adding a USEMAP attribute to the IMG tag, with the value being the URL of a "map." Usually, the map is put in the same document as the image, so a relative URL works best. If the map is named FRED, the relative URL is "#FRED"; remember what we just learned about extended URLS!

<img src="mouse.png" usemap="#mouse"
     alt="example imagemap, two circles, a rectangle and a triangle">

Here's what the code for the map looks like. Note how it is named and how each clickable area is described.

<map name="mouse">
<area alt="its nose"
      shape="poly"
      coords="112,89,93,128,129,128"
      href="nose.html">
<area alt="its left eye"
      shape="circle"
      coords="50,50,40"
      href="left-eye.html">
<area alt="its right eye"
      shape="circle" 
      coords="170,50,40"
      href="right-eye.html">
<area alt="its head"
      shape="rect" 
      coords="50,50,170,148"
      href="head.html">
<area alt="the background"
      shape="default"
      href="background.html">
</map>

Note that, as with the IMG tag, you should always include an ALT attribute to help people with alternative browsers.

The SHAPE attribute works as follows:

RECT is a rectangle; give the coordinates of the upper left and lower right corners.
CIRCLE is a circle; give the coordinates of the center and the length of the radius (in pixels).
POLY is a polygon; give the coordinates of each vertex.
DEFAULT is the background of the image; needs no coordinates.

Exercise 1

Click on this imagemap demo. Experiment with it a little and do the first exercise described in that file.

Coordinates

Almost all computer graphics use a coordinate system that is different from the norm.

The origin is in the upper left.
The positive x direction is to the right.
The positive y direction is DOWN, DOWN, DOWN.

Q: How do I find out the coordinates of a point on an image?

A: One way is to use Fireworks. In the "Info" window, you will see, among other information, the co-ordinates, X and Y, of the point of your mouse. Another way way is to look at the image using GraphicConverter and put your mouse over the place that you're interested in. The coordinates are displayed in a small window.

Exercise 2

Return to the Imagemap Demo file from the previous exercise and do the second exercise described there. This will involve saving the HTML file and the image to your desktop. You can download the image file to your desktop by using your browser: click and hold the mouse button on the image and a menu will pop up; choose "save this image as..." and save it to the desktop.

It's important to remember that you're not changing the picture: the picture looks just the same as always. What you're changing is the map: what happens when you click on various areas of the picture. The map is essentially an overlay on top of the picture.

Accessibility and Imagemaps

Imagemaps generally pose a problem for blind users, so you should avoid imagemaps for crucial navigation links. Whenever possible, you should provide a purely textual alternative. You should always include ALT text for visually-impaired users, for the IMG tag and for each AREA tag.

Some additional information:

The NetMechanic site has page on designing accessible navigation
The Iowa State University Guide also discusses imagemaps, including the TABINDEX attribute.

Note that the preceding material is a client-side imagemap, as opposed to a server-side imagemap. That means the browser figures out which area was clicked on, without having to consult the server. Some very old browsers didn't handled imagemaps, so the server did the work, but that's unnecessarily slow using any modern browser. Server-side imagemaps should be avoided, but you'll still hear them mentioned in documentation.

Targets

We've all seen web sites where a hyperlink causes a new window to be opened, into which the destination page is loaded, rather than replacing the contents of the current window. This can be convenient if the other content is in some sense a "digression" from the current place, and your user will want to return to the current place. The new window could be used for a footnote, another website, a larger version of an image (the smaller version is called a "thumbnail"), and so on. For example, WireImage.com uses this a lot for their "details" links.

One easy way to do this is to use the "target" attribute of the hyperlink (A) tag. According to the formal HTML specs on the TARGET attribute, the following will open a new, window that contains the link contents:

<a href="http://www.htmlhelp.com/reference/html40/values.html#frametarget"
target="_blank">TARGET</a>

Notice that the URL in that example is an extended URL, using the fragment id to scroll you to the correct place in the new window.

You should use this feature with care. Some browsers completely block new windows from opening up, so in those browsers, your link becomes useless. Also, some users find this feature annoying, on the grounds that they can open up a new browser window or tab if they want. On the other hand, there are clearly times when it is useful. One such example is a page of image thumbnails, where each thumbnail is a link to the original large version of the image.

When you open a new browser window in this way, you have no control over the size of the window, where it's placed on the screen, whether it has scrollbars, and the like. Doing that requires JavaScript, which we will learn later this semester. However, manipulating windows using JavaScript is not covered in the course; we consider an optional topic for the interested student. There is additional information in the examples section of our site.

Summary

We learned that

We can name a location within a web page, called a fragment, using the NAME attribute of the A tag
We can link to or refer to a fragment by using a pound sign and the name after the filename in a URL.
We can associate an "map" with an image so that parts are clickable.

Solutions to Exercises

Optional reading: Meyers Chapter 11.

© Computer Science 110 Staff
This work is licensed under a Creative Commons License
Date Modified: Wednesday, 23-Jan-2008 13:53:49 EST