Stato giù di un pulsante

[teana7]

Buongiorno a tutti!

Sto costruendo un sito che ha una pulsantiera orizzontale in alto (e avendola inserita con barra di navigazione in DW non ho avuto problemi a dare i tre stati: alzata, rollover, abbassata)

e degli altri pulsanti, in un menu verticale, che aprono altre pagine per ogni pulsante di quella orizzontale.

(esempio pulsanti orizzontali: carne - pesce. Verticale: primi di carne - secondi di carne...etc etc)

Non posso aggiungere una seconda barra di navigazione e pur avendo creato in FW i 3 stati del pulsante, quando quest'ultimo lo inserisco con: COMUNE: IMMAGINE ROLLOVER, posso inserire solo l'alzata ed il rollover, quando sono perciò, tornando all'esempio, nella pagina "primi di carne" il pulsante è nella posizione alzata.

Vorrei invece che fosse naturalmente in quella abbassata.

Grazie
Teana

[Nobody33]

Non so se ho capito al 100%, ma potresti dare una classe .active{/*stile*/} che poi applichi al pulsante tuo che è attivo.

Altrimenti posta un po di codice o, meglio ancora, un link.

[teana7]

Allora questa è la barra di navigazione (in realtà dall'anteprima F12 ho scoperto che dopo aver cliccato non mi rimane lo stato abbassato, dura un secondo e poi torna nello stato alzato, quindi si è aggiunto questo secondo problema):

<div id="pulsantiera">
[img]../images/homepage.jpg[/img]
[img]../images/news.jpg[/img]
[img]../images/societa.jpg[/img]
[img]../images/prima.jpg[/img]
[img]../images/giovanile.jpg[/img]
[img]../images/multimedia.jpg[/img]
[img]../images/sponsor.jpg[/img]
[img]../images/rassegna.jpg[/img]</div>


Questo invece il codice dei pulsanti verticali:

<div id="primamenu">[img]../images/primamenu.jpg[/img]</div>
<div id="under">[img]../images/under.jpg[/img]</div>
<div id="piccole">[img]../images/piccole.jpg[/img]</div>
<div id="interviste">[img]../images/interviste.jpg[/img]</div>

spero sia sufficientemente chiaro, grazie

[Nobody33]

spero sia sufficientemente chiaro, grazie

Stai scherzando vero

Un po di indentazione del codice non sarebbe male

[teana7]

In realtà ti ho messo il codice di tutti i pulsanti, per semplificazione basta leggerne uno (credo):

[img]../images/homepage.jpg[/img]

questa è quella orizzontale, la barra di navigazione, dove come ti dicevo al click lo stato abbassato si vede un secondo ma poi ritorna come l'immagine alzata.

Intanto direi cominciamo da questo, così risolviamo, se hai la pazienza di aiutarmi, questo.

[Nobody33]

dove come ti dicevo al click lo stato abbassato si vede un secondo ma poi ritorna come l'immagine alzata.

è normale perché usi

onclick=
onmouseover=
onmouseout= si capisce anche senza link

Ciò che chiedi non è fattibile (con DW).

Studiati i tre eventi e capirai cosa significa.

Per semplificare, invece di onmouseover potresti usare a {/*tuo stile*/} e a:hover{/*tuo stile*/} (nel css).
Infine, come già detto, potresti assegnare una classe al link della pagina attiva.

Esempio:

 
#menu a{height:100px;
width:30px;
display:block;
border-radius:4px;
background:#f00;
box-shadow: 1px 1px 2px #000;}
#menu a:hover{box-shadow: inset 1px 1px 2px #000;}
#menu .active{box-shadow: inset 1px 1px 2px #4e4e4e;}/*classe da assegnare al link attivo*/

Cosi risolvi e ti risparmi 10.000 righe di codice assurdo generato da DW e tempo nel fare delle immagini

Se non ti accontenti della risposta o non ci credi, puoi sempre chiedere nella sezione javascript.

[teana7]

Sento che mi sto avvicinando ma ancora non ho ben capito.

Dunque....

Io ho inserito i pulsanti tramite barra di navigazione e dall'inserimento che mi faceva fare, mi era sembrato di capire di potermi aspettare questo comportamento, ma se chiedo qualcosa di impossibili.....bene, lavoreremo sui css.

Il fatto è che al passaggio e l'active, non cambia solo il colore, ma cambia il colore alla scritta, allo sfondo e sopra lo sfondo compare un'altra rettangolino sopra.

E allora possibile, per ogni stato applicare l'immagine corrispondente?

Se sì, non mi è ancora perfettamente chiaro, il metodo di inserimento.

Sarebbe corretto così? (sicuramente c'è qualche cosa che non va, perchè non mi funziona )

#pulsante1 a{
height: 34px;
background-image:url(images/primamenu_f3.jpg);
background-repeat:no-repeat;
margin-top: 25px;
}
#pulsante1 a:hover{
background-image:url(images/primamenu_f2.jpg);
}
#pulsante1 active{
background-image:url(images/primamenu_f3.jpg);
}

e non mi funziona neanche il margin top

[Nobody33]

#menu è l'id del contenitore (!)

#menu a è tutto ciò che è link nel menu
#menu a:hover è tutto ciò che quando vai sopra con il mouse ("l'equivalente" in javascript è onmouseover)

#menu a.active è la classe da assegnare quando vuoi che un pulsante rimanga "premuto" quando la pagina è attiva.

vedesi un esempio QUI.

Poi, come già detto se riesci a fare tutto con il solo .css risparmi tempo nel fare le immagini.
Oppure usa la tecnica chiamato "css-sprite", ma fare 10.000 immagini solo per un menu....insomma, un casino.

Se vuoi cambiare il colore della scritta, usa la proprietà color: #f00 dove ti piace, ad esempio:

#menu a{color:#000;}
#menu a:hover{color:#f00;}

più chiaro adesso?

[teana7]

Alla fine ci sono riuscita!

Grazie!!!