May, 11 2002
changed: Oct, 11 2002 ($map, DISCLAIMER)
# What is it?
rollover2.php is a php class which shows buttons using the
When the mouse is over the button, the button image is
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
# 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
I did not change anything in images.js, which is still
good since 1999. The author of images.js is
# 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
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 ''.
'', // <--- 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.
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:
<head><title>This is a rollover2 page</title>
<?php $ro->preload(); ?>
<body .... /body></html>
The preload() function will think of all of your images, add the
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
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.