[jQuery] jQuery Cycle pager with images

[matttr]

Hi,

I am fairly new to both jWuery and jQuery Cycle, but I have managed to
set-up my slideshow using images as the pagers.  The problem is that I
want to be able to indicate which slide is currently being displayed
by toggling the pager image to unique one when it is active.
Essentially what I want to do is achieve the same sort of effect as
the .activeSlide attribute, but using images instead of CSS.  Relevant
code below.

<script type="text/javascript">
$(function() {
$('#topleft').cycle({
    fx:    'fade',
    speed:  2500,
    pager:  '#nav',
    pagerAnchorBuilder: function(idx, slide) {
    // return sel string for existing anchor
    return '#nav li:eq(' + (idx) + ') a';
        }
    });
});
$(function() {
$('#pauseButton').click(function() {
    $('#topleft').cycle('pause');
});
$(function() {
$('#playButton').click(function() {
    $('#topleft').cycle('resume');
});
});
});

<div id="navbar">
    <ul id="nav">
        <li><a class="cyclebutton" href="#"><img  src="img/tab1.gif"
width="20"

height="20"></a></li>
        <li><a class="cyclebutton" href="#"><img  src="img/tab2.gif"
width="20"

height="20"></a></li>
        <li><a class="cyclebutton" href="#"><img  src="img/tab3.gif"
width="20"

height="20"></a></li>
    </ul>

<div id="topleft" class="pics">

    <a href="http://www.edc.ca/english/insurance.htm";><img id="1"
src="images1.jpg" width="748" height="272"></a>
    <a href="http://www.edc.ca/english/bonding.htm";><img id="2"
src="images2.jpg" width="748" height="272"></a>
    <a href="http://www.edc.ca/english/
corporate_domestic_powers.htm"><img id="3" src="images3.jpg"
width="748"

height="272"></a>

</div>
<input type="image" id="playButton" value="pause"
src="jquery.animated.innerfade/img/play.gif" width="20"

height="20">


<input type="image" id="pauseButton" value="play"
src="jquery.animated.innerfade/img/pause.gif" width="20"

height="20">
</div>