[Tools Home] [CIMM] [href/alt text fields] [Shape Controls] [Speedy Entry] [Autoload] [Future Plans] [Bottom of Page]

Clickable Image Map Maker (CIMM) - Instructions

This discussion assumes you have a basic understanding of HTML and client side imagemaps. CIMM is a utility which allows you to more easily create and edit client side imagemaps for your Web pages. It is unique in that it runs over the Internet - no downloading, no installation, no software updating. Just go to CIMM and start to work.

To use CIMM, you will find it really helpful to have a monitor that is either at least 400 pixels wider than your image or at least 200 pixels taller than it. Otherwise, you will be feverishly scrolling back and forth and cursing my name. A monitor at least 800 x 600 pixels is really the minimum for anything serious. If you are using a Wintel machine, you will find screen size to be more of a problem because of the larger font sizes on that platform. Sorry, shoulda gotta Mac. I've tried to alleviate this problem by offering a "lite" version which can be selected with a checkbox when you select your image.

The href and alt text Fields



For each link you wish to create on your image map, enter the href in the green field and the alt(ernate) text in the orange field. The alternate text is for the benefit of those using non-graphical browsers. For example, your entry may resemble the following:



In each of these fields, clicking the corresponding [Clear] button does just that.

The Shape Controls


(image is slightly outdated, but you get the idea)

Rectangle - assuming your href and alt text are in place as described above, click on the rectangle icon, then click on the upper left corner of the area on your image you want to define as corresponding to that href/alt text pair. Then click the lower right corner of that area. With each click, the code will be generated in the text field below the shape controls.
Circle - assuming your href and alt text are in place as described above, click on the circle icon, then click on the center of the area on your image you want to define as corresponding to that href/alt text pair. Then click the edge of that area. The code will be generated in the text field below the shape controls.
Polygon - same idea as above, except each click produces one x,y pair of coordinates which corresponds to the angles of the polygon you want to map out. Since polygons have an arbitrary number of sides, you must click on the Close Poly icon to let CIMM know you are done defining that area.

Close Poly - see Polygon immediately above.

Erase - this erases the current line you are working on, including the type of shape, the href and alt text, and any coordinates you have entered. It changes nothing in the control panel. Because of certain subtle and helpful features of CIMM, it should be rare that you need to use Erase. Using it is a sign you may not have put enough effort into planning your imagemap.

Restart - the "Go" button. Clicking this will restart you using the same image, erasing any coordinates you have plotted out. There is a confirmatory dialog box for your protection. Generally, you won't need to use this button.

Done - when you have mapped out all your shapes, click this to complete the code to meet HTML standards. To use the code, scroll down to the text field, select all the text, copy it, and paste it into your HTML code. You will need to tweak the reference to the src of your img, unless your image will be in the same directory(folder) as your HTML page which calls it.

Huh? - brings you to this page (in a different window, so as not to disturb your work).

Note: If you select the wrong shape, just click the correct one; CIMM will help you sort it out.


You now know enough to use CIMM effectively (essentially, we've covered the "lite" version).
What follows is a description of CIMM's power features.

The Speedy Entry Controls



In a typical image map, there will be some similarities between each href. For example, there may be links to "../myfolder/file_one.html", "../myfolder/file_two.html", and "../myfolder/file_three.html". Rather than force you to re-type "../myfolder/file_" and ".html", do this:
  1. use the first pop-up list (blue) to choose the beginning part (in this example you would choose "../")
  2. use the repeating text field (yellow) to enter "myfolder/file_"
  3. use the second pop-up list (blue) to choose the ending part (in this example you would choose ".html")
  4. click on [Make href] (lime). The href field (green) should now contain "../myfolder/file_.html"
  5. now insert "one" in the appropriate place to make the href="../myfolder/file_one.html"
  6. enter the alt text (for the benefit of those using a text only browser) in the orange field.
  7. plot out your shape (see shape control instructions above).
  8. now, if you click on [Make href], the href (green) field should return to "../myfolder/file_.html"
  9. type in "two" in the appropriate place and plot out the appropriate shape
  10. repeat as needed
The [Clear] button to the right in the yellow field clears the yellow field. The [Clear Most] button (lime) does the same thing as clicking all three [Clear] buttons (including the href (green) and alt text (orange) fields), and it resets the two blue pop-up menus. You will also notice that any changes to the speedy entry fields are immediately reflected in the href (green) field.

In case you didn't notice, yellow and blue make green (the href field). The color choices were not arbitrary!

Pre-Built hrefs and the Autoload Feature



Now we're getting into the true power of CIMM. Suppose you want to create an image map with a dozen links (and a dozen corresponding alt texts). Prepare a list like the following: 
bananas/about.html=about bananas
bananas/chiquita.html=Chiquita bananas
oranges/about.html=about oranges
oranges/florida.html=Florida oranges
potatos/about.html=about potatos
potatos/idaho.html=Idaho potatos
potatos/mr.html=Mr. Potatohead
lemons/about.html=about lemons
lemons/lemonade.html=lemonade is good
lemons/windows95.html=we knew it all along
grapes/about.html=about grapes
grapes/gripes.html=sour grapes
The "=" serves as the delimiter, separating the href from the alt text. You can define other delimiters to suit your needs using the delimiter pop-up menu. The Clear button clears the field.

Create your list (see also Using existing imagemaps below), then paste it into the textarea in the gray box (the Autoload field). You now have two options:
  1. You can click [Load From List], and the first pair will be parsed off (read the warning below) and placed in the href (green) and alt text (orange) fields. Then you can plot out the appropriate shape. Assuming no polygons, you can plot out each area in only four clicks and no keystrokes.
  2. You can check the Autoload checkbox. Now when you click on a shape, the first href/alt text pair is automatically parsed off and placed in the href (green) and alt text (orange) fields. Plot out the shape. Then click the next shape. Assuming no polygons, you can plot out each area in only three clicks and no keystrokes.
    Note: If you select a shape, then realize that the href/alt text pair that comes up should be mapped as a different shape, just click on the new shape. If the href/alt text themselves should be changed, change them in the green and orange fields, then re-click the appropriate shape.
Warning! This is a powertool, which means it can be dangerous. The parsing mechanism is a destructive process; your pre-built list will be consumed by CIMM, so save a copy of your list. If you ever have Autoload on and need to click erase, turn off Autoload and proceed to map out the correct shape. Failing to disable Autoload will cause that href/alt text pair to be lost when you next click on a shape. Turn Autoload back on at your discretion.

Using existing imagemaps - if you have the code for an existing imagemap, and you want to use the same links (eg. when the image has been re-drawn), just paste that code into the autoload field. CIMM will automatically extract the href/alt text pairs on the fly with no further thought on your part. Proceed with mapping as if you had pasted in a list like the example. For even more convenience, clicking once on the autoload field selects all the text in that field, allowing a simple paste to overwrite everything. If you want to save the newly created href/alt text list for future reference, click once on any other field, then click again in the autoload field, copy, and save the result in a text file. Clicking on another field is necessary because the conversion does not occur until the focus is taken off the autoload field. Also, the default delimiter is "="; if you set the delimiter before pasting in the existing imagemap code, your selected delimiter will be used.

Just imagine if you needed to plot out 50 or 60 areas. Assuming one second per click, you could be done in three minutes!

Future Plans

I always want to strike a balance between power and ease of use. I plan to add the ability to shift coordinates for recreated images. For example, if you create an imagemap, then change the image so that all the coordinates need to be shifted 10 pixels down and 15 pixels to the right, this could be accomplished easily. I also intend to add a mechanism for target and onMouseOver parameters.

Conclusion

If you have feedback, bug reports, ideas, etc. please pass them on to me. Please include your browser and platform! I also like to hear success stories and kudos.

Jeff Baumann cimm@linkedresources.com
The Javascript Factory is a division of LinkedResources.
[Tools Home] [CIMM] [href/alt text fields] [Shape Controls] [Speedy Entry] [Autoload] [Future Plans] [Top of Page]