Come posizionare un'immagine rispetto ad un'altra?

Question

Come mettere un'immagine su un'altra immagine più grande, come su youtube, un pulsante di riproduzione viene visualizzato in cima alla miniatura del video?

Answer 1

Se hai un buon controllo sulle dimensioni dell'immagine, abbiamo usato lo sfondo per vari elementi - ad esempio, imposta lo sfondo di una cella di tabella su un'immagine e inserisci una scheda img all'interno della cella.

Answer 2

Non sono sicuro che YouTube utilizzi immagini per questo effetto, non è ancora il lettore Flash?

In ogni caso, esattamente come questo è fatto dipende molto dal design che si desidera raggiungere. Supponiamo che tu voglia raggiungere lo stile di YouTube, in cui hai un'immagine in miniatura e vuoi sovrapporre l'immagine di un pulsante di riproduzione in alto. Se si desidera che la miniatura per essere un vero tag <img> avrete bisogno di un po 'di margine di profitto in più, in questo modo:

<div class="thumb-wrapper"> 
<img src="mythumbnail.gif" alt="my awesome video" /><span></span> 
</div> 

L'involucro <div> è necessario in modo da poter indirizzare l'IMG e estendersi in modo corretto, e avere dimensioni a contenerli in . L'estensione è dove l'immagine di sovrapposizione andrà.

.thumb-wrapper { 
position:relative; 
} 

.thumbwrapper span { 
position:absolute; 
top: 0px; 
left: 0px; 
width: 100%; 
height: 100%; 
z-index: 100; 
background: transparent url(overlay.png) no-repeat; 
} 

(realtà non ho testato questo, se blatently sbagliato fatemi sapere io rivederlo!)

Ciò presuppone un paio di cose:

1. le miniature saranno essere sempre una dimensione fissa e la vostra immagine di sovrapposizione corrisponde a quello
2. la tua immagine di sovrapposizione è un PNG semitrasparente

È anche possibile utilizzare lo stile opacity: per ottenere il n. 2. Ovviamente, IE6 farà girare la sua brutta testa e sarà necessario utilizzare una correzione PNG per questo se si sta seguendo il percorso dell'immagine trasparente, o un filtro opacità separato se si utilizza tale metodo. Entrambi questi sono senza dubbio risposto altrove su Stack Overflow o facilmente google-able.

Se si hanno altri requisiti, potrebbe essere possibile farlo senza il margine aggiuntivo, come ho detto tutto dipende da cosa si ha bisogno esattamente. Alcuni requisiti potrebbero non essere possibili senza JavaScript (il che ovviamente significherebbe che potresti inserire un qualsiasi markup extra con quello!).

Answer 3

Prendendo il tuo esempio di YouTube, si potrebbe facilmente fare questo con 2 immagini e 1 tag img e un po 'di CSS ovviamente;)

<style> 
    img.youtube { 
     width:500px; height:500px; 
     margin:0; padding:0; 
     background:transparent url(/point/to/your/larger/image.jpg) no-repeat center 
    } 
</style> 

<img src="/point/to/youtube/play/image.png" alt="Gotta have alt text ;)" border="0" class="youtube" /> 

Come funziona è semplice, si ha la piccola immagine di YouTube come PNG trasparente o GIF e quindi impostare l'immagine di sfondo come l'immagine più grande, questo darà quindi l'effetto di essere l'immagine più piccola al centro senza marcatura extra.

Answer 4

troverete la soluzione in questo thread su StackOverflow: How to draw a graphic over another graphic

Poco (citando dopo Ipsquiggle):

<div style="position:relative"> 
    <div> 
    <img url="backgroundimg.png"> 
    </div> 
    <div style="position:absolute; left:0; top:0;"> 
    <a href="foo.html"><img url="smallgraphic.png"></a> 
    </div> 
</div> 

Maggiori dettagli perché e come funziona nel thread originale.

Answer 5

Le risposte di tutti qui sono troppo complicate.

Creare un'immagine PNG, semitrasparente, con un simbolo che sembra indicare "riproduzione". Rendi le dimensioni che desideri, forse un'immagine 320x240 o cosa no. Diciamo che si chiamò "overlay.png"

Diciamo che il YouTube ha generato miniatura è a http://img.ytimg.com/abcdefg/0.jpg

Ora tutto ciò che serve nel codice è questo:

<a href="destination_of_your_link"><img src="overlay.png" width="320" height="240" border="0" style="background:URL(http://img.ytimg.com/abcdefg/0.jpg) center center black;" /></a>

Finché la vostra il pubblico di destinazione non sta ancora utilizzando IE6, dovresti essere al sicuro.