rollover con una sola immagine

[stiffa]

cercando nel forum qualcosa che velocizzasse il rollover...ho trovato il modo per usare una sola immagine, divisa in due e pramite css position mostrare la parte desiderata...
Problema e' che ho copiato quello che c'era sul forum...e non va una mazza....

ecco il codice che ho trovato. Questo quello della pagina css :

.chisiamo a:link, .chisiamo a:visited, .chisiamo a:active 
{ 
display: block; 
text-decoration: none; 
background: url(template_img/sxnav/chisiamo.jpg) no-repeat; 
background-position: 0px 0px; 
} 
.chisiamo a:hover 
{ 
display: block; 
background-position: 0px -25px; 
}

quello da mettere nella pagina html...l'ho dedotto io visto che non c'era niente....

<link rel = "stylesheet" type = "text/css" href = "pre.css">


<img src = "pippo.jpg" ></img>


cosi pensavo facesse qualcosa...

dove sbaglio???

pls help

[pierofix]

Aspetta, ragioniamo su un esempietto semplice e ridotto.

Innanzitutto sarebbe meglio usare un link testuale, non con un'immagine. Poniamo, quindi, questo:

Blog

Poniamo poi di avere un'immagine (che useremo come sfondo) di dimensioni 100×60 px² (i 60px di altezza sono dati dai due pulsanti da 30px l'uno, messi uno sotto l'altro). La chiameremo sfondo_blog.png. Diciamo che i primi 30px corrispondono allo stato normale, mentre gli altri allo stato 'hover'. Procediamo:

a
{
   display:block;
   width:100px; height:30px;
   text-indent:-1000em;
   background:url('sfondo_blog.png') no-repeat 0 0;
}
a:hover
{
   background-position:0 30px;
}

Prova e facci sapere.

[stiffa]

grazie mille...funziona...

ma avrei un altra domanda....ora ho preparato un immagine con vari stati....onMouseOver,onClick,onMouseOut...ecc....t utte su una img...con il tuo trucco mi sposto in base alla proprieta di a:

dal resto del sito...ad un certo evento...non ti sto a dire cosa....fai finta che leggo una variabile php e se e a 1 dovrebbe cambiarmi l'immagine....in una porzioncina della mia multiimmagine...

Come lo dico ora? ossia...mi vien da dire....if(variabile ==1){allora cambiami a:visiten in background-position 100 100px}

spero di esser stato abb chiaro..

ciao e grazie ancora

p.s.

Ma come torno allo stato iniziale con il tuo trucchetto? se uso a:visited è la fine....anche se refresho....per lui quel link e' sempre visited....e non mi fa piu il rollover tanto sudato...

[pierofix]

Non so se ho capito bene. Che ne dici di predisporre delle classi CSS ed attribuirle al link in base al valore della variabile?

[stiffa]

oook....ottima idea...ci provo

Sei stato talmente rapido che mentre scrivevi mi e' venuta in mente un altra cosa...
Ma come torno allo stato iniziale con il tuo trucchetto? se uso a:visited è la fine....anche se refresho....per lui quel link e' sempre visited....e non mi fa piu il rollover tanto sudato...

[pierofix]

Bè, se ci pensi, è giusto che sia così. Se un link è visitato sarebbe il caso di evidenziare questa informazione.

Se si tratta della navigazione principale, forse, potresti evitare di usare lo stato visited. Non ha poi così gran significato, in quel contesto.

[stiffa]

......ok....ora smanetto un po ...casomai torno...grazie mille