TABELLE e CELLE

[DanieleAbbaQ]

salve amici, è possibile rendere colorata una cella di una tabella al passaggio del mouse per poi ritornare al suo colore base al non passaggio del mouse? (una sorta di mouseover per intenderci). ci sono esempi in rete?


Grazie.

[lemonsong]

Se la cella non ha un id o una classe "sua", ci possiamo comunque "arrivare": http://www.w3schools.com/cssref/css_selectors.asp


Esempio:
http://lemonsong.altervista.org/test_td_select/



P.S.
Per "amor di community", non hai dato riscontro qui: http://www.unofficialwsx5.com/index.php?topic=1859.0

[DanieleAbbaQ]

e proprio quello che intendevo. come faccio a sfruttare il tuo esempio (cella rossa?)

[DanieleAbbaQ]

Ciao Lemon, come posso recuperare il codice per rendere le celle delle tabelle colorate al passaggio del mouse?

[lemonsong]

Primo tuo post:

[...] è possibile rendere colorata una cella di una tabella al passaggio del mouse [...]

Come ti ho già detto, coi CSS2 (esempio precedentemente postato) e CSS3 puoi arrivare a qualsiasi cella di una tabella, basta studiarsi un pochino i vari selettori: http://www.w3schools.com/cssref/css_selectors.asp

Si può anche utilizzare jQuery, ciclando tutte le celle della tabella e assegnando loro una classe con un numero crescente, esempio: http://lemonsong.altervista.org/test_td_select_jq/


Ultimo tuo post:

[...] come posso recuperare il codice per rendere le celle delle tabelle colorate al passaggio del mouse?

Se invece vuoi semplicemente che per ogni cella della tabella, al passaggio del mouse, cambi il colore di sfondo, puoi usare questo elementare CSS:

<style>
#imCell_1 td:hover{
    background-color: red !important;
}
</style>

 

[DanieleAbbaQ]

Ciao Lemon, non riesco ad implementare il codice. 

[lemonsong]

Quale codice?

Metti online la tua prova e posta il link.

[DanieleAbbaQ]

Ciao Lemon, ci sono riuscito grazie al tuo aiuto. Sei molto bravo, complimenti! L'id della cella era diverso.


Ora se volessi fare la stessa cosa con l'oggetto testo o con l'oggetto tabella o con l'oggetto foto, si può fare?


Esempi:


Oggetto testo: fare un riquadro con del testo all'interno ed una semplice foto; al passaggio del mouse l'oggetto testo che contiene sia il testo che la foto dovrebbe cambiare colore;
Oggetto tabella: inserire una tabella con testo e foto; al passaggio del mouse tutta la tabella (non la singola cella) che contiene sia il testo che la foto dovrebbe cambiare colore;
Oggetto immagine: inserire l'oggetto immagine sulla griglia; al passaggio del mouse tutto l'oggetto immagine dovrebbe cambiare colore.


Hai degli esempi? Grazie in anticipo.

[lemonsong]

Se ti riferisci ai CSS, il "principio" è sempre lo stesso:

• trovare l'id dell'oggetto WS
• aggiungere :hover all'elemento interno
• scrivere proprietà e valore

"Cambiare colore alla foto" non lo capisco ma se ti riferisci ad aumentare/diminuire la trasparenza, puoi usare la proprietà opacity

Qui alcuni link "mondo WS":
http://lemonsong.altervista.org/test_a_hover_img/
http://www.ilcacciatoredinuvole.it/elenco.html (cerca tra i vari esempi)
http://lemonsong.altervista.org/test_jq_fade-in-out/ (con jQuery)


Da W3Schools:
http://www.w3schools.com/cssref/sel_hover.asp
http://www.w3schools.com/css/css_image_transparency.asp

Leggi, prova ed eventualmente fai vedere qualcosa.


P.S.
Con tabelle e celle non c'entra niente, eventualmente apri un nuovo post con titolo più appropriato.

[DanieleAbbaQ]

ecco ti posto un esempio.

[lemonsong]

Se l'immagine è il risultato che vuoi ottenere al passaggio del mouse, te l'ho già scritto sopra:

• trovare l'id dell'oggetto WS
• aggiungere :hover all'elemento interno

Selettore:

#imCellStyle_X:hover (secondo impostazioni dell'oggetto, potrebbe variare il div, linka un esempio reale)

• scrivere proprietà e valore

Proprietà e valore:

background-color: red; (eventualmente aggiungere !important)


Altrimenti, sii più chiaro.


P.S.
Stiamo andando OT (e 2)