Sovrapporre immagini

**Mark_Sol** · 29-04-2019, 19:35

Buonasera Forum,
ho la necessità di sovrapporre due immagini per migliorare la visibilità e rendere il layout delle tabelle nella pagina uniforme.
Importo immagini che non sono tutte della stessa dimensione e ridimensiono con gli attributi max-widht e max-height. Mi piacerebbe sovrapporre una trasparente di 150x150px.

Ho provato in questo modo senza esito:

codice:

 <td>
       <div style="background: url('transparent_150x150.png')>

            <img title="<%=RS("NOME")%>" alt="<%=RS("NOME")%>" src="<%=RS("FOTO")%>" border="0" style="max-width:100px;max-height:100px;">

       </div>

  </td>

Come posso ottenere il risultato desiderato?
Grazie

**Vincent.Zeno** · 29-04-2019, 19:40

sezione errata, segnalo per spostamento

**Mark_Sol** · 29-04-2019, 19:48

Mi scuso per l'errore, ho postato in questa sezione per via del codice asp con cui si estraggono le immagini.
Grazie per l'attenzione.

**KillerWorm** · 30-04-2019, 18:16

Non mi è chiara la situazione che descrivi. A parte il codice che hai postato, puoi linkare la pagina in questione?

**Mark_Sol** · 30-04-2019, 21:31

Ciao LillerWorm, ho risolto così:

codice:

<style>
#jpg {
position:absolute;
right: 0;
}
 
#gif-div {
position:relative;
top: 0;
}
</style>
 
<div id="gif-div">
<img id="gif" src="<%=RS("FOTO")%>" border="0" style="max-width:150px;max-height:150px;">
<img id="jpg" title="<%=RS("nome")%> " alt="<%=RS("nome")%>" src="transparent_150x150.png" />
</div>

Grazie lo stesso per l'attenzione.

**KillerWorm** · 30-04-2019, 23:43

Bene, giusto qualche suggerimento riguardo il codice che hai postato:

- mi pare di capire che nella pagina avrai più elementi simili a quello; in tal caso fai attenzione a non usare id duplicati perché sono da considerarsi un errore; piuttosto, se questo è il tuo caso, è più appropriato usare delle classi.

- l'attributo border (applicato sul tag img) è deprecato in HTML5; in qualunque caso è preferibile eventualmente usare l'analoga proprietà border CSS se ti serve impostare il bordo in qualche modo, ma considera che gli elementi <img> non hanno bordi di default, per cui è totalmente inutile quel border="0" nel tuo codice.

- è consigliabile mantenere lo stile, quanto più possibile, separato dal codice HTML; evitare quindi di usare stile in linea ma includerlo piuttosto come file CSS esterno o in un blocco <style> dento <head>. Nel tuo caso, il CSS che hai messo nel tag <img> puoi spostarlo opportunamente tra le regole che hai definito nel CSS incluso. Non è una regola fissa ma è una buona pratica di programmazione web (qui un articolo tra tanti).

- se hai interesse ad avere un codice valido, l'attributo alt è obbligatorio per ogni elemento <img>, eccetto alcuni particolari casi.

Per verificare la validità del tuo codice puoi usare un validatore, ad esempio questo: https://validator.w3.org/

Chiaramente questi vogliono essere giusto dei consigli in aggiunta al tema della discussione.

Buon proseguimento

Discussione: Sovrapporre immagini

Strumenti discussione

Ricerca discussione

Visualizza

Sovrapporre immagini

Permessi di invio