rollover2: Generate javascript rollover buttons

rollover2 readme.txt
May, 11 2002

changed: Oct, 11 2002 ($map, DISCLAIMER)

#
# What is it?
#

rollover2.php is a php class which shows buttons using the 
well known javascript rollover effect: 
When the mouse is over the button, the button image is 
swapped using a javascript function. 

This php class is based on the work of
 
    Carlos Falo Hervás <carles_at_bisinteractive_dot_net>. 

The original files can be seen at 

    http://www.phpclasses.org/browse.html/package/214.html

#    
# Why is it?
#
    
When i searched phpclasses for a rollover effect, the 
package 214 "rollover" was the class which came closest 
to my needs. But i wanted the preload() to "think" of all 
of my images and do this for me.
So i changed the class variables to an array which holds all
the data needed. I made the code tidy-proof and told the
preload() function to include the image.js and to make a
<script> section. The alternate text for the mouse pointer
will now also appear in the status bar. A target window can
be given: Now this class can be used within frames. A third
state image can indicate that the user has reached the
desired page.

I did not change anything in images.js, which is still
good since 1999. The author of images.js is

    Dan Steinman
    http://www.dansteinman.com/dynapi/

#    
# Using the class
#

The class is used in three steps. First, you instantiate
a rollover2 object using "new" and then add the data.

    $ro = new rollover2;

There are three variables defined with default values within the class.

    var $imagedir = './images/'; // path to image files
    var $jsincludepath = './'; // path to image.js  './' means actual directory
    var $window_defaultstatus = ''; // default status for status bar message

now let us assume you have a directory "images" and the 
javascript file "image.js" lies between the other php files. 
You do not need to change any of the default values.
If your image folder was named "pics" you would insert 
this row of code:

    $ro->imagedir = './pics/';
    
Don't forget the trailing slash.

Now let us add an image with the addimage() function:
    
    $ro->addimage( 'example2', 'example2_bas.jpg', 'example2_sel.jpg', 'example2_dow.jpg', 
        'This is a more complicated Example', 'example2.php' );
    
The function addimage() is defined as:

    addimage( $imgname,      This is a user defined, good-to-remember name 
              $baseimg,      This is the image for the state "normal"
              $selimg,       This is the image for the state "mouse is over image"
              $downimg='',   This is the image for the state "page is link url"
              $alt='',       This is the hint text for mouse pointer and status bar
              $link='#',     This is the url
              $target='',    This is the target window
              $layer='',     This is the name of a named layer on which the image is
              $map='')       This is the name of an optional <map name=...> image map
              
The parameters $downimg, $alt, $link, $target, $layer and $map are optional and need 
not to be given. If any optional parameter is given, all optional parameters before 
the given one are no more optional. Example: If you want to give an alt-text, but do 
not wish to give a downimg, the fourth parameter $downimg must be given as ''.

    $ro->addimage( 
        'myimage',
        'button1.gif',
        'button2.gif',
        '',             //   <--- there is the former optional parameter
        'My mouse and statusbar hint text.' ); // <-- $link, $target,
                                               // $layer and $map are 
                                               // still optional.

Of course in most cases it makes sense to add an url as a link target.
But you can also add a javascript function as a link target.

You may add as many images as you wish, as long as your server's capacity is not 
exceeded. Take small images (file size) to have it work fast.

The swapping images have to be preloaded to work properly.
This is done in the <head> section of the html-page:

    <html>
    <head><title>This is a rollover2 page</title>
    <?php $ro->preload(); ?>
    </head>
    <body .... /body></html>

The preload() function will think of all of your images, add the
<script> section and include the javascript file images.js.

To put the images on the screen, in the <body> section the
function image() is called for every button. The only parameter
for image() is the user defined image name. To put the button
"example2" you write:

    $ro->image( 'example2' );
    
That is all. Have fun.

rollover2.php is copyright (c) 2002 Peter Klauer
rollover.php is from Carlos Falo Hervás
image.js is copyright (c) 1999 Dan Steinman

DISCLAIMER:
THERE IS NO WARRANTY AT ALL  - E. G. TO PERFORMANCE, ACCURACY OR ANY OTHER 
WARRANTIES WHETHER  EXPRESSED OR  IMPLIED.  YOU USE THIS PROGRAM/SCRIPT AT 
YOUR OWN RISC! THE AUTHOR IS  NOT RESPONSIBLE  FOR  ANY  COSTS, DAMAGES OR 
LOSSES INCURRED, WHETHER INCIDENTAL OR CONSEQUENTIAL, BY THE USE OR MISUSE 
OF ANY PART OF THIS PROGRAM/SCRIPT. 
               
www.ingoknito.de
mailto: knito@knito.de