PHP Classes
elePHPant
Icontem

rollover2: Generate javascript rollover buttons

Recommend this page to a friend!
Stumble It! Stumble It! Bookmark in del.icio.us Bookmark in del.icio.us
  Info   View files View files (10)   DownloadInstall with Composer Download .zip   Reputation   Support forum   Blog    
Last Updated Ratings Unique User Downloads Download Rankings  
2005-03-04 (10 years ago) RSS 2.0 feedNot yet rated by the usersTotal: 1,317 All time: 2,768 This week: 1,259Up
Version Licenses Categories  
rollover2 1.0Freely DistributableHTML
Description Author  

class_rollover3.php and rollover2.php are PHP classes which show link buttons using the rollover effect: When the mouse is over the link image, the link image is swapped using a javascript function.
rollover3 is the newer version and should replace rollover2 whereever it is used. Please note that the parameter "layer" was stripped off from class_rollover3 and that you have to change the addimage(...) part when a image map is used, which was an argument in the 9th place which now shifts to the 8th place.

Picture of Peter Klauer
Name: Peter Klauer <contact>
Classes: 18 packages by
Country: Germany Germany
Age: 56
All time rank: 312 in Germany Germany
Week rank: 250 Down10 in Germany Germany Down
Innovation award
Innovation award
Nominee: 3x

Details provided by the author  
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

  Files folder image Files  
File Role Description
Plain text file class_rollover3.php Class New class file
Accessible without login Plain text file class_rollover3.txt Doc. about the new class rollover3
Accessible without login Plain text file example.php Example All in one example file
Accessible without login Plain text file example2.php Example example 2 main file
Accessible without login Plain text file images.js Data javascript file
Accessible without login Plain text file inc_ex2.php Example example 2 include file
Accessible without login Plain text file page1.php Example example 2 page 1 sub file
Accessible without login Plain text file page2.php Example example 2 page 2 sub file
Accessible without login Plain text file readme.txt Doc. Some informations about the class
Plain text file rollover2.php Class The class file

 Version Control Unique User Downloads Download Rankings  
 0%Total:1,317All time:2,768
 This week:0This week:1,259Up