javascript image rotator issue
<p>I have created image banner rotator which have three image icons at the right bottom side of the banner. I want if a user mouse hover on the icon the banner should get changed accordingly. Right now its working but onClick.
and i want on mouse hover.</p>

<pre><code>/*

Title:      jShowOff: a jQuery Content Rotator Plugin
Author:     Erik Kallevig
Version:    0.1.2
Website:    http://ekallevig.com/jshowoff
License:    Dual licensed under the MIT and GPL licenses.

jShowOff Options

animatePause :      whether to use 'Pause' animation text when pausing [boolean, defaults to true]
autoPlay :          whether to start playing immediately [boolean, defaults to true]
changeSpeed :       speed of transition [integer, milliseconds, defaults to 600]
controls :          whether to create &amp; display controls (Play/Pause, Previous, Next) [boolean, defaults to true]
controlText :       custom text for controls [object, 'play', 'pause', 'previous' and 'next' properties]
cssClass :          custom class to add to .jshowoff wrapper [string]
effect :            transition effect [string: 'fade', 'slideLeft' or 'none', defaults to 'fade']
hoverPause :        whether to pause on hover [boolean, defaults to true]
links :             whether to create &amp; display numeric links to each slide [boolean, defaults to true]
speed :             time each slide is shown [integer, milliseconds, defaults to 3000]

*/

(function($) {


    $.fn.jshowoff = function(settings) {

        // default global vars
        var config = {
            animatePause : true,
            autoPlay : true,
            changeSpeed : 600,
            controls : true,
            controlText : {
                play :      'Play',
                pause :     'Pause',
                next :      'Next',
                previous :  'Previous'
            },
            effect : 'fade',
            hoverPause : true,
            links : true,
            speed : 3000
        };

        // merge default global variables with custom variables, modifying 'config'
        if (settings) $.extend(true, config, settings);

        // make sure speed is at least 20ms longer than changeSpeed
        if (config.speed &lt; (config.changeSpeed+20)) {
            alert('jShowOff: Make speed at least 20ms longer than changeSpeed; the fades aren\'t always right on time.');
            return this;
        };

        // create slideshow for each matching element invoked by .jshowoff()
        this.each(function(i) {

            // declare instance variables
            var $cont = $(this);
            var gallery = $(this).children().remove();
            var timer = '';
            var counter = 0;
            var preloadedImg = [];
            var howManyInstances = $('.jshowoff').length+1;
            var uniqueClass = 'jshowoff-'+howManyInstances;
            var cssClass = config.cssClass != undefined ? config.cssClass : '';


            // set up wrapper
            $cont.css('position','relative').wrap('&lt;div class="jshowoff '+uniqueClass+'" /&gt;');
            var $wrap = $('.'+uniqueClass);
            $wrap.css('position','relative').addClass(cssClass);

            // add first slide to wrapper
            $(gallery[0]).clone().appendTo($cont);

            // preload slide images into memory
            preloadImg();

            // add controls
            if(config.controls){
                addControls();
                if(config.autoPlay==false){
                    $('.'+uniqueClass+'-play').addClass(uniqueClass+'-paused jshowoff-paused').text(config.controlText.play);
                };
            };

            // add slide links
            if(config.links){
                addSlideLinks();
                $('.'+uniqueClass+'-slidelinks a').eq(0).addClass(uniqueClass+'-active jshowoff-active');
            };

            // pause slide rotation on hover
            if(config.hoverPause){ $cont.hover(
                function(){ if(isPlaying()) pause('hover'); },
                function(){ if(isPlaying()) play('hover'); }
            );};

            // determine autoPlay
            if(config.autoPlay &amp;&amp; gallery.length&gt;1) {
                timer = setInterval( function(){ play(); }, config.speed );
            };

            // display error message if no slides present
            if(gallery.length&lt;1){
                $('.'+uniqueClass).append('&lt;p&gt;For jShowOff to work, the container element must have child elements.&lt;/p&gt;');
            };


            // utility for loading slides
            function transitionTo(gallery,index) {

                var oldCounter = counter;
                if((counter &gt;= gallery.length) || (index &gt;= gallery.length)) { counter = 0; var e2b = true; }
                else if((counter &lt; 0) || (index &lt; 0)) { counter = gallery.length-1; var b2e = true; }
                else { counter = index; }


                if(config.effect=='slideLeft'){
                    var newSlideDir, oldSlideDir;
                    function slideDir(dir) {
                        newSlideDir = dir=='right' ? 'left' : 'right';
                        oldSlideDir = dir=='left' ? 'left' : 'right';                   
                    };


                    counter &gt;= oldCounter ? slideDir('right') : slideDir('right') ;

                    $(gallery[counter]).clone().appendTo($cont).slideIt({direction:newSlideDir,changeSpeed:config.changeSpeed});
                    if($cont.children().length&gt;1){
                        $cont.children().eq(0).css('position','absolute').slideIt({direction:oldSlideDir,showHide:'hide',changeSpeed:config.changeSpeed},function(){$(this).remove();});
                    };
                } else if (config.effect=='fade') {
                    $(gallery[counter]).clone().appendTo($cont).hide().fadeIn(config.changeSpeed,function(){if($.browser.msie)this.style.removeAttribute('filter');});
                    if($cont.children().length&gt;1){
                        $cont.children().eq(0).css('position','absolute').fadeOut(config.changeSpeed,function(){$(this).remove();});
                    };
                } else if (config.effect=='none') {
                    $(gallery[counter]).clone().appendTo($cont);
                    if($cont.children().length&gt;1){
                        $cont.children().eq(0).css('position','absolute').remove();
                    };
                };

                // update active class on slide link
                if(config.links){
                    $('.'+uniqueClass+'-active').removeClass(uniqueClass+'-active jshowoff-active');
                    $('.'+uniqueClass+'-slidelinks a').eq(counter).addClass(uniqueClass+'-active jshowoff-active');
                };
            };

            // is the rotator currently in 'play' mode
            function isPlaying(){
                return $('.'+uniqueClass+'-play').hasClass('jshowoff-paused') ? false : true;
            };

            // start slide rotation on specified interval
            function play(src) {
                if(!isBusy()){
                    counter++;
                    transitionTo(gallery,counter);
                    if(src=='hover' || !isPlaying()) {
                        timer = setInterval(function(){ play(); },config.speed);
                    }
                    if(!isPlaying()){
                        $('.'+uniqueClass+'-play').text(config.controlText.pause).removeClass('jshowoff-paused '+uniqueClass+'-paused');
                    }
                };
            };

            // stop slide rotation
            function pause(src) {
                clearInterval(timer);
                if(!src || src=='playBtn') $('.'+uniqueClass+'-play').text(config.controlText.play).addClass('jshowoff-paused '+uniqueClass+'-paused');
                if(config.animatePause &amp;&amp; src=='playBtn'){
                    $('&lt;p class="'+uniqueClass+'-pausetext jshowoff-pausetext"&gt;'+config.controlText.pause+'&lt;/p&gt;').css({ fontSize:'62%', textAlign:'center', position:'absolute', top:'40%', lineHeight:'100%', width:'100%' }).appendTo($wrap).addClass(uniqueClass+'pauseText').animate({ fontSize:'600%', top:'30%', opacity:0 }, {duration:500,complete:function(){$(this).remove();}});
                }
            };

            // load the next slide
            function next() {
                goToAndPause(counter+1);
            };

            // load the previous slide
            function previous() {
                goToAndPause(counter-1);
            };

            // is the rotator in mid-transition
            function isBusy() {
                return $cont.children().length&gt;1 ? true : false;
            };

            // load a specific slide
            function goToAndPause(index) {
                $cont.children().stop(true,true);
                if((counter != index) || ((counter == index) &amp;&amp; isBusy())){
                    if(isBusy()) $cont.children().eq(0).remove();
                    transitionTo(gallery,index);
                    pause();
                };
            };  

            // load images into memory
            function preloadImg() {
                $(gallery).each(function(i){
                    $(this).find('img').each(function(i){
                        preloadedImg[i] = $('&lt;img&gt;').attr('src',$(this).attr('src'));                   
                    });
                });
            };

            // generate and add play/pause, prev, next controls
            function addControls() {
                $wrap.append('&lt;p class="jshowoff-controls '+uniqueClass+'-controls"&gt;&lt;a class="jshowoff-play '+uniqueClass+'-play" href="#null"&gt;'+config.controlText.pause+'&lt;/a&gt; &lt;a class="jshowoff-prev '+uniqueClass+'-prev" href="#null"&gt;'+config.controlText.previous+'&lt;/a&gt; &lt;a class="jshowoff-next '+uniqueClass+'-next" href="#null"&gt;'+config.controlText.next+'&lt;/a&gt;&lt;/p&gt;');
                $('.'+uniqueClass+'-controls a').each(function(){
                        if($(this).hasClass('jshowoff-play')) $(this).click(function(){ isPlaying() ? pause('playBtn') : play(); return false; } );
                        if($(this).hasClass('jshowoff-prev')) $(this).click(function(){ previous(); return false; });
                        if($(this).hasClass('jshowoff-next')) $(this).click(function(){ next(); return false; });

                });
            };  

            // generate and add slide links
            function addSlideLinks() {
                $wrap.append('&lt;p class="jshowoff-slidelinks '+uniqueClass+'-slidelinks"&gt;&lt;/p&gt;');
                $.each(gallery, function(i, val) {
                    var linktext = $(this).attr('title') != '' ? $(this).attr('title') : i+1;
                    $('&lt;a class="jshowoff-slidelink-'+i+' '+uniqueClass+'-slidelink-'+i+'" href="#null"&gt;'+linktext+'&lt;/a&gt;').bind('hover', {index:i}, function(e){ goToAndPause(e.data.index); return false; }).appendTo('.'+uniqueClass+'-slidelinks');
                });
            };      


        // end .each
        });

        return this;

    // end .jshowoff
    };

// end closure
})(jQuery);




(function($) {

    $.fn.slideIt = function(settings,callback) {

        // default global vars
        var config = {
            direction : 'left',
            showHide : 'show',
            changeSpeed : 600
        };

        // merge default global variables with custom variables, modifying 'config'
        if (settings) $.extend(config, settings);

        this.each(function(i) { 
            $(this).css({left:'auto',right:'auto',top:'auto',bottom:'auto'});
            var measurement = (config.direction == 'left') || (config.direction == 'right') ? $(this).outerWidth() : $(this).outerHeight();
            var startStyle = {};
            startStyle['position'] = $(this).css('position') == 'static' ? 'relative' : $(this).css('position');
            startStyle[config.direction] = (config.showHide == 'show') ? '-'+measurement+'px' : 0;
            var endStyle = {};
            endStyle[config.direction] = config.showHide == 'show' ? 0 : '-'+measurement+'px';
            $(this).css(startStyle).animate(endStyle,config.changeSpeed,callback);
        // end .each
        });

        return this;

    // end .slideIt
    };

// end closure
})(jQuery);




/*CSS Start*/

&lt;link rel="stylesheet" type="text/css" href="http://javasite.zones.internal/scripts/showoff.css"/&gt;

/*css Ends*/





&lt;!--HTML Starts--&gt;
&lt;div id="heroContainer"&gt; 

  &lt;div id="heroCenter"&gt;
        &lt;div&gt;&lt;a href="http://dev4:8680/site/statics/static_page.html?name=solutions/network-security-solutions" title=""&gt;&lt;img src="http://javasite.zones.internal/images/global/homepage/network-security-hero.gif" alt="Network Security Solutions" /&gt;&lt;/a&gt;&lt;/div&gt;

    &lt;div&gt;&lt;a href="http://dev4:8680/site/statics/static_page.html?name=solutions/storage-solutions" title=""&gt;&lt;img src="http://javasite.zones.internal/images/global/homepage/storage-hero.gif" alt="Storage Solutions" /&gt;&lt;/a&gt;&lt;/div&gt;

     &lt;div&gt;&lt;a href="http://dev4:8680/site/statics/static_page.html?name=solutions/virtualization-solutions" title=""&gt;&lt;img src="http://javasite.zones.internal/images/global/homepage/virtualization-hero.gif" alt="Virtualization Solutions" /&gt;&lt;/a&gt;&lt;/div&gt;


  &lt;/div&gt;
&lt;/div&gt;
&lt;!--HTML Ends--&gt;
</code></pre>

<p>Please help</p>

<p>Thanks,
Vikas</p>
