BgImages

Overview

How to use a picture instead of simple color for active cells.
This example will run a natural horizontal progress bar with background pictures

Screenshot

sample screenshot

Demonstration

Give it a try

Dependencies

This example requires mandatory resources :

And also but optional :

Explains step by step

The progress meter wait 200ms (line 14) between each step of 10% (line 15).

There are 10 cells collapsed displaying a gif picture (lines 16-22):

Property Value Default
active-color #000084 #006600
inactive-color #3A6EA5 #CCCCCC
width 25 15
height   20
spacing 0 2
background-imagedownload.gif =>  
See also :

The progress bar has a 3dfx border (lines 23-24):

Property Value Default
class   progressBorder%s
width 1 0
style inset solid
color white #000000
See also :

And the percent text info is aligned on left of the progress bar (lines 25-30):

Property Value Default
class   progressPercentLabel%s
width 60 50
height   0
font-size 10 11
font-family   Verdana, Tahoma, Arial
font-weight   normal
color   #000000
background-color    
align center right
valign left right
See also :

Source Code

  1. <?php
  2. /**
  3. * Horizontal ProgressBar filled with background image.
  4. *
  5. * @version    $Id: bgimages.php,v 1.4 2006/05/24 08:47:05 farell Exp $
  6. * @author     Laurent Laville <pear@laurent-laville.org>
  7. * @package    HTML_Progress2
  8. * @subpackage Examples
  9. * @access     public
  10. */
  11. require_once 'HTML/Progress2.php';
  12.  
  13. $pb = new HTML_Progress2();
  14. $pb->setAnimSpeed(200);
  15. $pb->setIncrement(10);
  16. $pb->setCellAttributes(array(
  17.     'active-color' => '#000084',
  18.     'inactive-color' => '#3A6EA5',
  19.     'width' => 25,
  20.     'spacing' => 0,
  21.     'background-image' => 'download.gif'
  22. ));
  23. $pb->setBorderPainted(true);
  24. $pb->setBorderAttributes('width=1 style=inset color=white');
  25. $pb->setLabelAttributes('pct1', array(
  26.     'width' => 60,
  27.     'font-size' => 10,
  28.     'align' => 'center',
  29.     'valign' => 'left'
  30. ));
  31. ?>
  32. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  33.     "http://www.w3c.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  34. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
  35. <head>
  36. <title>Background Images Progress2 example</title>
  37. <style type="text/css">
  38. <!--
  39. <?php echo $pb->getStyle(); ?>
  40.  
  41. body {
  42.     background-color: #C3C6C3;
  43. }
  44.  -->
  45. </style>
  46. <?php echo $pb->getScript(false); ?>
  47. </head>
  48. <body>
  49.  
  50. <?php
  51. $pb->display();
  52. $pb->run();
  53. ?>
  54.  
  55. </body>
  56. </html>