Overlay immagini utilizzando CSS (o altro)!

[Orchid]

Ciao ragazzi,

c'è un modo con i CSS per poter assegnare automaticamente una immagine fissa, una sorta di maschera, a qualsiasi immagine si trovi nella pagina?

Più o meno una cosa di questo genere:



Tenete conto che non posso usare dei DIV o altre cose che stanno sopra, essendo le immagini caricate dal cliente che ovviamente non saprà mai come farlo, ma assegnando tipo una classe che le trasforma tutte automaticamente.

Se non fosse possibile farlo con i CSS, esiste qualcosa in Javascript o simili?

[Mich_]

E` necessaria della marcatura supplementare. Qualcosa di questo tipo:

<div id="contenitore">
  <div class="contImm">
    [img]tuaimmagine.jpg[/img]
    [img]angolo.gif[/img]
  </div>
</div>


CSS:
#contenitore {
  ...
}
.contImm {
  position:relative;   /* necessario per dare effetto all'assoluto delle immagini */
  width: ...px;          /* non sono strettamente necessari, ma semplificano */
  height: ...px;
  /* eventuale float */
}
.contImm img {
  position: absolute;
}
.contimm .foto {
  z-index: 10;
  top:0; left:0;
}
.contimm .angolo {
  z-index: 20;
  bottom:0; right:0;
}

Naturalmente e` necessario che l'immagine "angolo" sia trasparente a parte l'angolo. Non occorre che le dimensioni corrispondano ma non deve essere piu` grande.

Per realizzare la marcatura supplementare, probabilmente la cosa piu` semplice e` utilizzare il programma lato server (se gli utenti possono inserire qualcosa, avrai sicuramente un programma che lo gestisce).
In alternativa puoi realizzarlo anche lato client con JS, anche se questo presenta delle incognite (che succede se il browser dell'utente non ha supporto JS?)