ImageMap Documentation

ImageMap parameters documentation

$Date: 8/05/96 4:44p $

The ImageMap Applet provides a new way of displaying traditional Imagemaps. Instead of imagemaps that provide users with minimal feedback as to what is hot and what is not, the ImageMap applet allows you to specify a variety of effects for mouse rollover and mouse click. You embed the ImageMap applet in an HTML document via the standard <APPLET> tag. The best way to configure the ImageMap applet is to use the AppletAce; using the HTML parameters directly can be a difficult chore.

Inserting a Java Applet Using Macromedia Backstage Designer

Adding a Java applet to your web page can be done from within Backstage Designer without having to write HTML.

Copy the ImageMap.class, ImageEffect.class, HotArea.class, invert.class, outline.class, and replaceimage.class files to the directory where the document will be saved.
Position the cursor where you would like to insert the Java applet.
Choose Insert | Java Applet, or click on the Java icon on the Media toolbar. A Java icon will appear on the page.
Double-click on the icon, or choose Edit | Properties to open the Properties dialog box for the applet.
Enter the name of the Java applet you wish to insert, in this case ImageMap.class. You can choose Browse to help find the class file. Note: You can not rename the Java applet.
If the applet is stored different directory from the html file, the location of the applet should be specified in the Codebase field. The location is specified as a directory path relative to the location of the html file.
Enter the size (width and height) for the applet. This size is measured in pixels.

At this point, the applet has been inserted into your web page. The applet may be viewed by saving the page and opening the file using any Java-enabled browser. It will display using the default parameters.

Customizing a Java Applet Using Macromedia Backstage Designer

After inserting the applet, select the Content tab on the Java Applet Properties dialog box.
Choose Add. A dialog box will appear; in it enter the name of the parameter you wish to customize, and specify the value for that parameter. The complete list of parameter names and range of values is listed below. You only need to enter the parameters and values that you wish to modify. All other parameters will be set at their default value.
To change a parameter that you have already added, double-click on the parameter, or select it and then choose Modify.
You may also select an image to be displayed in those browsers which do not support Java, such as Netscape Navigator 1.1, or Microsoft Internet Explorer 2.0, in the Alternate Content field of the property sheet.

HTML Example

Here's an example of HTML for presenting the ImageMap Applet:

<APPLET code="ImageMap.class" 	width=504 height=310>
<param name="defaultDownEffect"  value="(none)">
<param name="defaultEnterEffect" value="outline,Green">
<param name="image"              value="AceSplash.gif">
<param name="area2"              value="object1,rect,http://www.macromedia.com,null,232,165,283,211,null,null,null,null">
<param name="area1"              value="object0,rect,http://www.macromedia.com/software/powerapplets/index.html,null,9,163,219,210,null,null,null,null">
<param name="toolTips"           value="object0|Push Me!">
<param name="bgColor"		 value="Black">
<param name="tipbgcolor"	 value="White">
<param name="tipfont"		 value="Dialog">
<param name="tipsize"		 value="12">
<param name="tipstyle"		 value="Plain">
<param name="tipcolor"		 value="Black">
<A HREF="/cgi-bin/imagemap/AceSplash.map">
<img src="../../images/AceSplash.gif" width=504 height=310 USEMAP="headermap" ISMAP>
</A>
</APPLET>

The first line of this example specifies an ImageMap applet in a window that's 504 pixels wide and 310 pixels high, which exactly corresponds to the width and height of the image to be displayed. The values for various parameters-- defaultDownEffect, image, etc.--are provided in subsequent lines. The area parameters define two hot areas(area1 and area2), both of which use the default down effect of outline.

Finally, the anchor tag at the end of the param tags displays a standard imagemap if the user does not have a Java enabled browser.

ImageMap Parameters:

The following list of parameters is provided for informational purposes. The easiest way to actually configure the ImageMap applet is with the AppletAce.

Parameter
Default
Description
image -- Identifies what image file should be used for the base image. The image may be either a GIF file or a JPEG file. Note that while transparency is supported, the background color that shows through is defined via the bgColor parameter; Java applets cannot currently show the background of the HTML page.
defaultEnterEffect -- This defines the default effect to use for a hot area when the mouse enters it. Any hot area may override the default effect. The format of the effect must be "effect,effectArguments" where effect is one of "invert","outline", or "replaceimage". A description of the effects and their arguments is in the Effects Table below. Note that the comma must be present even if the effect takes no parameters. A value of "(none)" indicates there is no defaultEnterEffect.
defaultDownEffect -- This defines the default effect to use for a hot area when the user clicks the mouse on it. Any hot area may override the default effect. The format of the effect must be "effect,effectArguments" where effect is one of "invert","outline", or "replaceimage". A description of the effects and their arguments is in the Effects Table below. Note that the comma must be present even if the effect takes no parameters. A value of "(none)" indicates there is no defaultDownEffect.
enterImage -- If the "replaceimage" effect will be used for any mouse enter effects, the URL of the image to be used must be specified here. Note that only 1 image is used for all mouse enter effects; this is to increase performance by reducing the number of server requests. To use a unique image for each "replaceimage" effect, just take the multiple images and combine them into a single image, then specify the appropriate offsets into the composite image for each instance of the "replaceimage" effect.
downImage -- If the "replaceimage" effect will be used for any mouse down effects, the URL of the image to be used must be specified here. Note that only 1 image is used for all mouse down effects; this is to increase performance by reducing the number of server requests. To use a unique image for each "replaceimage" effect, just take the multiple images and combine them into a single image, then specify the appropriate offsets into the composite image for each instance of the "replaceimage" effect.
areaX -- Each hot area in the image must be specified by a numerically unique area parameter. For more information on the format of the area parameter see the Area Arguments table below.
bgColor black Background color for the image. If there are no transparent bits in the image, this value has no effect. This value can be one of the predefined color names black, blue, cyan, darkGray, gray, green, lightGray, magenta, orange, pink, red, white, and yellow. Users familiar with hexadecimal numbers can also specify colors as hex values representing a Red-Green-Blue mix. Hex values take the form RRGGBB, with 000000 for black, FFFFFF for white, and FF0000 for red.
toolTips -- All of the tips to show for all of the areas are specified by this parameter. The format of the parameter is a list of "|" seperated areaName|tipString values. The areaName string identifies which area the tip is for. Note that each area is named as specified in the Area Arguments table. The tipString is the string to show, and may contain spaces.
tipColor Black This is the color of the text for the tooltips. Color is specified identically to bgColor above (i.e. a named color or a hex value).

tipBgColor White This is the color of the background and border of the tooltip box. Color is specified identically to bgColor above (i.e. a named color or a hex value).
tipFont Dialog The font to be used for the tooltip text. Valid values for this parameter are Dialog, TimesRoman, Helvetica, Courier, and Symbol.
tipStyle Plain Font style of messages. Valid values for this parameter are plain, bold, italic, and boldItalic.
tipSize 12 Font size of tooltips, in points.

Parameter	Default	Description
image	--	Identifies what image file should be used for the base image. The image may be either a GIF file or a JPEG file. Note that while transparency is supported, the background color that shows through is defined via the bgColor parameter; Java applets cannot currently show the background of the HTML page.
defaultEnterEffect	--	This defines the default effect to use for a hot area when the mouse enters it. Any hot area may override the default effect. The format of the effect must be "effect,effectArguments" where effect is one of "invert","outline", or "replaceimage". A description of the effects and their arguments is in the Effects Table below. Note that the comma must be present even if the effect takes no parameters. A value of "(none)" indicates there is no defaultEnterEffect.
defaultDownEffect	--	This defines the default effect to use for a hot area when the user clicks the mouse on it. Any hot area may override the default effect. The format of the effect must be "effect,effectArguments" where effect is one of "invert","outline", or "replaceimage". A description of the effects and their arguments is in the Effects Table below. Note that the comma must be present even if the effect takes no parameters. A value of "(none)" indicates there is no defaultDownEffect.
enterImage	--	If the "replaceimage" effect will be used for any mouse enter effects, the URL of the image to be used must be specified here. Note that only 1 image is used for all mouse enter effects; this is to increase performance by reducing the number of server requests. To use a unique image for each "replaceimage" effect, just take the multiple images and combine them into a single image, then specify the appropriate offsets into the composite image for each instance of the "replaceimage" effect.
downImage	--	If the "replaceimage" effect will be used for any mouse down effects, the URL of the image to be used must be specified here. Note that only 1 image is used for all mouse down effects; this is to increase performance by reducing the number of server requests. To use a unique image for each "replaceimage" effect, just take the multiple images and combine them into a single image, then specify the appropriate offsets into the composite image for each instance of the "replaceimage" effect.
areaX	--	Each hot area in the image must be specified by a numerically unique area parameter. For more information on the format of the area parameter see the Area Arguments table below.
bgColor	black	Background color for the image. If there are no transparent bits in the image, this value has no effect. This value can be one of the predefined color names black, blue, cyan, darkGray, gray, green, lightGray, magenta, orange, pink, red, white, and yellow. Users familiar with hexadecimal numbers can also specify colors as hex values representing a Red-Green-Blue mix. Hex values take the form RRGGBB, with 000000 for black, FFFFFF for white, and FF0000 for red.
toolTips	--	All of the tips to show for all of the areas are specified by this parameter. The format of the parameter is a list of "\|" seperated areaName\|tipString values. The areaName string identifies which area the tip is for. Note that each area is named as specified in the Area Arguments table. The tipString is the string to show, and may contain spaces.
tipColor	Black	This is the color of the text for the tooltips. Color is specified identically to bgColor above (i.e. a named color or a hex value).
tipBgColor	White	This is the color of the background and border of the tooltip box. Color is specified identically to bgColor above (i.e. a named color or a hex value).
tipFont	Dialog	The font to be used for the tooltip text. Valid values for this parameter are Dialog, TimesRoman, Helvetica, Courier, and Symbol.
tipStyle	Plain	Font style of messages. Valid values for this parameter are plain, bold, italic, and boldItalic.
tipSize	12	Font size of tooltips, in points.

Effect Styles

The following effects can be used for either mouse enter or mouse click events.

Effect
Arguments
Description
invert none The colors of the hot area are inverted.
outline color This effect causes the hot area to be outlined with the given color. The color is specified the same way as bgColor above (i.e. a named color or a hex value).
replaceImage image, sourceX, sourceY, width, height, destinationX, destinationY This effect replaces a rectangular section of the imagemap with a rectangular section from another image.
The image argument is either "enter" or "down", which means to use the enterImage or the downImage parameter respectively. A URL cannot be used for the image argument. This design minimizes the number of requests made to the server. If there are several different images you would like to use for the various hot areas, combine them into one image and specify offsets into the new image using the remaining replaceImage arguments.
The sourceX and sourceY arguments identify the upper left corner of the replacement image.
The width and height arguments identify the size of the replacement image. Note that only rectangular replacement images are supported.
The destinationX and destinationY arguments identify the upper left corner of where on the ImageMap the replacement image is to be placed. Note that this area does not need to be anywhere near the hot area; this ability can be used to create some interesting effects.

Effect	Arguments	Description
invert	none	The colors of the hot area are inverted.
outline	color	This effect causes the hot area to be outlined with the given color. The color is specified the same way as bgColor above (i.e. a named color or a hex value).
replaceImage	image, sourceX, sourceY, width, height, destinationX, destinationY	This effect replaces a rectangular section of the imagemap with a rectangular section from another image. The image argument is either "enter" or "down", which means to use the enterImage or the downImage parameter respectively. A URL cannot be used for the image argument. This design minimizes the number of requests made to the server. If there are several different images you would like to use for the various hot areas, combine them into one image and specify offsets into the new image using the remaining replaceImage arguments. The sourceX and sourceY arguments identify the upper left corner of the replacement image. The width and height arguments identify the size of the replacement image. Note that only rectangular replacement images are supported. The destinationX and destinationY arguments identify the upper left corner of where on the ImageMap the replacement image is to be placed. Note that this area does not need to be anywhere near the hot area; this ability can be used to create some interesting effects.

Area Arguments

Each hot area is defined in a separate, numerically differentiated, parameter tag. The first hot area is "area1", the second is "area2", and so on until there are no more areas. The area parameter tag must include the comma seperated arguments listed in the table below. The arguments must appear in the order shown in the table. For and example, see the Example Section above.

Argument
Description
areaName The name of the hot area. This is a string, and cannot contain spaces.
type One of "rect", "circle", or "poly". This identifies the geometry of the region.
destination The URL to go to when the user clicks the mouse on the area.
frame The name of the target frame to show the destination. If this value is "null", then no frame is targeted. If this value is "" then a new browser is opened, pointing at the destination.
coordinates A comma seperated list of coordinates. The number of coordinates and what they represent depends on the areaType value.
For "rect" this list must contain 4 values: upperLeftX, upperLeftY, lowerRightX, lowerRightY.
For "circle" this list must contain 4 values: centerX, centerY, perimeterX, perimeterY; the perimeter X and Y values must specify a point on the edge of the circle.
For "poly" this list contains a "|" seperated series of X|Y value pairs that identify the points of the polygon. The final point should be identical to the initial point.
enterEffect If this area is going to use the defaultEnterEffect, this argument should be "null". Otherwise, if this area is going to have a different effect from the defaultEnterEffect, the effect must be specified here. Possible effects are "invert", "outline", and "replaceimage".
enterEffectArgs The arguments for the enter effect see the Effect Styles table above for more details on the arguments for each effect. If enterEffect is "null", this should be "null" as well.
downEffect If this area is going to use the defaultDownEffect, this argument should be "null". Otherwise, if this area is going to have a different effect from the defaultDownEffect, the effect must be specified here. Possible effects are "invert", "outline", and "replaceimage".
downEffectArgs The arguments for the down effect see the Effect Styles table above for more details on the arguments for each effect. If downEffect is "null", this should be "null" as well.

Argument	Description
areaName	The name of the hot area. This is a string, and cannot contain spaces.
type	One of "rect", "circle", or "poly". This identifies the geometry of the region.
destination	The URL to go to when the user clicks the mouse on the area.
frame	The name of the target frame to show the destination. If this value is "null", then no frame is targeted. If this value is "" then a new browser is opened, pointing at the destination.
coordinates	A comma seperated list of coordinates. The number of coordinates and what they represent depends on the areaType value. For "rect" this list must contain 4 values: upperLeftX, upperLeftY, lowerRightX, lowerRightY. For "circle" this list must contain 4 values: centerX, centerY, perimeterX, perimeterY; the perimeter X and Y values must specify a point on the edge of the circle. For "poly" this list contains a "\|" seperated series of X\|Y value pairs that identify the points of the polygon. The final point should be identical to the initial point.
enterEffect	If this area is going to use the defaultEnterEffect, this argument should be "null". Otherwise, if this area is going to have a different effect from the defaultEnterEffect, the effect must be specified here. Possible effects are "invert", "outline", and "replaceimage".
enterEffectArgs	The arguments for the enter effect see the Effect Styles table above for more details on the arguments for each effect. If enterEffect is "null", this should be "null" as well.
downEffect	If this area is going to use the defaultDownEffect, this argument should be "null". Otherwise, if this area is going to have a different effect from the defaultDownEffect, the effect must be specified here. Possible effects are "invert", "outline", and "replaceimage".
downEffectArgs	The arguments for the down effect see the Effect Styles table above for more details on the arguments for each effect. If downEffect is "null", this should be "null" as well.

Back to AppletAce contents