Individual HTML buttons: One file – 15KB!

Button-AnimationFirst of all, I would like to thank all those enthusiastic about CSS and HTML for being curious about this experiment and for the interest related to this blog in tips and tricks around the topic e-commerce. Related to the core topic of this blog, the individual product configuration on the internet by means of the product configurator INCONFIG, and its possibilities to generate customized templates, you sometimes digress to HTML and CSS baubles, during creative phases. In such a moment the following experiment arose in order to implement customized form elements – in this case buttons – quickly and easily in a web site. The objective was to directly use individual buttons on a web site with only one (pseudo) CSS-file. I do not want to address the benefit of such a solution at this point, as this approach is to be only theoretically.


The experiment

Base64-Sprite-GIF
Base64-Sprite-GIF (Fig. 1)

Many roads lead to Rome – and sometimes only few. The basic idea: A single PHP-file delivers both the sprite image (Fig. 1) and the CSS definition of the single buttons to the client. After integration of this pseudo CSS-file into the HTML head of the website (codeblock 3), the own customized buttons can be used immediately in the HTML source text. I willingly do not address the optional possibility, namely the implementation of base64-coded images in CSS, at this point, as on the one hand, this technique is not operative in the version 5-7 of Internet Explorer and, on the other hand, as the data volume to be sent to the client could increase to more than 30%.


Show picture by PHP

At first, the binary data of the sprite images generated by means of a photo programme have to be converted via Base64 to readable characters, in order to be able to handle the image in PHP. Images in the formats JPEG, GIF, and PNG can easily be converted via online services like base64-image.de to a readable string. Afterwards, we take care by the following element of the programme at the beginning of the PHP-file that the file shows itself as a GIF-image, when executing a query with the GET parameter “sprite”. In this case, we terminate the script immediately by showing the image via the PHP exit function.

if( isset( $_GET['sprite'] ) ){

    header('Content-Type: image/gif');

    exit( base64_decode( /* ... Base64-Bild-String ... */ ) );
}

Displaying CSS dynamically

In the next programme element, we can assume that the client does not query any picture, and therefore, we can display the CSS needed for the buttons. We could describe any of the buttons contained in our graphics sprite by fixed CSS declarations or we use a PHP function that undertakes this task for us. I chose the second option, as we are already within a PHP-script, and as it meets the requirements for an extreme compact PHP-file. It enables us to react quickly and easily to new button proportions due to a modified sprite image.

function GenerateButton( $ClassName, $Height, $Width, $OffsetTop, $OffsetLeft ){

    /* Set the three background-position-values */
    $Default   = $OffsetLeft . 'px ' . ( $OffsetTop            ) . 'px';
    $MouseOver = $OffsetLeft . 'px ' . ( $OffsetTop-$Height    ) . 'px';
    $MouseDown = $OffsetLeft . 'px ' . ( $OffsetTop-$Height *2 ) . 'px';

    /* Output some CSS */
}

For this function, I presume that the three button states “Default”, “Mouseover” and “Mousedown” are vertically available in exactly the same proportions as in graphics sprite (as in Fig. 1) . For modern browsers, we can rely on the CSS pseudo selectors :hover and :active for the two states “Mouseover” and “Mousedown”. The workaround for old Internet Explorers, versions 5-7, will be described in the next section. Furthermore, we provide all buttons with a background image to be delivered by the same PHP-file, by referring the image path to ourselves and by delivering the previously defined GET-parameter “sprite”.

background-image: url( <?php echo basename(__FILE__) ?>?sprite );

The last step in our PHP-file is now to define customized button areas on the sprite graphics by means of our previously defined function “GenerateButton”, which we call one time for each button.


Background position IE 5-7 compatibility

Unfortunately, today’s standard technology combining the CSS pseudo classes :hover and :action and the CSS feature “background position” is not completely compatible with the Internet Explorer’s smaller version 8. Microsoft offers remedies by means of Dynamic Properties (expressions) and CSS-Inline-Javascript.

background-position : expression(

  this.onmouseover = new Function( "this.style.backgroundPosition = '0px -47px';" )
, this.onmouseout  = new Function( "this.style.backgroundPosition = '0px 0px'  ;" )
, this.onmousedown = new Function( "this.style.backgroundPosition = '0px -94px';" )
, this.onmouseup   = new Function( "this.style.backgroundPosition = '0px -47px';" )

);

Integration in the HTML page

Using the buttons in an HTML page is very easy! After having integrated the generated PHP-file as CSS-path in the HTML-head, we can integrate the required buttons via the CSS-class “button”, as well as via the customized CSS-classes in the script per button.

<!DOCTYPE html>
<html>
	<head>
		<link type="text/css" href="buttons.css.php" rel="stylesheet">
	</head>
	<body>
		<div class="button l"></div>
		<div class="button r"></div>
		<div class="button t"></div>
		<div class="button u"></div>
		<div class="button n"></div>
		<div class="button m"></div>
		<div class="button y"></div>
		<div class="button z"></div>
	</body>
</html>

You can download for free the source text of the file below, change it at pleasure and use it freely. If you have any questions and comments, I look forward to receiving your emails at blog@inconfig.com

Download the experiment here: Experiment.Individual.Buttons.zip