/*** (C)Stephen Chalmers
SmartScroll.
Pre-settable Locking Rollover Buttons with 2 or 3-State Operation, and Optional Captioning.
Info: www.hotspot.freeserve.co.uk/scripterlative
These instructions may be removed but not the above text.
Installation
~~~~~~~~~~~~
These instructions assume that an HTML document has been prepared, containing suitable image-based
navigation buttons surrounded by hyperlinks.
Each image placeholder must have a unique NAME attribute.
Save this file or text as smartroll.js and copy it to a suitable folder relating to your web pages.
Within the section of all documents that will use the script, at a point below the last
image in the document, insert the following:
(If smartscroll.js resides in a different folder, include the relative path)
Configuration
~~~~~~~~~~~~~
For each button group to be created, all that is required is a single call to either of two
functions: SmartRoll.over or SmartRoll.overTriState, passing them the required parameters.
Clear examples are given below.
The first parameter is the name given to the group of buttons. This can be any unique name.
All subsequent parameters are passed in groups of either two or three, depending upon whether
tristate buttons are to be created. In each parameter group, the parameters are as follows:
First parameter - the NAME attribute (not ID) of the first button's image placeholder or ![]()
tag.
Second parameter - the file name (and path if needed) of the 'hover' image file.
Third parameter - (If required) the file name (and path if needed) of the 'active' image file.
Note: The script detects the default image for each button, which is loaded by its ![]()
tag
in the usual way.
Example 1. Create a group of five tri-state rollover buttons. The group is named 'buttonset1', the
image placeholders are named 'btn1' - 'btn5', the images to be used reside in the folder
'/images', the hovered-state images are named 'hov1.gif' - 'hov5.gif' and the active-state images
are named 'act1.gif' - 'act5.gif':
Example 2. Create another menu as above, but using dual-state buttons:
!!! Do not nest these tags within any other tags inside !!!
Pre-Setting A Button
~~~~~~~~~~~~~~~~~~~~
On page load, there are two ways to preset a button from each group into its active state.
1) SmartRoll.setButton( placeHolder ), where 'placeHolder' is the NAME attribute of the image
placeholder of the relevant button:
SmartRoll.setButton( 'btn3' );
NOTE. This call must be made after the creation of the button group to which it applies.
2) In the target URL, pass the parameter: SmartScroll=placeHolder, where placeHolder means the
same as above.
Example. On a literary website that displays the same button menu on each page, a hyperlink
on the home page navigates to the fiction page, on which the 'fiction' button is to be set to
its active state.
....
To set more than one button (in different groups) in this way, repeat the parameter with
the required values: href='fiction.htm?SmartScroll=fictBtn&SmartScroll=sciFi'
Note: If you test this facility locally in the address bar, the URL should start 'file:///C:'
rather than 'C:/', at least for Internet Explorer.
Captions
~~~~~~~~
The optional captioning facility is initialised separately, via a call to SmartScroll.setCaptions.
The parameters are as follows:
Parameter 1: The NAME of the button group.
Parameter 2: The ID of the element that will display the caption text (Usually a DIV or SPAN).
Parameter 3: The default caption text. To use the element's initial content, specify this as "".
Subsequent parameters consist of ImageName/Caption pairs, one for each button to be captioned.
Example 3. The button set created in Example 2 is to be used on a model shop's website. It will
be assigned captions that are to appear in a span whose ID is 'captionLine'.
SmartRoll.setCaptions
(
'myButtons', 'captionLine', 'Welcome to Crashwell Models',
'btn1', 'Powered aircraft, ready-to-fly and in kit form.',
'btn2', 'A comprehensive range of glow and diesel aero engines.',
'btn3', 'Radio sets and accessories from the world\'s leading manufacturers.',
'btn4', 'Field Boxes, Electric Starters, Starter Batteries, Electric Fuel Pumps etc',
'btn5', 'Our new marine section has an exciting collection of water-borne models'
);
NOTES
~~~~~
1) For each captioned button set, the call to SmartRoll.setCaptions must be made after the
corresponding call to SmartRoll.over / SmartRoll.overTriState.
2) If you wish to use apostrophes within caption text, precede them with a backslash: \'
3) Multiple button sets may share the same caption element. When doing this, it may be
better to specify the default caption text as "" for all sets.
Troubleshooting
~~~~~~~~~~~~~~~
As always, ensure that the JavaScript console displays no error messages pertinent to your pages.
The encapsulated construction of this script, removes all risk of possible conflict with variables
from any other scripts in the document.
The most likely cause of trouble will be syntax errors in the function parameters.
Ensure that the example syntax has been followed exactly. It may be advisable to configure for just
two or three buttons initially.
Mouse Events
~~~~~~~~~~~~
The mouse event handlers generated by this script, will be appended to any created by
previously-loaded scripts or embedded statements. For this reason, try to load this script after
any other scripts that are known to use mouse events.
GratuityWare
~~~~~~~~~~~~
You obtained this script probably out of desperation, so if you wish to express your gratitude for
my efforts, please visit: www.hotspot.freeserve.co.uk/luv2payu/
*** DO NOT EDIT BELOW THIS LINE ***/
SmartRoll=/*2843295374657068656E204368616C6D657273*/
{
imgArray:[],
showImage:function(holder, obj, img, restore)
{
var arr=this.imgArray[obj][img];
if(!arr.locked)
holder.src=(restore?arr.defSrc:arr.src);
if( this.imgArray[obj].captionHolder && arr.caption )
this.imgArray[obj].captionHolder.childNodes[0].data=restore ? this.imgArray[obj].defCaption : arr.caption;
},
over:function()
{
if(document.images)
{
var objName=arguments[0];
this.imgArray[ objName ]=[];
for(var i=1,img; i