Building
Image Maps
Many people are interested in
building image maps, but don't know where to start. Tripod Member, gerstein,
offers this step-by-step plan for making image maps on a Macintosh:
So you'd like to build your own imagemap.
Well, it's really not that hard. You can whip one up in about 20
minutes, and continue refining and adding to new links and features to
it, as I did. Read on to learn how.
First, you'll need an image to map. I started by opening a window
on my screen, putting some cool icons in it, making a screen shot,
and experimenting with Adobe PhotoShop. You could also use a single
piece of digitally-created artwork or a scanned-in image. Any image
you choose can become an working image map on the Web.
Second, you'll need an image map maker tool. Which tool should
you use? Well, I use a Macintosh, so I can only mention Mac
products. I tried Adobe PageMill, but didn't like its image map
interface. (Maybe I should've looked at the manual, but I didn't have
the time.) The program I've decided to use for now is WebMap. You can
currently download version
2.0b9. Tripod links you to the more stable WebMap1.0.
So, you now have your image, and a copy of WebMap. Although other tools
might let you edit jpeg or other graphics formats, WebMap only works with GIF's.
If your image isn't yet in GIF format, convert it.
Now, you can open WebMap and start a new file. Open your graphic.
WebMap lets you drag out rectangles, ovals, circles, trapezoids, and
single points to designate as your clickable area. Choose one of the shape tools, and begin outlining a region. Once you've created a closed-in area, you need to designate
a corresponding URL. With WebMap 1.0.1, click on "undefined" on the right side of the window to enter the URL. In version 2.0, type the URL in the space provided at the top of the screen.
Once you've created a closed area, WebMap will prompt you for a URL reference.
When you are finished mapping your image, you'll need to use "Export to Text" on the File menu, and save with NCSA Formatting. Don't worry - you'll see these
options as you go along. When you save these changes, it will create a
new file called "image.gif.map". You can rename this file to "image.map".
Ready for upload! Upload the map file (image.map) and the image (image.gif) to your Tripod directory. For instructions on how to upload files, please check out Tripod Homepage Builder. Now you're ready to add them to your chosen page. This part requires at least a cursory knowledge of HTML, so you've been warned :)
Set up the page with headers, content, whatever you're planning to use.
Then, type this where you want the image and map to appear:
<a href="image.map"><img src="image.gif" ISMAP></A>
This makes the "image.map" the active link set, and places those links
over your chosen "image.gif" file. The ISMAP makes the map actually work.
Now when you look at your new page, and you move the mouse over the image, the link preview area will display a URL that looks like this:
http://members.tripod.com/~membername/image.gif.map?56,48
All your browser is doing is paying attention to where the cursor is, and
then getting ready to pass the number cooordinates on to the .map file,
so the server can figure out where to send you.
Your image map is all set!
If you need to make any changes, simply repeat the
process and replace the image.map file in your Tripod directory.
Some pointers, or, "Why isn't my map working?"
- Be sure that you set a default URL. As some people may only map specific regions of the image, you'll need to make sure that those who click on a non-mapped area still go somewhere.
- You do not need to refer your image map through a /cgi-bin/ directory
at Tripod. Imagemaps are integrated into Tripod's server.
- You cannot use circles or ovals with WebMap 1.0.1. It uses
incorrect formatting when creating the .map file, listing circles as
"circ" rather than "circle". If you'd like to use circles and are using
v. 1.0.1, you'll need to edit the .map file and change any "circ" reference
to "circle".
- Although our server is set up to ignore the comment tags in a .map file
(comment tags are text lines that start with # symbols), sometimes comment tags make for problems. If you're having trouble with your image map and everything else looks okay, you can try removing the comment tags.
Happy Mapping!
Image Map Alternatives
Tripod Member, wmills, offers a visual alternative to full image maps:
Create images for the buttons you want to create (i.e. like for [Page
Back] [Help!] [Page Forward]). Make sure the images are consistently
sized, then piece them together on your page, but turn the borders
OFF! An example of how it could look:
<img src="back.gif" border=0 alt="BACK">
<img src="help.gif" border=0 alt="HELP!">
<img src="forward.gif" border=0 alt="FORWARD"><p>
Whether you use 3 or 300 images, Do Not:
- exceed your Tripod quota (100k)
- take up more than one line
To solve "Do Not" #1, check out member suggestions on image economy.
For "Do Not" #2, restrict image sizes to about 1/2 the width of your screen if you're at 640x480 or 800x600 resolution and 1/4 the width of your screen if you're at 1024x768 or higher.
Good Luck!
Back to Planet Tripod
