Custom image button with jQuery Mobile

Question

I'm trying to build an interface for my first mobile app and the app has to work on both Android and Windows Phone, so I'm using PhoneGap + jQuery Mobile.

To design the UI i'm working with Appery.

What I need to do is to have something like a full screen toggle button with a custom image on it.

I've got 3 copies of the image, one for each status.

Let's say that I have:

• Image on.png for the on status
• Image off.png for the off status
• Image pressed.png to be shown until the user releases the button

I'm using this code to show the first image on the button:

$("[name='toggleOnOff']").text("").append("<img height=\"300\" src=\"off.png\" width=\"280\"/>").button();

but I don't know how to do the different states to customize my button.

I've tried with ThemeRoller but it just allows me to change the button's color and that's not what I need.

EDIT: This is the HTML for the button:

<a data-role="button" name="toggleOnOff" dsid="toggleOnOff" class='  mobilebutton2'
    id='j_5' data-corners="true" data-mini="false" data-theme="a" tabIndex="2">
    Button
</a>

Answer 1

Working example: http://jsfiddle.net/Gajotres/GFnyg/

HTML :

<a data-role="button" class="toggleOnButton" id='toggleButton' data-corners="true" data-mini="false" data-theme="a" tabIndex="2"></a>

CSS :

.toggleOnButton {
    width: 280px !important;    
    height: 300px !important;   
    background: transparent url('http://www.projectpuppylove.org/wp-content/uploads/2013/01/cropped-puppy_vet.jpg') no-repeat center center !important; 
}

.toggleOffButton {
    background: transparent url('http://www.strawberryreef.com/images/Accessories/G4animals/cat2_pink.jpg') no-repeat center center !important;   
}

.toggleOnButton:active {
    background: transparent url('http://talliscountry.co.uk/uploads/Small%20Pets.jpg') no-repeat center center !important; 
}

Javascript :

$(document).on('pagebeforeshow', '#index', function(){ 
    $("#toggleButton").on("click", function(){
        $(this).toggleClass("toggleOffButton");
    });    
});