The Parameters Explained             

SurfBoard's parameters are explained below, with reference to the clickable example code in the left frame: you can click a parameter from the example code to jump to its explanation, or simply read this page from top to toe.

Most of SurfBoard's parameters have a default setting which is mentioned below. If the default setting is the option you'd like to use in your own implementation, you can leave that parameter out of your HTML code.


Applet Width & Height
SurfBoard contains several individual components - the List, Preview area and Image button. The applet dimensions depend a lot on the dimensions of the components (and where you put the components if you choose to move them around). Start with a basis of 275×275 and adjust from there. If you don't include any of the layout parameters (at the bottom of the example code on the left), you're using the default layout, which places components as follows:

  • The Label (if used) is horizontally centered and placed just below the top of the applet. It adjusts its position automatically according to size of LabelFont, but cannot be moved.

  • The List is horizontally centered in the applet, either just below the Underscore (if you include a Label) or a few pixels from the top of the applet (if you don't).

  • The Image button is placed a few pixels to the right of the List, and vertically centered between top and bottom of the List. You may need to increase applet width for large button images.

  • The Preview panel is placed a few pixels from the bottom of the applet (so increasing applet height will move it downward, and vice versa). Its size is slightly less than that of the applet and it's horizontally centered.
  • BgColor
    A hex triplet specifying the background color of the applet. You might set this to something that contrasts with you page backround to make a 3D panel (if 3DBorder is set to 'yes'), or choose the same color as your page so that it blends into the page. This color is used to determine the color of the underscore and the internal border of the Preview area. The default background color is C0C0C0 (silver gray).

    BgImage
    An optional GIF or JPEG image that will be automatically scaled to match your applet dimensions and cover the BgColor. If you choose this option, the choice of BgColor still matters: it will be used for the underscore (if shown) and the internal border of the Preview area. If your BgImage is a GIF with transparency, the transparent color will be replaced by our chosen BgColor.

    3DBorder
    A simple yes or no to whether a 3DBorder should be drawn around the applet to create a defined 'panel' for it. The default setting is yes.

    SoundSelect
    Specifies the path (if necessary) and name of the Sun/NeXT format (.au) audio file to be played when a List entry is clicked to select it. The location of the file is treated exactly as a URL: you might enter only a filename (if the file is in the current directory), a relative location (such as ../sounds/daftsound.au) or an absolute location (such as http://www.server.com/folder/subfolder/daftsound.au). See the note about Using Sounds, below.

    SoundButtonDown
    Specifies the path (if necessary) and name of the Sun/NeXT format (.au) audio file to be played when the Image button is clicked, following the same rules as above. See the note about Using Sounds, below.

    SoundButtonUp
    Specifies the path (if necessary) and name of the audio file to be played when the Image button is released. The same details apply as to those above, of course. See the note about Using Sounds, below.

    NOTE - Using Sounds: SurfBoard is forgiving in its sound-support. If you exclude one or more of the three parameters above (or include them but forget to upload the audio files!), SurfBoard will continue quite happily (but silently). This means that if you choose to use fewer than the three possible sounds, you can simply remove their parameters and SurfBoard will play sounds only for the events that have a parameter.

    DefaultTarget
    When using any menu applet you need to be able to choose different frame names for each link. This normally means that for every entry on the menu you need a URL and a Target parameter. However you'll want most of these links to open in one particular frame, meaning that almost all of these Target parameters would be identical. The DefaultTarget parameter gives you a way to leave out all those identical Target parameters. Simply enter the name of the frame or window into which most (or all) of the links should open; this frame-name will then be used by default for any link that doesn't have its own Target parameter. The default setting for this parameter is _self.

    Testmode
    A yes or no parameter with a default of 'no', because most of the time you won't want Testmode switched on. If set to yes, when you move you mouse over the applet, your current coordinates with appear in the browser statusbar. (If you move over the Preview area, its width and height will also be displayed.) This is helpful when customizing the layout of SurfBoard using the ListPoint, ButtonPoint, PreviewPoint and PreviewWidth parameters.

    In this evaluation edition of SurfBoard, the Testmode feature is non-functioning.

    Label
    The text that should appear at the top center of the applet, acting as a heading for it. This can be of any length, as long as your applet width is sufficient to display it. By including a Label, the Underscore is automatically added beneath it.

    LabelColor
    A hex triplet specifying the color of the Label (if included). The default color is 000000 (black).

    LabelFont
    A comma-delimited string giving the name, style and size of the font you want to use for the text. The default settings are Helvetica, in bold, at size 16, which would be written as Helvetica,bold,16. Two important things to note: first, there must be no spaces in this entry; second, the three items must appear in the order name,style,size. Note that the style part of this setting can be plain, bold, italic or bolditalic, and these are not case-sensitive.

    ShowUnderscore
    This parameter only takes effect if you've included a Label. Along with the Label, an underscore is added using the BgColor. If you're not keen on it, set this yes/no parameter to no. The default setting is yes.

    PreviewTextColor
    The color of the text shown in the Preview area. The default color is 00C000 (green).

    PreviewFillColor
    The color of the Preview area's background, with a default of 000000 (black). The Preview area has a 3D indent effect; the 3D edging of this area is drawn in your choice of BgColor.

    PreviewFont
    A comma-delimited string with a default of Helvetica,plain,13. This parameter follows the same rules as for LabelFont.

    PreviewLines
    The number of lines of text that the Preview area should be able to display. The default is 4. Note that SurfBoard determines the precise height of the area according to your PreviewFont size - if you change the size of the font, this area's height will also change. NOTE: check that all your Display entries really do fit into this number of lines (especially in browsers such as Netscape which apply more space per character and line). If the autowrapping feature needs more lines for your text than the Preview area can display, those extra lines won't be shown.

    If you'd prefer not to show descriptions of each Entry, just set this parameter to 0. The Preview area will be removed and all the remaining parameters relating to it, including the Display parameters, can be deleted.

    ListTextColor
    The color of the text shown in the scrolling list. The default is 000000 (black).

    ListFillColor
    The background color of the scrolling list. The default is FFFFFF (white).

    IncreaseListWidth
    The scrolling List will automatically size itself according to the length of your longest Entry, but it's nice to have some control over things sometimes. We've made sure that the list will always be wider than yur longest string, but you can use this parameter to increase its width still more. The default setting is 0, but insert any figure to add to the width, or a negative figure (such as "-5") to decrease it. Take care that the list isn't wider than the applet's width or the scrollbar may not be reachable!

    ShowItems
    The number of items that should be visible at once in the scrolling List. The default is 8. If you choose a lower number than 3, the scrollbar will be unusable, but any other figure is fine. If you set this to a figure that matches or exceeds your total number of Entries, the vertical scrollbar will be removed.

    NOTE: In Netscape, a higher number of entries will be shown in the menu than the figure you enter here. This is an inconsistency between Internet Explorer and Netscape in their treatment of font sizing: we decided to ensure the best possible display in Internet Explorer given a choice between the two.

    InitialSelect
    By default, when the applet starts, no Entry is selected and nothing appears in the Preview area. However, you may want to show a particular Entry as selected to indicate that it's the page currently open. If so, include this parameter with the required Entry number as its value. For example, to preselect Entry3, set this parameter to 3. The default setting is 0 (no Entry preselected).

    PlainImage
    SurfBoard requires an image button if it's to link anywhere, which at the very least means that you must use one image. This parameter specifies the name and (if necessary) the location of the plain image as an absolute or relative URL. This is the image used when the mouse is not inside the image area. If the image uses GIF transparency, the transparent color will be replaced by your chosen BgColor or BgImage. Although there's no requirement for all three images to be the same size, the reactivity of the button may seem a little odd if they're not.

    OverImage
    The name and location (if necessary) of the button image to be shown when the button is focussed (the mouse is over it). If this parameter is missing, the image specified in the PlainImage parameter will be used instead.

    PressedImage
    The name and location of the image to be used when the image-button is clicked. If this parameter is missing, the image specified in the PlainImage parameter will be used instead.

    Entry1, Entry2, . . . Entry2000
    The menu entries that should appear on the List. Up to 2000 entries can be included, and they'll be placed on the list in numerical order. The number suffixes don't have to be sequential: it's quite valid to have a four-entry menu using the parameters Entry3, Entry57, Entry478, Entry1792 if you really want to. Note that the number suffixes of the URL/Target/Display parameters below must match their corresponding Entry parameter, so you'd also need to include Display3, DIsplay57, Display478, Display1792.

    URL1a, URL2a, . . . URL2000a
    The URL to which the correspondingly-numbered Entry should link when clicked. An Entry can link to up to four URLs when clicked, bringing the b, c and d suffixes into play. As you can see in the example code to the left, Entry1 links to 3 URLs, so there are URL parameter with the 'a', 'b' and 'c' prefix.

    There are two points to bear in mind about using multiple URLs. First, the URLs will be fetched one at a time (although they should appear almost simultaneously) in the abcd order. This leads to the second point: if one of those URLs will load a page over the top of the applet, the applet must stop running. Therefore, if you're trying to load 4 pages, using all four URL parameters, and your URL2b parameter is the one that loads over the applet, the URL2c and URL2d links won't work - the applet stops running before it can process the requests!

    As an aid to testing your image buttons, you can prevent the applet linking anywhere when the button is clicked by prefixing URLs with a dollar sign ($). Remember to remove it before uploading your page though!

    Target1a, Target2a, . . . Target2000a
    The frame or window target names into which the correspondingly-numbered URLs should be opened. Any URL that doesn't have a matching Target parameter will use the one specified in the DefaultTarget parameter instead. As you can see from the code in the left frame, Entry1 has 3 URLs (URL1a, URL1b and URL1c). URL1a uses the DefaultTarget, but separate target names are specified for URL1b and URL1c by including the Target1b and Target1c parameters.

    Display1, Display2, . . . Display2000
    The text to be shown in the Preview area when the corresponding List entry is selected. This text will be wrapped automatically to fit within the Preview area according to the size and style of PreviewFont used and the width of the Preview area. You can display up to 100 lines of text here.

    You can also display images in the Preview area. Along with GIF and JPEG images, SurfBoard also supports animated GIFs. For example, if you have a catalog of images linked from SurfBoard, you might like to display a thumbnail of each one here, letting the visitor choose whether to link to the full-size version. To display an image here, enter its name (and location if necessary, as an absolute or relative URL) in the Display parameter and prefix it with an asterisk (*) as in the example code opposite. The image will be automatically scaled to match the dimensions of the Preview area. This could have the effect of warping some images beyond recognition, so it's recommended that once you've set up the applet the way you want it, you create your thumbnail images to match the size of the Preview area. (You find find the exact dimensions of the Preview area by setting Testmode to 'yes', holding your mouse pointer over the preview area and looking at the browser statusbar.)  

    Layout Settings

    These parameters let you set a precise position for elements of the SurfBoard menu rather than leaving them centered and self-sizing/self-positioning as they are by default. If you choose to use any of these parameters, you'll find it helpful to set Testmode to 'yes'. You can then move the mouse over the menu and read your current coordinates from the browser statusbar. These coordinates are entered into the 'point' parameters below in the order in which they're displayed. (Note that the coordinates will not update themselves while the mouse pointer is over the List menu.)

    Using just one of the parameters below doesn't commit you to using all of them. However, you may find that in moving one component of SurfBoard the results don't look good until you move the lot. Life's like that.

    ButtonPoint
    The position at which the image button should be placed. This parameter (like the other 'point' parameters below) consists of two figures separated by a comma. The first is the the left/right coordinate, and the second is the the up/down coordinate. The top-left pixel of your button images will be placed at this point regardless of their sizes. By default the button is situated to the right of the List menu (regardless of where you've moved the menu to) and placed exactly halfway down its height. Using this parameter to specify a different position cancels that self-adjustment.

    ListPoint
    The position at which the top-left pixel of the List menu should be placed. This parameter works like ButtonPoint above. By default, the List is centered within the width of the applet, and placed just below the Label (if used) or the top of the applet. By fixing its position with this parameter, that behavior is canceled.

    PreviewPoint
    The position at which the top-left pixel of the Preview area should be placed. This parameter works like ButtonPoint above. By default the Preview area is centered (so its width adjusts as you change the applet width) and placed near the bottom of the applet (so it moves up and down as you vary the applet height). If you use this parameter to fix its position, this behavior is switched off.

    PreviewWidth
    A single figure giving the desired width of the Preview area. By default the width is 20 pixels less than the width of the applet (causing its width to change as the applet width is altered).

    Note that there's no option to set the height of the Preview area other than using the PreviewLines parameter which sets its height in terms of the number of lines of text it can display. This is because the area is primarily intended to display text and must do so cleanly. For displaying images in this area, set the PreviewWidth and PreviewLines parameters to a size that looks roughly right for displaying a decent-sized thumbnail image, make sure Testmode is set to 'yes' and move the pointer over the Preview area to determine is dimensions, and then create your thumbnails to match those dimensions.


































    .