PHP/JavaScript Clicker

Composite image

How to use

  1. Create a composite image containing each of the click-through images, one above the other. (See right)  Each component image needs to be of the same height.
  2. Give the clicker a unique identifier; this will be used to identify the clicker in the non-JavaScript version of the clicker.
  3. Make a note of the width and height of each component image.
  4. Choose a mouseover title for each image. You may use empty strings if you do not want a title, however there must be exactly as many titles as there are images.
  5. Import the PHPJSClicker.php code in the <head> portion of the page. The placement is important, as the code includes styles and script into the page source.
  6. Where you want the clicker to appear, use the following code to construct and print out the clicker:

    <?php
        echo new PHPJSClicker("identifier", "image
            location", width, height, array('Title 1',
            'Title 2', ..., 'Title N'));
    ?>
    

  7. You may style the clicker using the CSS class .phpClicker or ID #clicker-identifier
  8. If necessary, the code provides for three JavaScript hooks, mouseoverHook, preClickHook and postClickHook to be applied to the object.

The clicker at left is generated from the above image, and the following code:

<?php
    echo new PHPJSClicker("test",
        "i/sshots/clicker-complete.png", 200, 175,
        array('Click Me', 'Click Me Again', 'Woohoo'));
?>