I recently came across a cool implementation using clicks and jQuery fade effects to show a div when a button is clicked and then change the state of the button. Check it out here: http://jsfiddle.net/ttj9J/5/
HTML
<a class="link" href="#" data-rel="content1"><img src="http://i.imgur.com/vi1KLp9.png"></a>
<a class="link" href="#" data-rel="content2"><img src="http://i.imgur.com/u1SbuRE.png"></a>
<a class="link" href="#" data-rel="content3"><img src="http://i.imgur.com/u1SbuRE.png"></a>
<a class="link" href="#" data-rel="content4"><img src="http://i.imgur.com/u1SbuRE.png"></a>
<a class="link" href="#" data-rel="content5"><img src="http://i.imgur.com/u1SbuRE.png"></a>
<div class="content-container">
<div id="content1">This is the test content for part 1</div>
<div id="content2">This is the test content for part 2</div>
<div id="content3">This is the test content for part 3</div>
<div id="content4">This is the test content for part 4</div>
<div id="content5">This is the test content for part 5</div>
</div>
CSS
.content-container {
position: relative;
width: 400px;
height: 400px;
}
.content-container div {
display: none;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
JQUERY
$(".link").click(function(e) {
e.preventDefault();
$('.content-container div').fadeOut('slow');
$('#' + $(this).data('rel')).fadeIn('slow');
$(".link img").attr("src", "http://i.imgur.com/u1SbuRE.png");
$(this).find("img").attr("src", "http://i.imgur.com/vi1KLp9.png");
});
$( document ).ready(function() {
$(".link")[0].click();
});
Although this setup works well, I am looking to have a different button with a unique pressed button image for each of the five buttons. Can anyone provide some guidance on this?