CSS para reemplazar una imagen

Question

Estoy familiarizado con las técnicas de CSS para reemplazar el texto con una imagen. Por ejemplo, aquí están 9 de ellos: http: // CSS- tricks.com/nine-techniques-for-css-image-replacement/

¿Hay técnicas para la sustitución de las imágenes? ¿Hay alguna forma para establecer el fondo de una imagen a una imagen y luego ocultar o mover el primer plano de la imagen (el elemento de imagen src).

Estoy intentando escribir una piel para un sitio que tiene una imagen que quiero reemplazar. Gracias.

  

De cómo entiendo que él está tratando de hacer esto en CSS puro, sin cambios en HTML o JavaScript.

Eso es correcto. Estoy añadiendo una nueva hoja de estilo a una página existente. Vamos a decir que no puedo modificar HTML o Javascript a utilizar.

Answer 1

Después de un poco de bricolaje, lo he descubierto!

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) */
}

Esto hará que la altura y la anchura de la imagen real 0, pero será expandir el cuadro para llenar el tamaño de la imagen con el acolchado. La única desventaja de esto es que no se verá perfecto en las versiones antiguas de Internet Explorer.

Answer 2

Si usted tiene un elemento que rodea la imagen, por ejemplo, un DIV, que debe ser capaz de establecer una imagen de fondo (junto con no-repeat y una posición) en él, a continuación, establecer la imagen para display:none.

Por otra parte, he aquí una solución azar que parece funcionar. Se posiciona la imagen fuera de la pantalla, a continuación, utiliza el pseudo-elemento :after para establecer una imagen de fondo. Debe ser viable, pero se le tenga que jugar con los valores para que funcione bien. No funcionará en IE6 sin embargo.

<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

La mejor manera de reemplazar las imágenes es fijar la posición de fondo. En primer lugar crear las dos imágenes diferentes y ponerlas una encima de la otra en la misma imagen. Digamos que su elemento de aspecto es de 50x50 píxeles, se crearía una imagen de 50x100.

A continuación, utilice un código como este:

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

Así que para ver la segunda imagen se mueve el fondo por la cantidad requerida. Usted podría utilizar javascript o el código del lado del servidor para definir la clase correspondiente.

Answer 4

Tal vez se puede establecer una opacidad de un elemento y luego configurar el fondo de la imagen que desea.

Musicfreak:. Quería decir utilizando dos elementos

Answer 5

tendrá que asignar diferentes clases para los dos estados a continuación, escribir algo de JavaScript para que el cambio de imagen en un evento.

por ejemplo:

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