css per sostituire un'immagine

Question

mi è familiare con le tecniche CSS per sostituire il testo con un'immagine. Ad esempio, qui ci sono 9 di loro: http: // CSS- tricks.com/nine-techniques-for-css-image-replacement/

Ci sono tecniche per sostituire le immagini? Esiste un modo per impostare lo sfondo di un'immagine a un'immagine e poi nascondere o spostare in primo piano dell'immagine (l'elemento image src).

Sto cercando di scrivere un pelle per un sito che ha un'immagine che voglio sostituire. Grazie.

  

Da come ho capito che sta cercando di fare questo in puro CSS, senza modifiche al codice HTML o JavaScript.

Questo è corretto. Io sono l'aggiunta di un nuovo foglio di stile per una pagina esistente. Diciamo che non posso modificare HTML o utilizzare javascript.

Answer 1

Dopo un po 'di ritocchi, 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 aspetto negativo di questo è che non sarà perfetto nelle versioni precedenti di Internet Explorer.

Answer 2

Se si dispone di un elemento che circonda l'immagine, per esempio un DIV, si dovrebbe essere in grado di impostare un'immagine di sfondo (con no-repeat e una posizione) su di esso, quindi impostare l'immagine per display:none.

In alternativa, ecco una soluzione casuale che sembra funzionare. Si posiziona l'immagine off-screen, quindi utilizza lo pseudo-elemento :after per impostare un'immagine di sfondo. Dovrebbe essere praticabile, ma avrete bisogno di giocherellare con i valori per farlo funzionare bene. Non funzionerà in IE6 però.

<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">

Answer 3

Il modo migliore per sostituire le immagini è quello di impostare la posizione di fondo. Prima creare due immagini diverse e metterli uno sopra l'altro nella stessa immagine. Di 'la tua pelle è elemento di 50x50 pixel, che ci si crea un'immagine di 50x100.

Quindi utilizzare 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. Si potrebbe usare sia javascript o il codice lato server per impostare la classe appropriata.

Answer 4

Forse si può impostare un valore di opacità di un elemento e quindi impostare lo sfondo per l'immagine che si desidera.

musicfreak:. Volevo dire utilizzando due elementi

Answer 5

si dovrà assegnare le classi diverse per i due stati poi scrivere un javascript per avere il cambiamento di immagine su di 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"
}