immagini e div sovrapposte

[semolino]

Ho 5 immagini da 4,5cm per 6cm, che mi si caricano in modo dinamico e che vanno a formare, una difianco all'altra, una fascia orizzontale composta dal totale delle 5, ok?
Ecco io tramite 5 link carico 5 testi diversi, ma le 5 immagini sono sempre visibili. L'unica cosa è che se clicco il link 1 o l'immagine 1, la prima immagine si vedrà bene e le altre 4 avranno una div di colore diverso al 40% sovrapposta. Se clicco il link 2 o l'immagine 2. Saranno tutte scure tranne la seconda e cosi via...
come posso realizzare una cosa del genere?

[semolino]

e se invece facessi cosi?
Io creo un div con witdh e height = alle immagini (le immagini hanno sempre stesse larghezze e altezze) e con uno sfondo nero in trasparenza.
Poi tramite link, oltre a richiamare la pagina, dico alla div id="mask" di mettersi sopra alle altre 4 immagini.. E' possibile? Anche utilizzando JS..

Che ne dite?

[Mich_]

Ci sono vari modi per realizzare una cosa simile a quanto chiedi.

Esempio 1:
metti un blocco sopra ciascuna delle 4 immagini (position: absolute; z-index: 10 che contiene un'immagine o uno sfondo realizzato mediante gif o png semitrasparente
In alternativa puoi usare l'opacita`, ma non e` supportata da tutti i browser
Con questo metodo ti basterebbe anche usare un'unica immagine: i link sono realizzati mediante mappa

Esempio 2:
fai il cambio dell'immagine di sfondo (ciascuna immagine ha una controfigura piu` scura o opaca).
In alternativa lo sfondo di ciascun blocco e` realizzato con un'immagine doppia: versione chiara e scura; per i cambio sposti la posizione dello sfondo stesso.

In poche righe ti ho dato 5 o 6 alternative. Chiaramente dovrai approfondire ciascuna tecnica (le trovi tutte in vario modo citate/usate tra i "link utili" e sono state discusse nel forum).

[semolino]

e questa soluzione?
io applico alle singole immagini link questo css

.phm a img {
	padding: 0;
	margin: 0;
	width: 140px;
	height: 151px;
	filter: alpha(opacity = 30);
  	-moz-opacity: 0.30;	
	opacity: 0.30;
}

.phm a:hover img {
	filter: alpha(opacity = 100);
  	-moz-opacity: 1.00;	
	opacity: 1.00;
}

E ottengo quello che desidero, ovvero all'ingresso pagina tutte le immagini sono ofuscate e passando sopra diventano al 100%.
una cosa... come faccio a fare in modo, controllando la variabile passata di avere solo sull'immagine con la variabile = a quella passata l'effetto hover?
Le 5 immagini le inserisco con questo codice

<span class="phm">[url="boxes/architetti.php?id_arch=1"][img]upload/architetti/1.jpg[/img]" height="<?php echo $height; ?>" border="0">[/url]</span>

ovviamente per 5 volte, cambiando il nome dell'immagine e l'id

[Mich_]

La tua soluzione funziona nei browser che riconoscono l'opacita`; quindi non in Safari, ne` in Opera ...

Inoltre avevi chiesto una soluzione CSS (per lo meno io la avevo interpretata tale), mentre invece proponi una soluzione JS (potrebbe non essere accettabile, se devi fare un sito accessibile).

[semolino]

Ok, allora come posso realizzare il tutto con il metodo delle immagini con controfigura?
Come riconosco la pagina attiva e quindi cambio lo stato dell'immagine?
Ci sono degli esempi?

[Mich_]

Non c'e` modo di riconscere la "pagina attiva" con solo i CSS2. Il consiglio che si da` di solito e` di inserire una classe dal programma lato server (ASP, PHP, ...).
Nota che questa e` una richiesta nuova, che non era compresa nel post originale.

Le "controfigure" sono immagini diverse, realizzate con un qualsiasi programma di grafica. Eventualmente poi sono attaccate a quelle "luminose" per diminuire il numero di immagini da scaricare e non aver ritardi nel cambio.

Poi esempi di quanto vuoi fare, ne trovi nei "link utili" di questo forum (sezione menu).

[semolino]

non ho ancora risolto il problema, avrei deciso per il seguente modo, ma avrei bisogno di una mano.
Io stampo le 5 immagini e controllando l'id passato, posso capire quale delle immagini è attiva (quindi senza effetto maschera).
Dunque come posso attaccare, sopra all'immagine, una div (con gif trasparente) che mi permettere di farne una maschera? Quindi come do le proprietà nel css in modo tale che la maschera, immagine per immagine, sia esattamente largha come l'immagine di sfondo? Può adattarsi in automatico al 100%?

Ammettiamo che le 5 immagini siano inserite cosi

<div id="mask">[img].....[/img]</div>

[Mich_]

Io stampo le 5 immagini e controllando l'id passato, posso capire quale delle immagini è attiva

Questo si puo` fare lato client, ma non con i CSS: per questo hai bisogno di JS.

<div id="mask">[img].....[/img]</div>

Puoi pensare una cosa di questo tipo:

<div class="area">
  [img].....[/img]
  <div>&amp;nbsp;</div>
</div>

Con un CSS impostato cosi`

.area {
  width: 180px;
  height: 130px;
  position: relative;     /* questo comporta attenzione nei blocchi che lo contengono */
  ...
}
.area img {
  width: 100%;
  height: 100%;
  display:block;
  position: absolute;
  top: 0; left: 0;
  z-index: 10;
}
.area div {
   width: 100%;
  height: 100%;
  background: transparent url(trasp.gif);
  position: absolute;
  top: 0; left: 0;
  z-index: 20;
}

Poi con il JS (o con il metodo che vuoi) devi definire
background: url(semitrasp.gif/png);
sul/i blocco/hi che vuoi offuscare al posto del trasp.gif

Le immagini semitrasp e trasp sono chiaramente delle immagini semitrasparente / trasparente che verranno ripetute e che offuscheranno l'immagine sottostante.
Se sono delle .gif funzionano in tutti i browser, ma con resa "a puntini"; se sono delle .png hanno una resa migliore, ma non funzionano in IE5, mentre per IE6 occorre correggere con un filtro.


Pero` continuo ad essere scettico su questa soluzione.
Io preferisco lo switch dell'immagine: non ti obbliga ad usare posizionamenti.

[semolino]

Ok, ma non riesco a trovare niente sullo switch dell'immagine, c'è un tutorial?
Come preparo le due immagini? E come avviene lo scambio?