#

Jump to Table of Contents

# Example: Dial With Image Background

This example shows how to create a `Dial` widget using background images for the ring and the handle.

### 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

Note: be sure to add the `yui3-skin-sam` classname to the page's `<body>` element or to a parent element of the widget in order to apply the default CSS skin. See Understanding Skinning.

    <body class="yui3-skin-sam"> <!-- You need this skin class -->

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

    <div id="demo"></div>

#### 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.

    YUI().use('dial', function(Y) {

        var dial = new Y.Dial({
            min:-220,
            max:220,
            stepsPerRevolution:100,
            value: 30
        });
        dial.render('#demo');

    });

#### 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.

    .yui3-skin-sam .yui3-dial-content .yui3-dial-handle{
        background:url(../assets/dial/images/ball_bearing.png) no-repeat;
        opacity:1; /* Normally the handle is not full opacity in non-VML case */
    }
    .yui3-skin-sam .yui3-dial-content .yui3-dial-ring{
        box-shadow: none;
        -moz-border-radius: none;
        -webkit-border-radius: none;
        -moz-box-shadow: none;
        -webkit-box-shadow: none;
        background:url(../assets/dial/images/bkg_ring_of_lines.png) no-repeat scroll 0px 0px;
    }
    .yui3-skin-sam .yui3-dial-content .yui3-dial-center-button {
        box-shadow: none;
        -moz-border-radius: none;
        -webkit-border-radius: none;
        -moz-box-shadow: none;
        background:none;
    }
    /* Hide all the VML ovals in IE. */
    .yui3-skin-sam .yui3-dial-ring-vml v\:oval {
        visibility:hidden;
    }
    /* Show the marker VML oval */
    .yui3-skin-sam .yui3-dial-ring-vml .yui3-dial-marker-vml v\:oval {
        visibility:visible;
    }
    .yui3-skin-sam .yui3-dial-content .yui3-dial-ring-vml{
        background:url(../assets/dial/images/bkg_ring_of_lines.png) no-repeat scroll 0px 0px;
    }
    .yui3-skin-sam .yui3-dial-content .yui3-dial-handle-vml{
        background:url(../assets/dial/images/ball_bearing_8.png) no-repeat scroll 0px 0px;
    }
    .yui3-skin-sam .yui3-dial-content .yui3-dial-center-button-vml {
        background:url(../assets/dial/images/empty.png);
    }

### Complete Example Source

    <!DOCTYPE HTML>
    <html>
    <script src="http://yui.yahooapis.com/3.10.3/build/yui/yui-min.js"></script>

    <style>
    .yui3-skin-sam .yui3-dial-content .yui3-dial-handle{
        background:url(../assets/dial/images/ball_bearing.png) no-repeat;
        opacity:1; /* Normally the handle is not full opacity in non-VML case */
    }
    .yui3-skin-sam .yui3-dial-content .yui3-dial-ring{
        box-shadow: none;
        -moz-border-radius: none;
        -webkit-border-radius: none;
        -moz-box-shadow: none;
        -webkit-box-shadow: none;
        background:url(../assets/dial/images/bkg_ring_of_lines.png) no-repeat scroll 0px 0px;
    }
    .yui3-skin-sam .yui3-dial-content .yui3-dial-center-button {
        box-shadow: none;
        -moz-border-radius: none;
        -webkit-border-radius: none;
        -moz-box-shadow: none;
        background:none;
    }
    /* Hide all the VML ovals in IE. */
    .yui3-skin-sam .yui3-dial-ring-vml v\:oval {
        visibility:hidden;
    }
    /* Show the marker VML oval */
    .yui3-skin-sam .yui3-dial-ring-vml .yui3-dial-marker-vml v\:oval {
        visibility:visible;
    }
    .yui3-skin-sam .yui3-dial-content .yui3-dial-ring-vml{
        background:url(../assets/dial/images/bkg_ring_of_lines.png) no-repeat scroll 0px 0px;
    }
    .yui3-skin-sam .yui3-dial-content .yui3-dial-handle-vml{
        background:url(../assets/dial/images/ball_bearing_8.png) no-repeat scroll 0px 0px;
    }
    .yui3-skin-sam .yui3-dial-content .yui3-dial-center-button-vml {
        background:url(../assets/dial/images/empty.png);
    }
    </style>

    <body class="yui3-skin-sam"> <!-- You need this skin class -->
        <div id="demo"></div>
    </body>

    <script>
    YUI().use('dial', function(Y) {

        var dial = new Y.Dial({
            min:-220,
            max:220,
            stepsPerRevolution:100,
            value: 30
        });
        dial.render('#demo');

    });
    </script>
    </html>