Cambiar entre dos imágenes en html con css

Estoy trabajando en un tema de WordPress y quiero cambiar entre dos imágenes en miniatura sobre el vuelo estacionario.

El código que tengo se ve así:

    

Así que ahora necesito algo de CSS para cambiar entre image1 e image2 en vuelo estacionario.

Y si alguien sabe cómo puedo obtener un efecto de desvanecimiento con un javascript que sería muy apreciado.

Primero, quiere deshacerse de las tags img y usar solo css:

 a:link { background: url("img1.jpg"); } a:hover { background: url("img2.jpg"); } 

Podrías usar javascript pero eso sería muy complicado, CSS3 sin embargo tendrá efectos de fade listos pronto:

 a:link { background: url("img1.jpg"); -webkit-transition:background 1s ease-in; -moz-transition:background 1s ease-in; -o-transition:background 1s ease-in; transition:background 1s ease-in; } a:hover { background: url("img2.jpg"); } 

tenga cuidado al usar el control deslizante si está utilizando imágenes de gran tamaño … el navegador puede demorar un poco para mostrar la imagen por primera vez. Para evitarlo, intente usar sprites y cambiar la posición de fondo en el vuelo estacionario

 a.thumb { background-image: url(img.jpg) no-repeat 0 0; } a.thumb:hover { background-image: url(img.jpg) no-repeat -100px 0; /*set to the position of the second image*/ } 

si quieres algunos efectos en js … tal vez los sprites no son la mejor respuesta, depende del efecto que quieras. para eso necesitarás un framework como Mootools o Jquery.

Buena suerte

No necesita las dos tags , solo tiene que hacer referencia a las imágenes y al estado de desplazamiento en CSS:

 a.thumb { background-image: url(img1.jpg); } a.thumb:hover { background-image: url(img2.jpg); } 

El más básico de los ejemplos de vuelo estacionario.

También puedes usar sprites CSS:

 a.thumb { background-image: url(img1_sprite.jpg); background-position: 0 0; } a.thumb:hover { background-image: url(img1_sprite.jpg); background-position: -60px 0; /*see below*/ } 

Esto desplaza el fondo a la izquierda donde 60px es el ancho de su segunda imagen.

Para las imágenes con desvanecimiento, puede usar transiciones de CSS3, pero IE no es compatible hasta la Versión 9.

 a .image1 { display: inline; } a .image2 { display: none; } a:hover .image1 { display: none; } a:hover .image2 { display: inline; } 

para la transición, eche un vistazo a las transiciones css:

http://net.tutsplus.com/tutorials/html-css-techniques/css-fundametals-css-3-transitions/