Recommended:

  • phpclasses.org
  • jsclasses.org
  • jsmag.com
  • siteapps.com
  • View our reviews on Hot Scripts
  • JS Tutorial
  • scripts.com
  • securesignup.com




Recent Comments

Powered by Disqus




Back to articles

CSS sprite class for creating sprite image and CSS code generation

CSS sprite class can generate CSS sprite image from multiple provided images.

It provides basic image manipulations, like saving image, outputting to browser, etc

This class can also generate CSS code for sprite image usage, from HTML element ID's in which image is used, that could be provided together with image.

CSS code generation facilitates CSS sprite implementations to existing website structures.

For more information about CSS sprites you can read this article: CSS sprites to speed up page loading.

Contents

Download

Example codes

Generate CSS styles for sprite:

<?php

/*
 * This example shows how to generate css code and use it with created CSS sprite
 */
 
//declaring class instance
include("../css_sprite.class.php");
$sprite = new spritify();

//adding test images
$sprite->add_image("../test_images/php.jpg", "jpeg");
$sprite->add_image("../test_images/php.gif", "gif");
$sprite->add_image("../test_images/elephpant.png", "elephant");

//retrieving error
$arr = $sprite->get_errors();
//if there are any then output them
if(!empty($arr))
{
    foreach($arr as $error)
    {
        echo "<p>".$error."</p>";
    }
}
else
{
    //else generate CSS code for added images
    $string = $sprite->generate_css("./image_output_example.php");
    //outputting CSS code
    echo "<style type='text/css'> n";
    echo $string;
    echo "</style> n";
}
?>
<!-- HTML elements that use CSS sprites for background using generated CSS code -->
<div id='jpeg' style=' border:1px solid green;'>
</div>
<p>&nbsp;</p>
<div id='gif' style='float: right;background-color: green; border:1px solid red;'>
</div>
<p>&nbsp;</p>
<div id='elephant' style='background-color: red; border:1px solid green;'>
</div>

Generate CSS sprite image:

<?php

/*
 * This example shows how to output image to browser or get GD image resource
 */
 
//declaring class instance
include("../css_sprite.class.php");
$sprite = new spritify();

//adding test images
$sprite->add_image("../test_images/php.jpg", "jpeg");
$sprite->add_image("../test_images/php.gif", "gif");
$sprite->add_image("../test_images/elephpant.png", "elephant");

//retrieving error
$arr = $sprite->get_errors();
//if there are any then output them
if(!empty($arr))
{
    foreach($arr as $error)
    {
        echo "<p>".$error."</p>";
    }
}
else
{
    //returns GD image resource
    //$img = $sprite->get_resource();
    
    //outputs image to browser
    $sprite->output_image();    
}
?>

Examples in action

Example scripts provided with package in action:

Method list

Get errors

Back to method list

Method nameget_errors()
DescriptionReturns array with errors or empty array if there was no errors
Example output
Array
(
    [0] => Provided file ./image.png doesn't exist
)

Add new image to sprite

Back to method list

Method nameadd_image($image_path, $id="elem")
DescriptionAdds new image to sprite
Input parameters

string $image_path - path to image, for example "./images/head.png"

string $id - id of element in which this image will be used for CSS code generation

Output image to browser

Back to method list

Method nameoutput_image()
DescriptionOutputs image to browser like PHP generated images

Generate CSS code

Back to method list

Method namegenerate_css($path = "/css_sprite.png")
DescriptionGenerates CSS code (width, height, background-position) using element IDs provided when adding new images
Input parameters

string $path - path to created css image, for example "./images/sprite.png"

Example input

Three imags added with IDs jpeg, gif and elephant

Than called generate_css("./image_output_example.php") method

Example output

#jpeg { background-image: url(./image_output_example.php); background-position: -103px 0px; width: 297px; height: 184px; }
#gif { background-image: url(./image_output_example.php); background-position: 0px -184px; width: 400px; height: 298px; }
#elephant { background-image: url(./image_output_example.php); background-position: -267px -482px; width: 133px; height: 117px; }

Safe generated sprite image

Back to method list

Method namesafe_image($path = "")
DescriptionSaves generated sprite image. If path is provided image is saved to that path (server side), if not save dialog will be opened(client side)
Input parameters

string $path - path where to save CSS image on the server side.

Get image resource

Back to method list

Method nameget_resource()
DescriptionReturn GD image resource of generated sprite

Possible error messages

List of all errors and meanings

Error textMeaningSolution
Provided file IMAGE_PATH isn't correct image formatFile you are trying to add isn't image, or has unsupported format.Convert it to any supported format, like png, jpg or gif
Provided file IMAGE_PATH doesn't existFile you are trying to add doesn't existCheck your specified path and/or file/directory permissions

Latest changes

None for now

Rate us

Like our script? Rate it at PHP > Hot Scripts

Scripts.com
RATE ME!

Try it out and Rate on PHPclasses.org

Support

PHP classes support forum or comments below

Awards

CSS sprite class was nominated to Innovation Award and achieved 2nd place, thanks everyone for support


You may also be interested in:

Powered by BlogAlike.com

blog comments powered by Disqus