css per sostituire un'immagine

Question

Ho familiarità con le tecniche CSS per sostituire il testo con un'immagine. Ad esempio, qui ce ne sono 9: http://css-tricks.com/nine-techniques-for-css-image-replacement/

Esistono tecniche per la sostituzione delle immagini? È comunque necessario impostare lo sfondo di un'immagine su un'immagine e quindi nascondere o spostare il primo piano dell'immagine (l'elemento immagine src).

Sto provando a scrivere una skin per un sito che ha un'immagine che voglio sostituire. Grazie.

Da come ho capito, sta provando a farlo in puro CSS, senza modifiche a HTML o JavaScript.

Che è corretto. Sto aggiungendo un nuovo foglio di stile a una pagina esistente. Diciamo che non posso modificare HTML o utilizzare javascript.

Answer 1

Dopo un po 'di armeggiare, ho capito!

img.someclass { 
    background: url("NEW IMAGE URL") top right; 
    height: 0; 
    width: 0; 
    padding: 200px 550px 0 0; /* Insert actual image size (height width 0 0) */ 
} 

questo renderà l'altezza e la larghezza dell'immagine attuale 0, ma si espanderà la casella per riempire la dimensione dell'immagine con imbottitura. L'unico lato negativo di questo è che non sarà perfetto nelle versioni precedenti di Internet Explorer.

Answer 2

Forse puoi impostare l'opacità di un elemento e quindi impostare lo sfondo sull'immagine che desideri.

Musicfreak: intendevo utilizzare due elementi.

Answer 3

si assegneranno classi diverse per i due stati, quindi si scriverà un javascript per fare in modo che l'immagine cambi su un evento.

ad esempio:

.firsImage { background:transparent url(/images/someImage.jpg) no-repeat; } 
.secondIMage { background:transparent url(/images/image2.jpg) no-repeat; } 

HTML:

<div id="imageDiv" class="firstImage"> some content </div> 
<a onclick="changeImage()">Change the image!</a> 

Javascript:

function changeImage(){ 
    var imageDiv = document.getElementById("imageDiv") 

    if (imageDiv.className === "firsImage") 
     document.getElementById("imageDiv").className = "secondImage" 
    else 
     document.getElementById("imageDiv").className = "firstImage" 
} 

Answer 4

Il modo migliore per sostituire le immagini è quello di impostare la posizione di fondo. Prima crea le due diverse immagini e mettile una sopra l'altra nella stessa immagine. Supponiamo che il tuo elemento pelle sia 50x50 pixel, dovrai creare un'immagine 50x100.

Poi usare un po 'di codice come questo:

.skinElement1 { 
    background: #fff url("image.png") no-repeat 0 0; 
} 
.skinElement2 { 
    background: #fff url("image.png") no-repeat 0 -50px; 
} 

Quindi, per vedere la seconda immagine si sposta sullo sfondo dalla quantità necessaria. È possibile utilizzare javascript o il codice lato server per impostare la classe appropriata.

Answer 5

Se si dispone di un elemento che circonda l'immagine, ad es. un DIV, dovresti essere in grado di impostare un'immagine di sfondo (insieme a no-repeat e una posizione) su di essa, quindi impostare l'immagine su display:none.

In alternativa, ecco una soluzione casuale che sembra funzionare. Posiziona l'immagine fuori dallo schermo, quindi usa lo pseudoelemento :after per impostare un'immagine di sfondo. Dovrebbe essere lavorabile, ma dovrai armeggiare con i valori per farlo funzionare correttamente. Tuttavia non funzionerà in IE6.

<style> 
    img.test { 
    background: url('image_to_show.png') no-repeat right top; 
    position: relative; 
    left: -16000px; 
    } 
    img.test:after { 
    content: "."; 
    color: transparent; 
    display: block; 
    width: 16000px; 
    } 
</style> 

<img class="test" src="image_to_hide.png">