immagini come sfondo di una cella

[chiarapr]

Ciao a tutti, ho bisogno di qualche consiglio su come risistemare una pagina web utilizzando solo i CSS.
nel corpo della pagina al centro ho una tabella dentro la quale ci sono quattro immagini.
vorrei inserire queste 4 immagini in B/N e poi, quando ci passo sopra con il mouse vorrei vedere l'immagine a colori.
Cliccandoci sopra poi vorrei aprire l'immagine ingrandita.
inoltre la tabella che fà da contenitore dovrebbe essere nera in modo che tra le immagini ci sia un righino nero di separazione.
con la tabella pensavo di realizzarla usando le immagini come sfondo della cella ma con i CSS come posso fare?
Grazie

[fcaldera]

Crea 4 link, ognuno dei quali avrà come background la foto in B/N.

Allo stato hover cambi la foto (il background)

Al click fai puntare il link ad un altra pagina, o apri un popup, o mostri un overlayer con la foto....

[chiarapr]

ciao, grazie per l'intervento.
ma le foto le devo dimensionare in pixel precise per essere inserite nelle celle?
volevo provare a farlo senza usare le tabelle.
pensavo ad un qualcosa come un contenitore a dimensioni fisse ed al suo interno dei box o qualcosa del genere..
ciao

[fcaldera]

usa i link stessi per contenere le immagini

dai ai link display: block; una width e una height in pixel

[chiarapr]

Grazie mille!
Domani provo.
Ciao

[chiarapr]

sono riuscita a fare qualcosa, ma non riesco a tenere affiancate le due immagini

ho creato un corpo:
div#corpo{
position:relative;
width: 500px;
height: 165px;
background-color: #000;
}

e per il collegamento:
a#link1 {
background-image:url(f1_bn.jpg);
height: 165px;
width: 250px;
display:block;
}


a#link1:hover {
background-image:url(f1.jpg);
height: 165px;
width: 250px;
display:block;
}


a#link2 {
background-image:url(f2_bn.jpg);
height: 165px;
width: 250px;
display:block;
}


a#link2:hover {
background-image:url(f2.jpg);
height: 165px;
width: 250px;
display:block;
}

solo che non vedo la seconda immagine affianco....

[fcaldera]

nello stato hover non è necessario ripetere altezza e larghezza. Basta solo specificare il nuovo sfondo
per affiancare due link usi un float: left

<div id="corpo">
<a... id="link1">...</a>
<a... id="link2">...</a>
</div>

#corpo { width: 500px; height: auto; overflow: hidden; }
#corpo a { width: 250px; height: 165px; float: left; display: inline; }

a#link1 { background-image:url(f1_bn.jpg); }
a#link2 { background-image:url(f2_bn.jpg); }

a#link1:hover { background-image:url(f1.jpg); }
a#link2:hover { background-image:url(f2.jpg); }


Ad ogni modo considera di usare un unica immagine invece di due diverse:
cioè fai in modo di creare una sola immagine che abbia i due stati (colori e B/N) così allo stato hover cambi solo la posizione dello sfondo.

In questo modo carichi meno immagini, il peso complessivo tende a diminuire e quando hai lo stato hover non dovrai aspettare qualche attimo prima che l'altro sfondo si carichi.

[chiarapr]

ci sono riuscita!

ho fatto così:


a#link1 {
position:relative;
float:left;
background-image:url(f1_bn.jpg);
height: 165px;
width: 250px;
display:block;
}


a#link1:hover {
position:relative;
float:left;
background-image:url(f1.jpg);
height: 165px;
width: 250px;
display:block;
}


a#link2 {
position:relative;
float:right;
background-image:url(f2_bn.jpg);
height: 165px;
width: 250px;
display:block;
}


a#link2:hover {
position:relative;
float:right;
background-image:url(f2.jpg);
height: 165px;
width: 250px;
display:block;
}

a#link3 {
position:relative;
float:left;
background-image:url(f3_bn.jpg);
height: 165px;
width: 250px;
display:block;
}


a#link3:hover {
position:relative;
float:left;
background-image:url(f3.jpg);
height: 165px;
width: 250px;
display:block;
}


a#link4 {
position:relative;
float:right;
background-image:url(f4_bn.jpg);
height: 165px;
width: 250px;
display:block;
}


a#link4:hover {
position:relative;
float:right;
background-image:url(f4.jpg);
height: 165px;
width: 250px;
display:block;
}


ne ho messe 4 affiancate a due a due.
ora, però, mi chiedo: è preferibile creare 4 div a due a due affiancati e inserirci dentro le immagini singolarmente o un'unico contenitore con tutte le immagini?
l'effetto finale che vorrei raggiungere è che le 4 immagini siano separate da una sottile linea nera. forse è meglio un unico box con sfondo nero e le immagini all'interno leggermente ridimensionate?

[chiarapr]

non avevo letto i tuoi consigli....
ho provato, come mi hai consigliato.

questa non l'ho capita:

"Ad ogni modo considera di usare un unica immagine invece di due diverse:
cioè fai in modo di creare una sola immagine che abbia i due stati (colori e B/N) così allo stato hover cambi solo la posizione dello sfondo."

come faccio a creare un'immagine che abbia due stati? e come cambio solo la posizione dello sfondo?

grazie per gli aiuti.

[fcaldera]

ok. ogni tua immagine è 250x165

con photoshop o gimp o altro editor grafico crei un canvas largo 250 e alto il doppio di un immagine, ovvero di 250x (165*2), ovvero 250x330

nella parte alta incolli l'immagine b/n
nella parte bassa incolli l'immagine a colori

la regola css sarà

a { background: url(immagine.jpg) top left no-repeat; }
a:hover { background-position: bottom left;}

in pratica: cambi il posizionamento dello sfondo


cerca "fast rollover" qui o su google.