Thumbsnails and CSS

[Frank Schäfer]

Hi,

I want to overlay the thumbnails with a transparent PNG on hover and active status. This is the CSS snippet which should do the work:

.slideshow-thumbnails a:hover, 

.slideshow-thumbnails-active
{
    background-image            :    url(../images/t2.png);
}

That works for the hover but not for the active status. Nothing happens at all. The assigned background image for the a.slideshow-thumbnails-active will not show.

With Firebug I can see, that the class for all a-tags of the thumbnails stays on .slideshow-thumbnails-hidden. I'd expect, that it will be changed to -active but that's not happening.

When I use the original styling CSS, I can see, that background-color and opacity show up as inline styling in the generated HTML code. But as soon as I assign the background-image, it's not showing in the HTML code.

My first thought was to inject (somehow) another CSS class for the active state. But I'm a noob to mootools. Therefore I'd really appreciate, help.


Thx
Frank from germany

[Frank Schäfer]

OK, I got it.

In case anybody else needs this, here's what I've done.

At the end of file slideshow.js, look for

a.store('active', false);
var inactive = this.classes.get('thumbnails', 'inactive');

and add the following lines:

var activeid  = uid+i;
var kette = 'li#'+activeid+' a';
$$(kette).removeClass('active');