TODAY'S LESSON: Image Maps________________________________________
"Here is a map of the United States. Click on a state to hear the
song of its state bird." -Anonymous Tripod user
The classic way of navigating around the Web is to click links in
text, or images that are links. But sometimes it's essential, or
fun, to have clickable hotspots in an image, so that clicking
different parts of a single image takes the user to different
places. This fantastic technology, which has been turning heads
ever since it hit the streets circa 1995, is called "image
mapping." Here's the breakdown.
You all know how to make a link out of an image:
<A HREF="koala_fun.html"><IMG SRC="images/koala.jpg" WIDTH=200
HEIGHT=250 BORDER=0 ALT="Koala"></A>
When people click on that photo of a happy koala, they are
whisked to your page about koala fun.
Now suppose, though, that you have a picture of a koala and a
wombat, and you want to map the image so users who click on the
koala are taken to the Koala Fun page, yes, but users who click
on the wombat -- who either already know all about koala fun or
are for some reason indifferent to it -- go to a Wombat Fun page.
It'd be easy enough to split the image into two different image
files, place them next to each other on the page, and link each
separately, but in our case unfortunately the two are obviously
very good friends -- the koala is vigorously hugging the wombat,
the wombat's whiskers are obscuring the koala's left eye -- and
it's pretty much impossible to split the image into two.
Image mapping to the rescue! To create our image map, we first
need to open the image in an image editing program and figure out
how the areas to be mapped are delineated in terms of pixels.
(This is the hardest part, so let's get it out of the way first.)
We're going to count pixels, starting in the upper left-hand corner
of our image and proceeding to the lower left. "X" refers to the
horizontal direction and "Y" refers to the vertical. Any pixel in
our image can be described by using two numbers: its X coordinate
and its Y coordinate. Thus, the pixel that's 36 pixels to the left
and 75 pixels down from the top can be called "36,75" for short.
Now, pay attention. Using a simple set of rules, we can delineate
shapes by mentioning their pixels. To describe a rectangular area
of our image (that paw looks kind of rectangular, eh?), for example,
we need merely indicate the X and Y values of its upper-left corner
and its lower-right corner, separated by commas, thusly:
"36,75,140,150" indicates the rectangle -- deep breath -- whose
upper-left corner lies 36 pixels from the left and 75 pixels from
the top, and whose lower-right corner lies 140 pixels from the left
and 150 pixels from the top. Can you dig it?
The way this is indicated in HTML is: <AREA SHAPE="rect"
HREF="koala_fun.html" COORDS="36,75,140,150">. Notice that we've
stuck in the target of the clickable hotspot we've delineated in
there too.
But we're not limited to rectangles, oh no. An oval can be
described just the same way as a rectangle -- the oval is the
largest one that can fit inside the rectangle whose corners we
describe, its curves just touching the sides of the rectangle.
(Imagine, if it helps, superimposing a bar of oval-shaped Dove
soap on top of a rectangular bar of Ivory soap.) All that differs
is the SHAPE attribute:
<AREA SHAPE="oval" HREF="koala_fun.html" COORDS="36,75,140,150">
We describe a circle by indicating the X and Y of its center point
and then giving the length of the radius in pixels:
<AREA SHAPE="circle" HREF="koala_fun.html" COORDS="100,100,35">
What else? Well, for detail work, sometimes you need to bring out
the big guns and completely outline an irregular shape. That's done
by simply listing the coordinate pairs of each subsequent point.
The points you mention are connect-the-dotsed automatically, in a
clockwise order, with the last point mentioned being connected back
to the first. The SHAPE attribute is "poly", short for polygon.
The tag looks like this:
<AREA SHAPE="poly" HREF="koala_fun.html" COORDS="36,75,36,90,54,100,70,100>
Lastly, if you want to make a single pixel into a link, it can be
done with the SHAPE="point" attribute:
<AREA SHAPE="point" HREF="koala_fun.html" COORDS="54,100>
Rrright. Naow. To build the actual map, we want to assemble a
bunch of AREA lines like the above (at least two of them), each one
describing a single hot-linked area of our image. These lines are
placed within MAP tags:
<MAP NAME="koalamap">
<AREA SHAPE="oval" HREF="koala_fun.html" COORDS="36,75,140,150">
<AREA SHAPE="circle" HREF="wombat_fun.html" COORDS="100,100,35">
<AREA SHAPE="point" HREF="koala_fun.html" COORDS="54,100>
</MAP>
This entire block of code can be placed anywhere in your HTML
document. Somewhere in the HEAD is nice, or near the image to be
mapped. Doesn't matter. You'll specify where to find it by
mentioning its name when the time comes.
So you have your image tag:
<IMG SRC="images/koala&wombat.jpg" WIDTH=250 HEIGHT=250 BORDER=0 ALT="Koala and Wombat">
You need to add two attributes to this: "USEMAP" and "ISMAP". ISMAP
tells the browser that, well, it is an image map. And USEMAP
specifies where to find the pixel map info you just laboriously
entered. Remember to prefix the name of the map data with a # sign
-- this is because it's an anchor within the same file:
<IMG SRC="images/koala&wombat.jpg" USEMAP="#koalamap" WIDTH=250 HEIGHT=250 BORDER=0 ALT="Koala and Wombat" ISMAP>
There's your image, all linked up nicely. Does anything remain to
be explained? No, not really.
HINTS, POINTERS, AND TIPS O' THE TRADE______________________________
Remember that some people are surfing with images turned off, or
using a browser that doesn't offer images. If you want these people
to be able to get around your site, you should offer them an
alternate text link somewhere.
The image maps explained above are known as "client-side image
maps". Back before people upgraded to Netscape 2.0, server-side image
maps were popular, in which the mapping was handled by the server
because the browser didn't know how. We don't think about server-side
image maps much any more, but the Web is still littered with vintage
tutorials on how to make them, and warnings about keeping your site
backward-compatible for folks who are still using Netscape 1.1.
There's some nice software that makes the mapmaking process easier.
MapEdit, for example. Or Web Hotspots.
Worrying rarely does any good.
RESOURCES ________________________________________________________
Webmonkey's overview of image maps:
http://hotwired.lycos.com/webmonkey/96/40/index2a.html?tw=659
Web Hotspots:
http://www.1automata.com/hotspots/mapper.html
MapEdit:
http://www.boutell.com/mapedit/
