Make your own free website on Java Image Map

Version 3.2 (as shown here) is now available for free downloads

The PopUpMenuV3.2 java applet is a fully customizable Image Map applet with pop up sub-menus and interactive image displays. Clickable areas can be in the form of Rectangles, Circles or Polygons. The definition of each clickable area will include the number of sub-menu items for this area (which can also be zero (0) for no sub-menus), the area's shape and the coordinates that define the shape for this area. Other optional parameters will define different images to show on mouse over, different audio files to play on mouse over and the different colors and styles. It is less than 20k so it downloads in about 6 seconds on a 28.8 connection. Version 3.2 fixes a bug in the 2.x version and adds new features.

The best thing about the applet is that it is so simple to configure, anybody with basic html knowledge can add full inter-activity to his/her webpages in less 30 minutes. Following are the parameters used by the applet. To use the different parameters in a html file, you use the param tags. The param tags has two items incorporated in them, the name item and the value item. The yellow items are the possible name items for the param tags and the inside the [brackets] you will find the possible value items for the param tag.

mapimage - [filename.jpg or filename.gif] - The filename of the image map to be used. The image should be saved on the same directory as the HTML and the applet, or can be in another path providing that you add the path in the filename, i.e. "pathname\filename.jpg".

ink - [color] -The text color to be used for the pop-up sub-menu items. A color could be any of the regular solid colors as 'white', 'black', 'blue', 'red', 'green', 'yellow', 'cyan', 'magenta', 'gray', 'pink', 'orange' or the RGB definition of a color in either decimal numbers 'r,g,b' or in hexadecimal numbers '#rrggbb'.

paper - [color] -The background color for the pop-up-box.

highlight - [color] -The highlight color to be used when the mouse is over a clickable item.

border - [size,color] - The pixel size of the pop-up-box border and its color. This parameter is only used with the round or rect styles which are the older versions styles. The new style default is the 3d which is like the Windows pop-box style.

font - [face,style,size] - Recomended font faces are Helvetica, TimesRoman, Courier, Symbol or Dialog. Unlike the previous versions of the applet, you are not restricted to these faces and can choose any other face you choose. Keep in mind that the visitor to your website should have the face installed on his/her system in order to view it so you should always choose a popular face. Style can be either plain, bold, italic or bolditalic.

style - [round, rect or 3d] - new in version 3.2 - This parameter will determine the style of the pop-up-box. The default is now 3d which is very similar to the pop-up-boxes used in Windows for speed-menus (when you Right-Click the mouse). The round style is the old style used by the PopUpMenu applet versions 1.0 through 3.0 and the rect is very similar to the round, but as the name implies, it has 90 degrees angles. Both the round and rect styles use the border parameter.

align - [left or center] - new in version 3.2 - This parameter will determine the text alignment in the pop-up-box. Default is left.

mark - [true or false] - new in version 3.2 - This parameter will determine wether the clickable area (i.e. rect, circ or poly) will be drawn in the highlight color when the mouse is in the area boundry. Default is true.

area#1 .. area#n - [numberOfItems,shape,coordinate1,coordinate2,coordinte3..] - The numberOfItems simply tells the applet how many menu items will be in the pop-up-box. If you set it to zero (0) there will be no sub-menu items for this area but it will still have a link, image and audio files. The shape can be either 'RECT' for rectangle, 'CIRC' for a circle or 'POLY' for a polygon. The coordinates define the shape: A rectangle is defined by four coordinates: [xStart,yStart,xEnd,yEnd], a circle is defined by three coordinates: [xCenter,yCenter,radius] and a polygon is defined by the number of coordinates it takes: [x1,y1,x2,y2,x3,y3, .., .., xn,yn].

item#1-1 .. item#n-m - [text] - The menu text item that will appear in the pop-up-box for area#n, item#m

url#1 .. url#n - [url] - The default url for that area. A url can be either relative i.e. 'page2.html' or an absolute address, like "'.
url#1-1 .. url#n-m - [url] - the url to go to on click for that specific sub-menu item, i.e. area#n item#m.

status#1 .. status#n - [text] - The default message to show on the window bottom status bar for area#n, item#m.

image#1 .. image#n - [filename, imageX, imageY] - The filename of the image to display when the clickable area is active. Again the only supported file formats on the internet at this time are the .jpg and the .gif formats. the imageX coordinate to display the image at and the imageY coordinate to display the image at.

audio#1 .. audio#n - [] - new in version 3.0 - The filename of the audio clip to play when the mouse is over the clickable area. Per java support, the file has to be in .au format and any sampling should be made in 8,000hz.

target - [text] - The target frame to send the browser on upon mouse click. Defaults to "_self". If you have links to other websites you might want to set the target to be "_blank" which will open a new browser window and link on it.
target#1 .. target#n - [text] - The target frame to send the browser on upon mouse click. Defaults to the text set in the 'target' parameter.

box#1 .. box#n - [boxX, boxY] - new in version 3.2 - This parameter should be used with extra caution (if at all). It is used to override the computer generated x and y coordinates of the pop-up-box. The applet automatically calculates the position of the box. There are only two cases when you might want to use this parameter: Either in order to create a non-menu information box (as I used it in the example above for the FAQ item), or if the box hides a part of your image map that you want visible at that time. The boxX and the boxY will set the upper-left corner of the pop-up-box. The width and height are still calculated auomatically according to the font size and the number of sub-menu items.

The images used in this example page are:

The Main Image Map: Main Image Map
The dZiners Highlight for area#1 with transparent background: Highlight
The FAQ image on area#3: FAQ Image
The eMail image on area#6: Email Image

You are more than welcome to use my applet on your websites for free. There are no known bugs at this time and I welcome any feedbacks. To use the applet you will have to download the two following class files, the PopUpMenuV32.class file and the Area.class file. Just right-click on the link and choose 'save link as' and save it to your hard disk, then upload it to your website and save it on the same directory of the HTML source and the image map. You can also download the whole thing (including this HTML example page) by downloading the following zip file (you will need WINZIP to extract the file)

Also look at the HTML source code of this page (just click VIEW | SOURCE on your browsers menu) for more details.
Important Note: Please allow the bottom 10 pixels of the applet for a link to my website. That is the small price to pay for using the applet in its 'unregistered' version. Please note that the link to my website will be done on a new browser window so your visitors will still have your website in the background for later explorations. If you rather purchase the 'registered' version so there is no link to my website, email me from here: Don't worry, it's very affordable and I am sure you will agree it is well worth its price for the professional image it gives your website.

Let me know if you use the applet in either version. I intend to place links on my website to websites that use my applets and I'd love to include yours there.

Feel free to email me with any questions you might have.

The Java PopUpMenuV32, writen by Igal Sapir, (c) 1997
JavaTM is a trademark of Sun Microsystems