css para reemplazar una imagen

Question

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

¿Hay alguna técnica para reemplazar imágenes? ¿Hay alguna manera de establecer el fondo de una imagen en una imagen y luego ocultar o mover el primer plano de la imagen (el elemento src de la imagen).

Estoy tratando de escribir una máscara para un sitio que tiene una imagen que quiero reemplazar. Gracias.

Por lo que entiendo, está tratando de hacer esto en CSS puro, sin cambios en HTML o JavaScript.

Eso es correcto. Estoy agregando una nueva hoja de estilo a una página existente. Digamos que no puedo modificar HTML o utilizar javascript.

Answer 1

Después de un poco de retoque, ¡lo descubrí!

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 se ampliará la caja para llenar el tamaño de la imagen con el acolchado. El único inconveniente de esto es que no se verá perfecto en versiones anteriores de Internet Explorer.

Answer 2

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

Musicfreak: me refería a utilizar DOS elementos.

Answer 3

tendrá que asignar diferentes clases para los dos estados y luego escribir algunos javascript para que la imagen cambie sobre 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" 
} 

Answer 4

La mejor manera de reemplazar las imágenes es fijar la posición de fondo. Primero crea las dos imágenes diferentes y colócalas una arriba de la otra en la misma imagen. Supongamos que su elemento de máscara tiene 50x50 píxeles, crearía una imagen de 50x100.

A continuación, utilice un código como éste:

.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. Puede usar javascript o su código del lado del servidor para establecer la clase adecuada.

Answer 5

Si tiene un elemento que rodea la imagen, p. un DIV, debería ser capaz de establecer una imagen de fondo (junto con no-repeat y una posición), y luego establecer la imagen en display:none.

Alternativamente, aquí hay una solución fortuita que parece funcionar. Posiciona la imagen fuera de la pantalla, luego utiliza el pseudo-elemento :after para establecer una imagen de fondo. Debería ser viable, pero tendrá que manipular los valores para que funcione correctamente. Sin embargo, no funcionará en 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">