200 lines
11 KiB
HTML
200 lines
11 KiB
HTML
<HTML>
|
|
<HEAD>
|
|
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=iso-8859-1">
|
|
<META NAME="GENERATOR" CONTENT="Mozilla/4.03 [en] (X11; I; Linux 2.0.30 i486) [Netscape]">
|
|
<TITLE>Graphics Muse
|
|
</TITLE>
|
|
</HEAD>
|
|
<BODY TEXT="#000000" BGCOLOR="#FFFFFF" LINK="#0000FA" VLINK="#FA3333" ALINK="#33CC33">
|
|
<!-- =============================================================
|
|
This Page Designed by Michael J. Hammel.
|
|
Permission to use all graphics and other content for private,
|
|
non-commerical use is granted provided you give me (or the
|
|
original authors/artists) credit for the work.
|
|
|
|
CD-ROM distributors and commercial ventures interested in
|
|
providing the Graphics Muse for a fee must contact me,
|
|
Michael J. Hammel (mjhammel@csn.net), for permission.
|
|
============================================================= !--><A NAME="musings"></A>
|
|
<TABLE>
|
|
<TR>
|
|
<TD>
|
|
<H2>
|
|
More...</H2>
|
|
<IMG SRC="../gx/hammel/musings.gif" ALT="Musings" HEIGHT=52 WIDTH=247 ALIGN=LEFT> </TD>
|
|
</TR>
|
|
</TABLE>
|
|
|
|
<TABLE>
|
|
<TR>
|
|
<TD></TD>
|
|
</TR>
|
|
</TABLE>
|
|
<IMG SRC="../gx/hammel/cleardot.gif" ALT="indent" VSPACE=5 HEIGHT=1 WIDTH=1 ALIGN=LEFT>
|
|
<TABLE WIDTH="100%" >
|
|
<TR>
|
|
<TD ALIGN=RIGHT WIDTH="100%"><FONT SIZE=-2>© 1998 <A HREF="mailto:mjhammel@csn.net">Michael
|
|
J. Hammel</A> </FONT></TD>
|
|
</TR>
|
|
|
|
<TR>
|
|
<TD VALIGN=TOP BGCOLOR="#000000" cellpadding="0" cellspacing="0"><IMG SRC="../gx/hammel/cleardot.gif" ALT="indent" ALIGN=LEFT></TD>
|
|
</TR>
|
|
</TABLE>
|
|
|
|
<H4>
|
|
...XeoMenu (continued)</H4>
|
|
<APPLET CODEBASE="." CODE="XeoMenu" WIDTH=150 HEIGHT=200><PARAM NAME=copyright VALUE="(c) 1997 Sun Microsystems Inc. All Rights Reserved."><PARAM NAME=author value="Patrick Chan. www.xeo.com"><PARAM NAME=bg-color value="206 114 28"><PARAM NAME=image VALUE="./gx/hammel/xeomenu-1.gif"><PARAM NAME=separator VALUE="|"><PARAM NAMe=newline VALUE="^"><PARAM NAME=font VALUE="Helvetica"><PARAM NAME=font-height VALUE="18"><PARAM NAME=marginh VALUE=2><PARAM NAME=marginv VALUE=2><PARAM name=fg-menu-color value="0 0 0"><PARAM name=bg-menu-color value="206 114 28"><PARAM name=fg-hi-menu-color value="232 221 18"><PARAM name=bg-hi-menu-color value="206 114 28"><!-- param name=target value="_self" --><PARAM NAME=menu0
|
|
VALUE="0 0 150 100|151 0 150 100|0 0|d|/path/to/file-1.html|What is Linux?|/path/to/file-2.html|How can I get it?|/path/to/file-3.html"><PARAM NAME=menu1 VALUE="0 101 150 100|151 101 150 100|0 101|d|/path/to/file-4.html"></APPLET>
|
|
|
|
<P>This first example shows the basic workings of XeoMenu. Note that
|
|
when you place the mouse over either word in the image it changes colors
|
|
and shifts slightly in position. The latter was originally just a
|
|
typo but I liked it the effect so much I left it in. The "Linux"
|
|
text also provides a drop down menu when you place your cursor over it.
|
|
The menu contains two simple entries. Moving the mouse over either
|
|
entry would take you to another page (although the links in this source
|
|
are fictitious - they don't really exist).
|
|
|
|
<P>The applet code for this first example looks like this:
|
|
<UL><B><FONT SIZE=-1><APPLET CODEBASE="." CODE="XeoMenu" WIDTH=150 HEIGHT=200></FONT></B>
|
|
<BR><B><FONT SIZE=-1><PARAM NAME=copyright VALUE="(c) 1997 Sun Microsystems
|
|
Inc. All Rights Reserved."></FONT></B>
|
|
<BR><B><FONT SIZE=-1><PARAM NAME=author value="Patrick Chan. www.xeo.com"></FONT></B>
|
|
<BR><B><FONT SIZE=-1><PARAM NAME=bg-color value="206 114 28"></FONT></B>
|
|
<BR><B><FONT SIZE=-1><PARAM NAME=image VALUE="./gx/hammel/xeomenu-1.gif"></FONT></B>
|
|
<BR><B><FONT SIZE=-1><PARAM NAME=separator VALUE="|"></FONT></B>
|
|
<BR><B><FONT SIZE=-1><PARAM NAMe=newline VALUE="^"></FONT></B>
|
|
<BR><B><FONT SIZE=-1><PARAM NAME=font VALUE="Helvetica"></FONT></B>
|
|
<BR><B><FONT SIZE=-1><PARAM NAME=font-height VALUE="18"></FONT></B>
|
|
<BR><B><FONT SIZE=-1><PARAM NAME=marginh VALUE=2></FONT></B>
|
|
<BR><B><FONT SIZE=-1><PARAM NAME=marginv VALUE=2></FONT></B>
|
|
<BR><B><FONT SIZE=-1><param name=fg-menu-color value="0 0 0"></FONT></B>
|
|
<BR><B><FONT SIZE=-1><param name=bg-menu-color value="206 114 28"></FONT></B>
|
|
<BR><B><FONT SIZE=-1><param name=fg-hi-menu-color value="232 221 18"></FONT></B>
|
|
<BR><B><FONT SIZE=-1><param name=bg-hi-menu-color value="206 114 28"></FONT></B>
|
|
<BR><B><FONT SIZE=-1><!-- param name=target value="_self" --></FONT></B>
|
|
|
|
<P><B><FONT SIZE=-1><PARAM NAME=menu0</FONT></B>
|
|
<BR><B><FONT SIZE=-1> VALUE="0 0 150 100|151 0 150 100|0 0|d|/path/to/file-1.html|What
|
|
is Linux?|/path/to/file-2.html|How can I get it?|/path/to/file-3.html"></FONT></B>
|
|
|
|
<P><B><FONT SIZE=-1><PARAM NAME=menu1</FONT></B>
|
|
<BR><B><FONT SIZE=-1> VALUE="0 101 150 100|151 101 150 100|0
|
|
101|d|/nav/new/index.html"></FONT></B>
|
|
|
|
<P><B><FONT SIZE=-1></APPLET></FONT></B></UL>
|
|
We'll step through these one time to explain briefly what each line does.
|
|
The first line starts the applet code and establishes the current directory
|
|
(the one from which this page was taken) as the location for the applet
|
|
code. The CODE argument gives the name of the Java program.
|
|
Note that you don't have to include the ".class" extension (all Java programs,
|
|
once compiled, have a .class extension in the filename). The width
|
|
and height arguments give the dimensions in which the applet will live
|
|
in the page. Note that this code was placed right after a table,
|
|
inside the BODY section of the HTML document. After this line come
|
|
the set of applet parameters, each of which is specified using the HTML
|
|
PARAM tag.
|
|
|
|
<P>The next two lines give the copyright and program author, giving credit
|
|
to Sun Microsystems and Patrick Chan for this code. Sun paid Xeo
|
|
for its development, I believe, for use on the Java Web site.
|
|
|
|
<P>The next line gives a background color to use in the transparent regions
|
|
of the image. This particular example does not have any transparent
|
|
areas, however the next one does.
|
|
|
|
<P>The image to use is specified with the image parameter line. The
|
|
VALUE can be any valid URL.
|
|
|
|
<P>The seperator is a single character used to delimit fields in the menu
|
|
parameters. The menu parameters are the last two PARAM entries which
|
|
we'll cover in a moment. For now, just note that the seperator is
|
|
used in the VALUE argument for the menu parameters.
|
|
<BR>
|
|
<BR>Menu items can have multiple lines using this program. In order
|
|
for XeoMenu to recognize a line break, the text uses a caret (^) to denote
|
|
a newline. These are not used in these examples, but the caret would
|
|
be embedded in the menu text in the menu parameters.
|
|
|
|
<P>The next two lines specify the font and font height to use for the menu
|
|
text. According to the man page for XeoMenu there are only 3 possible
|
|
font types: Helvetica, TimesRoman, and Courier. This is probably
|
|
a limitation in the early Java class libraries, but I'm not certain of
|
|
that.
|
|
|
|
<P>Marginh and marginv are used to pad the region around the menu text
|
|
with empty space. The values are given in pixels.
|
|
|
|
<P>Now come the text color parameters. First are the foreground and
|
|
background colors to use for the text when the cursor has not been moved
|
|
over the text, ie the default text colors. The latter two specify
|
|
the colors to use when the cursor is placed over a menu entry. Note
|
|
that in the first example the background colors are the same but the foreground
|
|
colors are changed. This isn't a recommended method - the results
|
|
are somewhat unappealing - but it does give you an idea of how the colors
|
|
can provide variations of effects.
|
|
|
|
<P>The last line before the two menu parameteers is actually commented
|
|
out, but is given for the sake of completeness. This parameter is
|
|
recognized by XeoMenu as the frame to display a menu items targe URL if
|
|
it is selected.
|
|
|
|
<P>Finally, we have the two menu parameters. XeoMenu recognizes any
|
|
parameter prefixed with the word "menu" and suffixed with a numeric value
|
|
as a menu item. This parameters value field contains a set of seperator
|
|
delimited values that define the display location, contents, and URLs for
|
|
each menu. The first set of 4 numbers is the <I>hotspot</I>.
|
|
This is the region, specified by an x,y location and its width and height,
|
|
in which the mouse must enter for XeoMenu to begin handling the menu features
|
|
of the image. The next 4 numbers specify a secondary region of the
|
|
image to overlay on the image when the mouse enters the hotspot.
|
|
The next two numbers specify the offset into the image to place the overlay.
|
|
In this example the offsets are specified so the overlay is place over
|
|
the hotspot, blotting it out as it were. This is not the only way
|
|
to use this feature, since the overlay can be placed anywhere on the image.
|
|
Note that all of the x,y coordinates are given as pixel coordinates in
|
|
the image.
|
|
|
|
<P>After the offset comes a single character. This can either be
|
|
a "d" or a "u". The "d" is used to post menus in a downward direction
|
|
and the "u" draws them upward. The location of the upper left corner
|
|
for the downward menus (and the lower left corner for upperward menus)
|
|
is also the offsets specified for the overlay location (ie the two numbers
|
|
that preceeded the "d" or "u").
|
|
|
|
<P>Next comes the default URL. This is the URL that will be used
|
|
if the user simply clicks in the hotspot without actually using a menu.
|
|
After this comes the menu definitions. These are the text of the
|
|
menu entries paired with a URL that follows immediately after it.
|
|
Note that in the second menu parameter there is only one URL specified
|
|
- the default URL. That means that no drop down menus are displayed
|
|
when you place the mouse over the Gazette hotspot, but the overlay is still
|
|
used.
|
|
|
|
<P>In this next example, both regions of text use menus. One uses
|
|
an upward menu and the other uses an overlay that is not directly over
|
|
the original hotspot. Also, this image has a transparent region.
|
|
Can you guess how to create this example? Try it first, before looking
|
|
at the <A HREF="applet.txt">source code</A>.
|
|
<BR>
|
|
<BR> <APPLET CODEBASE="." CODE="XeoMenu" WIDTH=150 HEIGHT=200><PARAM NAME=copyright VALUE="(c) 1997 Sun Microsystems Inc. All Rights Reserved."><PARAM NAME=author value="Patrick Chan. www.xeo.com"><PARAM NAME=bg-color value="206 114 28"><PARAM NAME=image VALUE="./gx/hammel/xeomenu-2.gif"><PARAM NAME=separator VALUE="|"><PARAM NAMe=newline VALUE="^"><PARAM NAME=font VALUE="Helvetica"><PARAM NAME=font-height VALUE="14"><PARAM NAME=marginh VALUE=2><PARAM NAME=marginv VALUE=2><PARAM name=fg-menu-color value="0 0 0"><PARAM name=bg-menu-color value="206 114 28"><PARAM name=fg-hi-menu-color value="232 221 18"><PARAM name=bg-hi-menu-color value="206 114 28"><!-- param name=target value="_self" --><PARAM NAME=menu0 VALUE="0 0 150 100|151 0 150 100|0 0|u|/path/to/file-1.html|What is Linux?|/path/to/file-2.html|How can I get it?|/path/to/file-3.html"><PARAM NAME=menu1 VALUE="0 101 150 100|151 101 150 100|0 70|d|/path/to/file-4.html|To Err is Human^To Forgive, Devine|/path/to/file-5.html|I think|/path/to/file-6.html"></APPLET>
|
|
|
|
<P><A HREF="gm.html#xeomenu-summary">Back to the main Muse page.</A>
|
|
<BR>
|
|
<TABLE WIDTH="100%" >
|
|
<TR>
|
|
<TD VALIGN=TOP COLSPAN="4" BGCOLOR="#000000" cellpadding="0" cellspacing="0"><IMG SRC="../gx/hammel/cleardot.gif" ALT="indent" ALIGN=LEFT></TD>
|
|
</TR>
|
|
</TABLE>
|
|
|
|
<TABLE WIDTH="100%" >
|
|
<TR>
|
|
<TD ALIGN=RIGHT><FONT SIZE=-2>© 1998 by <A HREF="mailto:mjhammel@csn.net">Michael
|
|
J. Hammel</A> </FONT></TD>
|
|
</TR>
|
|
</TABLE>
|
|
|
|
</BODY>
|
|
</HTML>
|