Creating image tabs with Jquery UI - css

Question

I want to use custom images as tabs to show and hide divs like this: http://jqueryui.com/tabs/
I also alternate images for the tab that is active but don't know how to implement them properly.
This guy was close but the code is messy and doesn't quite work: http://jsfiddle.net/5FVb7/1/
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<script>
$(function() {
$( "#tabs" ).tabs();
});
</script>
This is all of the scripting that the jQuery UI site seems to suggest is needed?
This is my html:
<div id="tabs">
<ul>
<li><img src="img/bt1.png" /></li>
<li><img src="img/bt4.png" /></li>
<li><img src="img/bt2.png" /></li>
<li><img src="img/bt3.png" /></li>
</ul>
<div id="tab1"><p> Words go here innit </p></div>
<div id="tab4"><p> Testa texta </p></div>
<div id="tab2"><p> eeyyeeeeee </p></div>
<div id="tab3"><p> Cheap as chips </p></div>
</div>
My CSS so far is just for positioning and some style - no functionality is present.

Answer 1

I think I'm probably missing something.
Moved your html to FIDDLE, added some net images, and everything works OK.
If you want specific images, you'll have to photoshop them, resize them to fit.
Is this what you're looking for?
HTML for one of the resized images
<li><a href="#tab2"><img height='42' width='42'
src="http://www.twitip.com/wp-content/uploads/2008
/11/twitter-button-small.png" /></a></li>