Pulsante immagine che resta nello stato HOVER... (Boh!)

[goat]

Con il seguente CSS ottengo l'effetto rollover su delle immagini linkate:

#pulsante{
width:142px;
height:44px;
overflow:hidden;
background:url(../images/pulsante.gif) top left no-repeat;
display:block;
}
#pulsante:hover{
background-position:bottom left;
}

Ogni pulsante ha il proprio CSS. Ho così creato un menù dal quale gestire una serie di DIV nascosti. Ora mi chiedevo: posso, sempre tramite i CSS, fare in modo che quando un pulsante viene cliccato, e visualizzato quindi il DIV corrispondente, rimanga nella stato hover?
'Sta cosa l'abbiamo, io e i miei compari, già fatta per un altro sito, ma usando PHP. C'è speranza anche con i CSS? Oppure devo riparare su JS?
Grassie,
goat

[pierofix]

Hai già provato così?

#pulsante:hover,
#pulsante:active
{
   background-position:bottom left;
}

Se non ricordo male, però, non vi è molta compatibilità tra i vari browser in questo caso.

[goat]

Infatti funziona su IE ma non su FF o Safari. Che si fa? Con JavaScript posso farcela?

[pierofix]

Direi che puoi aggiungere una classe al CSS, diciamo così:

#pulsante:hover,
.pulsante_corrente
{
   background-position:bottom left;
}

e attribuirla poi al pulsante in questione mediante la solita tecnica di attribuzione delle classi via javascript.

[goat]

Che secondo me funzionerà sicuramente. Solo... quale sarebbe la solita tecnica di attribuzione delle classi via javascript?
So di non sapere.

[pierofix]

Scusa, avevo dato per scontato che sapessi di cosa stavo parlando. Faccio un esempio generico:

XHTML

<ul id="menu">[*]<a>Uno</a>[*]<a>Due</a>[*]<a>Tre</a>[/list]


CSS

a:hover,
.link_corrente
{
   color:red;
}


Javascript

window.onload = function()
{
   var menu = document.getElementById('menu')
   var pulsanti = menu.getElementsByTagName('a')

   function pulisci_selezione()
   {
      for (var i = 0; i < pulsanti.length; i++)
      {
         pulsanti.item(i).removeAttribute('class')
      }
   }

   for (var i = 0; i < pulsanti.length; i++)
   {
      pulsanti.item(i).onclick = function()
      {
         pulisci_selezione()
         this.className = 'link_corrente'
      }
   }
}

[goat]

Ho fatto un paio di test con il tuo esempio, e su FF funziona bene. Per IE la cosa cambia: cliccato un link questo diventa rosso, ma lo resta anche se clicco quello successivo. A 'sta cosa come si fa ad ovviare? Intanto lo adatto al mio caso e lo testo su Safari...

[pierofix]

Forse caca-IE ha problemi ad interpretare questo:

pulsanti.item(i).removeAttribute('class')

Si può anche scrivere come segue, anche se ovviamente è molto meno elegante ( IE ):

pulsanti.item(i).className = ''

[goat]

Ok, adesso funziona su IE, FF e anche Safari.
Ora il difficile sarà adattare i menù del sito al quale sto lavorando. Ma con la dovuta calma...
Grazie dell'aiuto,
goat

PS: Internet Explorer è un'immensa e pesante croce che grava sulle spalle di tutti gli sviluppatori web. Amen.