Link con immagini: active=hover

[heternova]

Ciao,
ho la seguente domanda. Ho un menu, i cui link sono costituiti da immagini:

li.navequipe a {
display: block;
margin: 0px 35px 0px 0px;
padding: 0px;
border: 0px;
height: 20px;
width: 60px;
background-image: url(../img/buttonequipe.jpg);
background-repeat: no-repeat;
text-indent: -6000px;
}

li.navequipe a:hover {background-image: url(../img/buttonequipehover.jpg);}



Vorrei che nello stato attivo del link, per segnalare la pagina in cui l'utente si trova, l'immagine di fondo sia la stessa dell'hover. Ho quindi provato ad aggiungere:

li.navequipe a:active {background-image: url(../img/buttonequipehover.jpg);}

Questa regola non viene presa in considerazione. Perchè?
Grazie a tutti per l'aiuto
Heter

[fcaldera]

non succede nulla perchè è vero che se clicchi su un link quello assume lo stato active, tuttavia cambi pagina e la nuova pagina, non avendo "memoria" di quello che hai cliccato nella pagina precedente, non ti dà lo stato active su quel link

quindi devi portare dietro l'informazione su quale link hai cliccato e generare la lista di link ad esempio in modo dinamico.

In questo modo puoi assegnare una classe particolare al link che corrisponde alla pagina corrente e la regola per tale classe mostrerà lo sfondo che desideri

[heternova]

Grazie fcaldera,
la tua seconda frase, quella centrale per la risposta, mi è rimasta un po' criptica. Non riesco ad immaginarmi come "portar dietro l'informazione del link cliccato e generare la lista di link in modo dinamico". Intanto ci studio dietro, e guardo ancora in giro se trovo qualcosa sulla rete. Se però ti dovesse scappare un codice di esempio e lo postassi qui, mi sarebbe di grande aiuto.

Grazie mille !!
Heter

[heternova]

et voilà,
grazie del consiglio, ho risolto in questo modo:


li#navba a {
display: block;
list-style: none;
margin: 0px 30px 0px 0px;
padding: 0px;
border: 0px;
height: 20px;
width: 120px;
background-image: url(../img/buttonba.jpg);
background-repeat: no-repeat;
text-indent: -6000px;
}


li#navba a:hover {background-image: url(../img/buttonbahover.jpg);}

#navba a.navbaactive, #navba a:hover.navbaactive {background-image: url(../img/buttonbahover.jpg);}

Come hai detto tu ho aggiunto una classe per identificare il link attivo.
Grazie mille!!!
Heter

[fcaldera]

un esempio semplice in php per farti vedere come applicare lo stile in modo dinamico

prima definisci una classe con il background che desideri
CSS

.current {
  background-image: ....
}

PHP/HTML

<?php
# imposti la pagina corrente
$currpage = 3;
?>

>Pagina 1
>Pagina 2
>Pagina 3
>Pagina 4
>Pagina 5

Nell'esempio il codice dinamico così generato sarà

Pagina 1
Pagina 2
Pagina 3
Pagina 4
Pagina 5



Oppure puoi ottenere la stessa cosa in modo più automatico, senza impostare in ogni pagina dove ti trovi, ad esempio

PHP/HTML

<?php
# imposti la pagina corrente
$currpage = $GET['page'];
# qui controlli MOLTO bene il contenuto di $currpage
?>

>Pagina 1
>Pagina 2
>Pagina 3
>Pagina 4
>Pagina 5

e l'output è equivalente





Keywords: menu evidenziare link corrente attivo attuale dinamico stato active

[blekm]

forse questa discussione può essere utile...

http://forum.html.it/forum/showthrea...ht=link+attivo

[heternova]

grazie fcalder, mi piace il codice!
e grazie anche a blekm per il link

vi lascio il risultato del lavoro (quasi finito)

hydogg.com

buona serata
heter