Question

Ok, I have this thing working. Rollover the links and it changes the banner/pic. Fantastic. Question is this: How can I change the text from 1,2,3… to whatever I want? In addition, how can I apply background images, hover, and active treatments. In the example at http://malsup.com/jquery/cycle/pager5.html, I am using the #nav a {blah, blah} to affect the yellow box and border, but when I add an image it does nothing. Furthermore the ability to change the text seems to be buried in the actual Cycle Plugin. Anyone know how to do this?

Here is my code

javascript:

$('#slideshow').cycle({ 
    speed:      200,
    timeout:    0, 
    pager:      '#tabs', 
    pagerEvent: 'mouseover' 
});

CSS (image not showing thought)

#tabs a {
    border-style: none;
    height: 47px;
    width: 192px;
    background-image: url(../images/tabback.png);
    -moz-background-clip:border;
    -moz-background-inline-policy:continuous;
    -moz-background-origin:padding;
    background: none no-repeat scroll 0 0;
    text-decoration:none;
}

and the HTML is not that important but I am spitting out the nav links at @tabs.

Answer 1

None of these recs seemed to work so I hacked it a bit. Just hid the #tabs img tag, used #tabs, #tabs a, and #tabs a:hover to get the effect I wanted. Then created a div inside tags that was absolute to get the unique text I wanted. Lastly, changed #tabs a:activeSlide to match #tabs a:hover to get rid of the hover flickering when on the div but over the text.