BrainCode.com

Documentation: jsView JavaScript-Controlled Image Display Applet

BrainCode.com's jsview.class applet
Version 3.0.1 Final Release
Copyright 1999, 2000 by BrainCode.com
Source: http://www.BrainCode.com

FREE for Private and Non-Profit Users...The FREE version displays a hook notice to www.BrainCode.com at start-up; otherwise it functions exactly as the purchased version, with all parameters and commands the same.

COMMERCIAL & FOR-PROFIT USERS ARE *REQUIRED* TO USE THE PURCHASED VERSION
of this applet, always quickly available at www.BrainCode.com.

The PURCHASED version has no start-up or other notices; and it starts and runs 30 seconds faster. We encourage those wishing to buy the applet to use the free version for trials, however, so you know what you're getting when you purchase.

Support is available for the purchase version of the applet, only, strictly via http://www.braincode.com/support
You must include your UserID with all support requests.

Please note that support is solely for questions concerning installation of your applet.  We will not write your JavaScript for you; nor do we troubleshoot JavaScript errors.

 

.
.
Parameters
.
.
The following are the initial parameters to be set.  Those that are required are so marked.  Optional parameters may be omitted. A sample setup is presented first.

All other control of the applet is accomplished via JavaScript, as explained in subsequent sections. 

Do not copy and paste code from this page; though, of course, you may from the html in the demo html code included with this kit.

.
Sample of <APPLET> Code:
.
<APPLET="jsview.class" NAME="George" WIDTH="300" HEIGHT="300">
..<param name="Notice" value="Applet by www.BrainCode.com">
..<param name="KeyCode" value="FREE">
..<param name="StartImage" value="0.jpg">
..<param name="AutoSize" value="1">
..<param name="Link" value="http://www.braincode.com/index.html">
..<param name="Target" value="_new">
..<param name="LoadingXY" value="100,200">
..<param name="BackgroundColor" value="#000000">
</APPLET>

Important: Please note that you absolutely must NAME the applet for the JavaScript function to work.  If you don't name the applet, JavaScript calls can't find it.  See the JavaScript section (below) for more on this.

.
Notice Parameter - Required
<param name="Notice" value="Applet by www.BrainCode.com">

The Notice parameter must be present, exactly, or the applet will display an error message.  A missing notice will not stop the applet from functioning, however.

.
KeyCode Parameter - Required
<param name="KeyCode" value="FREE"> or <param name="KeyCode" value="your_keycode_here">

If you have the FREE version... enter FREE in the value. For example:
.....<param name="KeyCode" value="FREE">
If you have the PURCHASED version... enter your key in this value. For example:
.....<param name="KeyCode" value="AQ?/FFG1*PSU9">

For those with the purchased version, keys are automatically made for you dynamically off the BrainCode.com site. You receive clear, exact, explicit instructions on this at time of purchase, and each time that you make a key.

If you are unsure what the domain for the key is, use DOMAIN as the value in this parameter. For example:
.....<param name="KeyCode" value="DOMAIN">
and an information box in the applet will actually tell you the domain name needed when getting a key for the applet.

A missing KeyCode parameter will not stop the applet; though the notice plate will appear.  An incorrect KeyCode parameter will open the information box, indicating a key is needed for the domain where the applet resides.

.
StartImage Parameter - Required
<param name="StartImage" value="image.jpg">

This is the first image the applet will display when it starts.  Either jpg or gif images may be used; but JAVA applets in general very much prefer jpg images.  The path to the image is relative.  A relative /path/image.jpg may be used.  Absolute http:// paths will not work for the images.

.
BackgroundColor Parameter - Optional
<param name="BackgroundColor" value="#000000">

This sets the background color of the applet.  #000000 is the default. If the applet is in AutoSize=1 mode (below) or the image fills the applet space, note that the image will cover the applet background; so changing this parameter would appear to have no effect.

.
AutoSize Parameter - Optional
<param name="AutoSize" value="0">

If set to AutoSize=0, images will appear in the applet space at their normal dimensions.  AutoSize=0 is the default
If set to AutoSize=1, images will be fit to the applet space.  Note that this is not a proportioning function.

.
LoadingXY Parameter - Optional
<param name="LoadingXY" value="100,100">

This positions the "Loading..." indicator in the applet space.  X is distance from the left, Y is distance from the top.  If omitted, the default is 10,10.  Dimensions are in pixels.  Do not to omit the comma between values. If you do not wish to see the "Loading..." box, position it off the applet space; for example, -120,-120.

.
Link Parameter - Optional
<param name="Link" value="http://www.yoursite.com/page.html">

The Link parameter sets the link for the StartImage (above).  The Link parameter uses absolute paths, only, in full, explicit http:// format.

Omitting this parameter will leave the first image unlinked.  Subsequent images will also be unlinked, unless set via JavaScript (see section below). If set, this will also be the link for all images, until changed via JavaScript (see below).

.
Target Parameter - Optional
<param name="Target" value="_new">

The Target parameter sets the target for the StartImage (above).  The Target parameter uses the same values as html for windows, for example:
....._new - opens a new window *
....._blank - also a new window *
....._self - loads in the same frame
....._top - opens in the same window

The Target parameter can also set the target a frame in a frameset.  Use the name of the frame (exactly).  If the Target is not set, the default is _top.  If set, this will also be the target for all images, until changed via JavaScript ( below). [NB: * Netscape and Microsoft browsers interpret _blank and _new a little differently; try both.]
.

.
.
JavaScript Page Preparation
.
.
There is only a single function used in the JavaScript implementation of jsView: jsviewDo( )

However, a few preparatory steps are necessary to ready your page.  Please follow these instructions with care!

(Do not copy and paste from this page; you can get relevant code snippets from the demo html provided with the kit.)

.
Preparation - Important! - Step 1.
Insert the following code in the <head> of your html page:

<script>
ready=false;
</script>

This sets a variable to be used in Step 2., below.

Preparation - Important! - Step 2.
Modify your <body> tag to include onload="javascript:ready=true"

Your <body> tag should look like this:

<body onload="javascript:ready=true">

This sets the variable called ready to true, but only after the page is fully loaded.

Preparation - The Explanation
In Step 1., we immediately set the variable ready to false, the moment the html page begins loading.

In Step 2., the variable ready is set to true -- but only after the page is fully loaded.

This is then used as a "lock-out" in subsequent calls to the JavaScript function that controls the applet, jsviewDo( ) -- thereby preventing JavaScript errors that would occur if a call to jsviewDo( ) was made before the applet it is calling has had its object created by the page.

Thus, a call like this...

onmouseup="if(ready)George.jsviewDo('image.jpg','http://www.braincode.com','_top')"

cannot function until the page is loaded.  This eliminates thrown JavaScript errors by waiting for the applet (named George, in this example) to load before allowing jsviewDo( ) to try to communicate with it.

.
.
.
JavaScript Usage: the jsviewDo( ) Function
.
.
Function jsviewDo( ) Syntax

The basic syntax of the jsviewDo( ) function is as follows:
.

jsviewDo('image','url','target')

image = the filename of the image (this must be a relative address or path)

url = the link to which the image will go when clicked (this must be an absolute http:// path)

target = the window or frame in which the link will be opened (see the Target parameter, above)
.

Attaching the jsviewDo( ) Function to the Applet
.
Step 1.: You absolutely must NAME the applet in its <APPLET> tag, thus:

<applet code="jsview.class" NAME="George" WIDTH="300" HEIGHT="300">

Step 2.: Then exercise the jsviewDo( ) function, referenced to the applet NAME, thus:

George.jsviewDo('image1.gif','http://www.this.com/page1.html','_new')

The example above would load image1.gif into the applet space.  When that image is clicked, it will open the page at http://www.this.com/page1.html in a new window.

Step 3.:  Eliminating JavaScript errors during loading (see JavaScript Page Preparation, above)

Using the ready variable assigned and set to false in the head and condition in the body onload=  you now "lock out" the use of the function until the page has loaded, thus:

if(ready)George.jsviewDo('image1.gif','http://www.this.com/page1.html','_new')

Step 4.: Last, just attach the code above to an event or an anchor.

The provided demo html pages (which see) amply show how to do this, in detail, for just about all of the expectable options, as follows:

Demo HTML Page Technique
demo_1.html Clickable Thumbnail Images
demo_2.html MouseOver Thumbnail Images
demo_3.html Radio Buttons
demo_4.html Clickable Text Links
demo_5.html MouseOver Text Links
Taking it Further...

With a bit of ingenuity, experienced JavaScript writers will immediately see many possibilities in this:  timed image sequences, attaching the applet to menu items, using it as a substitute for awkward dHTML layers, and much more.  Experiment!
.

.
The BrainCode jsview.class applet is (c) 1999, 2000 by BrainCode.com.  Redistribution or resale of this applet is strictly forbidden.  All responsibility for use of the applet remains with the user.  Images with the demos of this applet are (c)2000 by BrainCode.com. All rights reserved. They may be used freely on private sites only.
.