jquerytools toggle play/pause button on scrollable

Question

Hello im building a slide on Jquerytools , using this http://jquerytools.org/demos/scrollable/gallery.html

And autoscroll http://jquerytools.org/documentation/scrollable/autoscroll.html

http://jsfiddle.net/PcAwU/

My problem is i can merge the Play & Pause buttons so if play is active, pause is displayed, and vice versa..

http://jsfiddle.net/PcAwU/ Here you can find my code..

Also if you can tell me how to change the

<button type="button" onClick="api.play()">Play</button>

Whit the normal img link so i can make image buttons like

<a href="#"  onClick="api.play()" ><img src="#"></a>

just with the correct syntax,

The last issue, is that in this part i try to replace de click with hover. but the first image wont show up when loading the page.. so i create a "malfunction" when i do that

this line is where i change "click" with "hover"

$(".items img").click(function() {

Answer 1

Solved using

<script>
$(function() {
var root = $(".scrollable").scrollable({circular: false}).autoscroll({ autoplay: true });

$(".items img").click(function() {
    // see if same thumb is being clicked
    if ($(this).hasClass("active")) { return; }

    // calclulate large image's URL based on the thumbnail URL (flickr specific)
    var url = $(this).attr("src").replace("_t", "");

    // get handle to element that wraps the image and make it semi-transparent
    var wrap = $("#image_wrap").fadeTo("medium", 0.5);

    // the large image from www.flickr.com
    var img = new Image();


    // call this function after it's loaded
    img.onload = function() {

        // make wrapper fully visible
        wrap.fadeTo("fast", 1);

        // change the image
        wrap.find("img").attr("src", url);

    };

    // begin loading the image from www.flickr.com
    img.src = url;

    // activate item
    $(".items img").removeClass("active");
    $(this).addClass("active");

// when page loads simulate a "click" on the first image
}).filter(":first").click();

// provide scrollable API for the action buttons
window.api = root.data("scrollable");

});


function toggle(el){
    if(el.className!="play")
    {
        el.className="play";
         el.src='images/play.png';
        api.pause();
    }
    else if(el.className=="play")
    {
        el.className="pause";
         el.src='images/pause.png';
        api.play();
    }

    return false;
}

</script>

And the buttons go like this:

<input type="image" src="images/atras.png" onclick="api.prev()" >

   <input type="image" src="images/pause.png" class="pause" onclick="toggle(this);" >

   <input type="image" src="images/adelante.png" onclick="api.next()" >

I hope this helps somebody