Basculer entre deux images en html avec css

Question

Je travaille sur un thème wordpress et je veux basculer entre deux images miniatures en survol.

Le code que j'ai ressemble à ceci:

<a class="thumb" href="posturl"> <img src="img1.jpg" class="image1" /> <img src="img2.jpg" class="image2" /> </a> 

Alors maintenant, je besoin de changer une css entre image1 et image2 sur le vol stationnaire.

Et si quelqu'un sait comment je peux obtenir un effet de fondu avec du javascript qui serait grandement apprécié.

Answer 1

Première , vous voulez vous débarrasser des balises img et utiliser uniquement css:

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

Vous pouvez utiliser javascript mais qui se très compliqué, CSS3 mais aura des effets fanent bientôt prêt:

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"); 
} 

Answer 2

Vous n'avez pas besoin des deux balises <img> là-dedans, il vous suffit de référencer les images et survolez état CSS:

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

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

Les exemples de vol stationnaire le plus élémentaire.

Vous pouvez également utiliser des 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*/ 
} 

Ce lui enfonce l'arrière-plan à gauche où 60px est la largeur de votre deuxième image.

Pour les images fading vous pouvez utiliser transtitions CSS3, mais IE ne supporte pas jusqu'à ce que la version 9.

Answer 3

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

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

pour la transition, jetez un oeil à des transitions CSS:

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

Answer 4

être prudent lorsque vous utilisez vol stationnaire si vous utilisez de grandes images .. navigateur peut prendre un certain temps pour afficher l'image pour la première fois. Pour éviter que essayez d'utiliser sprites et changer la position de fond sur le vol stationnaire

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 vous voulez des effets dans js .. peut-être sprites ne sont pas la meilleure réponse, cela dépend de l'effet que vous voulez. Pour cela, vous aurez besoin d'un framework comme Mootools ou Jquery.

Bonne chance