SO fiddle

Test Fiddle mainly for SO Questions

by Nick Craver

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.4/themes/overcast/jquery-ui.css">
<div id="control">
    <a href="#" id="pause"></a>
    <a href="#" id="next"></a>
</div>

CSS

a { display: inline-block; width: 20px; height: 20px; }
#pause { border: solid 1px green; }
#play { border: solid 1px red; }
#next { border: solid 1px blue; }

JavaScript

$('#control').delegate("#pause", "click", function(event) {
    $(this).css("background-image", "url(../images/controls_play.png)")
           .attr('id', 'play');
}).delegate("#play", "click", function(event) {
    $(this).css("background-image", "url(../images/controls_pause.png)")
           .attr('id', 'pause');
});