Bonjour à tous,

Nouveau venu dans le monde du Javascript et de jQuery, ma question va vous sembler être un grand classique mais malheureusement je n'ai pas trouvé de solution dans les nombreux posts traitant de ce sujet sur la toile...

Alors voilà, ce que j'essaye de faire depuis plusieurs jours c'est un rollover sur une image sprite servant de lien avec un effet fondu entre l'image statique et l'image mouseover... (un grand classique lol)

Voici mon CSS de départ:

Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
.img-sprite{display:block; width:300px; height:300px; background-color:transparent; background-repeat:no-repeat; background-position: 0 0; }
.img-sprite:hover{background-position : 0 -300px; }
#img1{background-image: url(../images/home/image1.jpg); }
#img2{background-image: url(../images/home/image2.jpg); }
#img3{background-image: url(../images/home/image3.jpg); }
Et mon HTML:
Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
<a class="img-sprite" id="img1" href="page1.html"></a>
<a class="img-sprite" id="img2" href="page2.html"></a>
<a class="img-sprite" id="img2" href="page3.html"></a>
Comme je le disais j'ai trouvé et essayé plein de solutions trouvées sur le web pour mon effet rollover mais la plupart du temps ce sont des exemples qui se rapportent à un menu avec des <ul> et des <li> etc... dans le CSS et je n'ai pas réussit à l'adapter à mon cas...
J'ai aussi trouvé un effet de rollover sur une image qui marche très bien mais qui utilise 2 images différentes (pas de sprite), qui les superposent et qui joue simplement sur la propriété "opacity" de celle qui est au 1er plan... et pour tout un tas de raisons la non plus je ne peux pas m'en servir de base pour ce que je souhaite réaliser...

Enfin bref, voilà tout.. .
Un grand merci d'avance pour votre aide précieuse,
M.S