JSFiddle - React, Tailwind, and code Playground

by David Thomas

HTML

<div id="pspThing" class="disabled">
    <img class="disabled" src="http://i.imgur.com/lCTVr.png" />
</div>
<ul id="enable">
    <li><a href="#">enable</a></li>
</ul>

CSS

#pspThing {
    background: transparent url(http://i.imgur.com/WpgNy.jpg) 0 0 no-repeat;
    height: 93px;
    width: 273px;
    border: 1px solid #000;
    margin: 0 auto;
    overflow: hidden;
}
#enable {
    width: 273px;
    margin: 0 auto;
    border: 1px solid #000;
    text-align: right;
}
#enable li {
    display: inline;
}
#pspThing img {
    display: none;
    opacity: 0.5;
}
#pspThing img.disabled {
    display: block;
}

JavaScript

$('#enable a').click(
    function(){
        $('#pspThing > img').toggleClass('disabled');
        if ($(this).text() == 'enable'){
            $(this).text('disable');
        }
        else {
            $(this).text('enable');
        }
        return false;
    });