Rollover per più icone che non funziona...

[goat]

'Giorno,
dal titolo il mio post potrebbe sembrare l'ennesimo sui rollover, ma credo che si tratti di un caso a parte. Intanto inizio col postare il codice che ho usato e che funziona su tutti i browser:

Questo il CSS:

.rollover a {
    width:178px;
    height:178px;
    background:url(img.jpg) top left no-repeat;
    display:block;
    }
.rollover a:hover { 
    background-position:0 -178px;
    } 

E questo l'HTML:

<div class="rollover">
    [url="#null"][/url]
</div> 

'Sta roba funzia benissimo. Però la galleria alla quale 'sto lavorando è formata da più icone diverse tra loro. Questo non sarebbe un problema visto che mi basterebbe usare dell'altro CSS.

Il vero cruccio arriva adesso: la galleria è gestita dinamicamente, quindi ogni icona viene richiamata usando PHP. Allora per permettere al mio programmatore di richiamare tutte le icone quante sono quelle che servono ho messo uno style="background:url(img.jpg) top left no-repeat;" al tag <a>.
Non funziona con nessun browser!
Eppure la cosa dovrebbe avere una sua logica. O sbaglio?

Alla fine a me serve che nel codice HTML compaia il nome dell'immagine, così da permettere al PHP di generare tanti tag <a> quante sono le icone.

E' da ieri che provo e riprovo e... boh!
Vorrei evitare, se possibile, l'uso di JS. Questo visto che non l'abbiamo usato in nessuna parte del sito.
Qualche consiglio, link, esempio, illuminazione, manifestazione divina?
Grassie,
goat

[Mich_]

Non so se ho capito. Credo che ti serva definire (in piu`) un id diverso per ogni link.

Se le immagini di sfondo di tutti i link sono grandi uguali (oppure puoi fare in modo che la seconda immagine inizi per tutti nello stesso punto), puoi usare:
CSS

a.rollover {
    width:178px;
    height:178px;
    background-position: 0 0;
    background-repeat: no-repeat;
    display:block;
}
a.rollover:hover {
    background-position: 0 -178px;
}

#link1 { background-image: url(img1.jpg); }
#link2 { background-image: url(img2.jpg); }
#link3 { background-image: url(img3.jpg); }
...

Con l'HTML che diventa:

link Uno
link Due
link Tre
...

Nota che ho applicato la classe direttamente al link, e non al blocco che lo contiene

Se proprio vuoi applicare il CSS inline (cosa tendenzialmente da evitare, ma per programmi lato server puo` essere comoda), puoi togliere i vari #linkN dal CSS, ed usare invece il codice HTML:

link Uno
link Due
link Tre
...

[goat]

Ecco, proprio quello che cercavo. Funziona perfettamente.
Grazie mille,
goat