Cambio immagini con i css.

[purno]

Vorrei cambiare le immagini di una pagina senza aprirne delle nuove. E ho scoperto che con i css è abbastanza facile.

Ho trovato nel web delle gallerie di immagini con i css bellissime. Ma non fanno al mio caso: a me basta che l'immagine cambi cliccando su dei semplici links.

Qualcuno - sperando di essere stato chiaro - mi può aiutare?

Grazie 1000.

[salasir]

Se non ho capito male, dovresti utilizzare il rollover disgiunto

Guarda qui se ti può servire come base per quanto cerchi di realizzare:

Creare un roll-over disgiunto con i CSS

[pierofix]

Originariamente inviato da purno
Vorrei cambiare le immagini di una pagina senza aprirne delle nuove. E ho scoperto che con i css è abbastanza facile.

Ho trovato nel web delle gallerie di immagini con i css bellissime. Ma non fanno al mio caso: a me basta che l'immagine cambi cliccando su dei semplici links.

Sono immagini di grafica (quindi sfondi) oppure immagini di contenuto (ad esempio una foto della Monna Lisa in un documento che la descrive)?

Nel primo caso è possibile e sensato agire tramite CSS, nel secondo no, in quanto l'immagine, facendo parte integrante del contenuto, va gestita tramite XHTML, e quindi eventualmente 'cambiata' lato server o al massimo tramite javascript.

Prima di dare una soluzione, quindi, credo ci serva capire a quale dei due gruppi le tue immagini appartengono.

[purno]

Anzitutto grazie per le risposte.

La prima soluzione fà parte di quelle che già avevo incontrato e che mi avevano fatto capire che con i css era possibile cabniare le immagini senza cambiare pagina.

Ciò confermato ora forse è il caso che dia l'esempio concreto a cui cerco una risposta:

vorrei, nel modo più semplice possibile, sistemare la mia home page:

http://massaggiosiena.it .

Attualmente la foto che compare (foto 1) non è uno sfondo. Ma credo si possa benissimo anche farla apparire come sfondo.

Quello che mi interessava sapere era come usare i css per cambiarla con la seconda (foto 2) - cliccando su dei semplici links - senza dovere aprire una nuova pagina come ora avviene. Anche perchè se così fosse potrei aggiungerne altre senza riempire di pagine le mie cartelle (che se poi devo fare una modifica "generale" alle pagine... sai che passatempo! ovvero meno sono meglio è).

Grazie 1000.

[pierofix]

A mio avviso, usare i CSS in questo caso è scorretto. Le immagini sono di contenuto, non di contorno, quindi devono essere trattate a tutti gli effetti come contenuto, appunto. E sappiamo che per esso lo strumento di gestione è XHTML; i CSS servono per la grafica.

Premesso ciò, le strade sono due: o si agisce lato server (ad esempio con PHP) oppure lato client. Prima di farlo, tuttavia, vorrei capire il senso di avere uno switch con due (o più) immagini in homepage: è qualcosa tipo 'sfoglia qualche foto del mio lavoro'? E' così?

Nel qual caso, se le immagini non sono troppe, si potrebbe procedere come segue:

1. inseriamo tutte le immagini nel documento;
   
2. tramite javascript facciamo in modo di sovrapporle e farle visualizzare una ad una tramite dei pulsantini, anch'essi generati via javascript.

In questo modo, se uno ha js attivato nel proprio browser si vede le cartoline sfogliabili, altrimenti vede le foto tutte insieme, una di seguito all'altra.

Che ne dici?

[salasir]

Scusa Piero, una curiosità. La soluzione di Floyd che ho indicato utilizza più o meno la stessa tecnica che spieghi sopra ma con CSS e senza javascript. Tutti i testi/foto sono comunque presenti nel testo e mascherati con un display:hidden e resi visibili all'hover.

Io cerco sempre soluzioni che non usino js per evitare impossibilità di visualizzazione.

Ci sono casi in cui è meglio preferire l'uso di js?

[pierofix]

Originariamente inviato da salasir
Scusa Piero, una curiosità. La soluzione di Floyd che ho indicato utilizza più o meno la stessa tecnica che spieghi sopra ma con CSS e senza javascript. Tutti i testi/foto sono comunque presenti nel testo e mascherati con un display:hidden e resi visibili all'hover.

Io cerco sempre soluzioni che non usino js per evitare impossibilità di visualizzazione.

Ci sono casi in cui è meglio preferire l'uso di js?

Ehilà!

Dunque, nella soluzione di Floyd noto un errore di strutturazione delle informazioni: vedi come il testo della descrizione fa parte del link? A livello logico questo non è corretto.

Si potrebbe correggere attribuendo l'hover ad un altro elemento di livello superiore - lasciando così piena libertà di sottostrutturazione - però a questo punto la cosa non funzionerebbe con IE (il quale non supporta l'hover su elementi diversi da <a>), che necessiterebbe di un js aggiuntivo.

E' quindi innanzitutto un problema di markup: spesso i rollover in puro CSS richiedono dei sacrifici a livello di struttura logica, e questo lo trovo inaccettabile.

Oltretutto, purno cercava (da quanto ho capito) un qualcosa che cambiasse l'immagine al click, non all'hover. Per gestire questo occorrerebbe ricorrere a pseudo-classi CSS quali active o focus, la cui compatibilità è un vero caos.

Spero di aver fatto un quadro esaustivo e completo. Per contro-argomentare o per fare ulteriori domande, ovviamente non esitate.

[salasir]

Mmm. Se non ho capito male tu vuoi dire che un elenco di link che puntano alla stessa pagina per visualizzare delle immagini non sono semanticamante corretti.

Sarebbe invece corretta una lista con l'hover su ogni[*] (ma sappiamo già che IE non gestisce). O sbaglio?

Con una forzatura si potrebbe assimilare l'elenco di link ad una pagina con dei thumbnail che rimandano alla visualizzazione estesa dell'immagine su un'altra pagina (ma sarebbero effettivamente link).

[pierofix]

Originariamente inviato da salasir
Mmm. Se non ho capito male tu vuoi dire che un elenco di link che puntano alla stessa pagina per visualizzare delle immagini non sono semanticamante corretti.

Sarebbe invece corretta una lista con l'hover su ogni[*] (ma sappiamo già che IE non gestisce). O sbaglio?

No, nun ce siamo capiti. Dai un'occhio alla soluzione di Floyd, precisamente qui:

<a href="#" title="Descrizione del link 1">
   Link 1
   
      Descrizione del link 1...
   
</a>

Vedi come la descrizione sia marcata dentro il link? Però quella descrizione non fa parte del link: andrebbe marcata separatamente.

Voglio dire, dobbiamo sempre guardare prima alla pagina 'nuda', privata cioè di CSS ed eventuali javascript: nuda deve avere già senso; il resto è tutto un di più, un'aggiunta, un miglioramento, ma la base deve essere una struttura di markup dotata di logica e significato.

Se manca la base, tutto il resto diventa improprio per conseguenza.

[salasir]

Supponiamo di avere:

<ul id="galleria">[*]immagine 1 [img]immagine.jpg[/img]
....[/list]

ed un CSS così:

gelleria#li img {display: hidden; }
gelleria#li:hover img { display: block; }

sarebbe accettabile? Oppure siamo sempre di fronte ad un errore logico di markup?

Scusa se rompo ma vorrei chiarire questo concetto.