URL depends on what color a point is

This applet loads two images and displays one. It keeps the other hidden. The two are tied together so that the cursor location in the visible image also corresponds to a point in the hidden image.

The applet also loads a list of parameters associating various color values in the hidden image with URLs. If the user clicks on a point whose hidden color is associated with a URL the applet tells the browser to fetch that URL. If various colored areas in the hidden image correspond to items in the visible image the user will be able to click on objects in the visible image and have things happen. This behavior is somewhat similar to a client-side USEMAP, except that the use of colors allows regions of arbitrary shape to be easily defined.

As the user moves the mouse, the status line shows whether a link is available and what the URL is. The border (present if the applet is larger than the visible image) also changes color when a link is available.

Holding down the Shift key while moving the mouse shows the X and Y coordinates of the mouse cursor along with the RGB color values (in decimal and hex) at that point in the hidden image. This is intended as an aid in setting up the parameter list.

If the Shift key is down and the cursor is within the border area (if any), the width and height of the hidden image will be displayed instead of the cursor position. To see the image width and height when when there is no border or the cursor is otherwise within the image area, click the mouse while holding down the Shift key.

The information display is updated whenever mouse movement is detected with the cursor in the applet window. If no information is visible, wiggle the mouse.

This applet has been tested with GIF files only. It is unlikely to work well with JPEG files because of the nature of the JPEG compression scheme.

Applet parameters that can be set include:

• "Image2Show": The URL of the image to be displayed.
• "Image2Test": The URL of the hidden image to be used for defining active areas. If this parameter is not supplied, it defaults to the visible image.
• "NormalBorder": The color of the border (if any) when the cursor is not on an active area (default = blue): Six hex digits, RRGGBB.
• "ActiveBorder": The color of the border (if any) when the cursor is on an active area so that clicking will cause the browser to fetch a page (default = cyan): Six hex digits, RRGGBB.
• "Target00" through "Target99": Up to 100 strings of the form RRGGBB [whitespace] URL, where the RRGGBB stands for hex digits specifying a color. If the cursor is on a point anywhere in the image where the hidden-image pixel is the same color as that specified, the URL becomes available to be clicked on. If a color value has no URL associated with it (a parameter consisting of only the RRGGBB digits) then it defines inactive "dead" space. This overrides the default URL described below.
• "DefaultURL": A default URL. If the cursor is on a point whose color is not in the parameter list the default URL (if any) is selected.

The last two characters of the Color/URL parameter name are decimal digits (00 through 99). Not all numbers need be used. The parameters need not be in numerical order in the HTML file. If two different URLs are assigned the same color, the one with the lower number takes precedence.

Relative URLs will be taken relative to the HTML document the applet is embedded in.

USE SOLID COLORS! This won't work with dithered colors in the hidden image unless you want a sort-of-random effect. (Dithered colors in the visible image are OK.)

To see examples of these parameters being used, simply view the HTML source for this file.

                       -- Tom Digby
                       http://www.well.com/user/bubbles/