Creating a Dial With Images as Backgrounds

A `Dial` can be created that has its presentation determined by background images. This can be done with CSS, providing the images can be contained within the dimensions of the `Dial` elements.

The Markup

The only markup requirement is an element to contain the `Dial`

The JavaScript

The same JavaScript can be used as in the basic Dial example.

`Dial` extends the `Widget` class, following the same pattern as any widget constructor, accepting a configuration object to set the initial configuration for the widget.

After creating and configuring the new `Dial`, call the `render` method on your `Dial` object passing it the selector of a container object. This renders it in the container and makes it usable.

Some commonly used configuration attributes are shown below.

The CSS

In this example we add an image of a ball bearing to the dial `handle` object's background, this is the class `yui3-dial-handle`.

We'll also add an image of a circle of radial lines to the background ring object. To make these changes, we only need to do two things.

1. Remove some of the CSS styling on the elements we want to display as images.
2. Add the background URL to the image rule of the selectors of those objects as shown below.

Complete Example Source