css: Immagini differenti a video ed a stampa

[majorTom]

Ciao a tutti,
ho bisogno di visualizzare 2 immagini differenti a seconda che una pagina html sia visualizzata a video o venga stampata...
per provare a fare questo ho utilizzato il seguente codice
...
<link rel="stylesheet" type="text/css" href="stile.css" />
<link rel="stylesheet" type="text/css" media="print" href="stilestampa.css" />
...
...
[img]grandeweb.jpg[/img][img]piccolastampa.jpg[/img]

ed i 2 figli di stile
stile.css
.ImmagineTitoloSchermo {

}
.ImmagineTitoloStampa {
display:none;
}


stilestampa.css
}
.ImmagineTitoloSchermo {
display:none;
}
.ImmagineTitoloStampa {
}

Il problema è che, nonostante a video vada tutto bene(anche invertendo i fogli di stile), in fase di stampa non viene visualizzata nessuna immagine!!!
QUalcuno sa dirmi cosa sto sbagliando?

[Marcolino's]

Stai sbagliando che in video hai scritto :

.ImmagineTitoloStampa {
display:none;
}

mentre per la stampa:

.ImmagineTitoloStampa {
}

In pratica siccome i fogli di stile sono a cascata tu prima gli hai detto di non mostralo e poi non hai modificato questa proprietà, quindi il browser giustamente, non te lo stampa.

Molto meglio sarebbe stato:

A video
.ImmagineTitoloStampa {
visibility: hidden;
} 

In stampa
.ImmagineTitoloStampa {
visibility: visible;
}

Ciao.