Discussion :

[iluvatar75]

Bonjour tout le monde !

voilà, j'ai intégré sur mon site un script carousel + un effet slideshow sur mes images. Par contre je veux rajouter un effet "hover" c'est-à-dire que lorsque la souris passe sur l'une des vignettes la case change d'apparence (du gris à la couleur par exemple).

je vous donne un extrait du code :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
<ul class="jcarousel-skin-tango" style="padding-left:0;">
    <li><a href="images/galerie/cofely_1.jpg" rel="lyteshow" title="" >
    <img src="images/galerie/cofely_nb.jpg" alt="" width="120" height="100"/></a>
     </li>
</ul>

(il y a juste une image, normalement il y en a plusieurs)

Je ne sais pas comment "cibler" cette image, faut-il lui donner un ID ?

Merci beaucoup !

[Invité]

Là comme ça, j'opterais pour un:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
.jcarousel-skin-tango img:hover {
//Code CSS
}

Mais j'ai peut-être mal saisi ton problème...

[iluvatar75]

Là comme ça, j'opterais pour un:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
.jcarousel-skin-tango img:hover {
//Code CSS
}

Mais j'ai peut-être mal saisi ton problème...

Malheureusement ça ne marche pas...

Y a t-il un autre moyen ?

[iluvatar75]

Bon après quelques essais, je pense que je m'approche de la solution

J'ai mis un identifiant "case_1"

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
<ul class="jcarousel-skin-tango" style="padding-left:0;">
    <li><a href="images/galerie/cofely_1.jpg" rel="lyteshow" title="" id="case_1">
    <img src="images/galerie/cofely_nb.jpg" alt="" width="120" height="100"/></a>
     </li>
</ul>

Dans ma feuille de style j'ai mis une opacité à 50% afin de tester si ça marche...

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
a#case_1 {
opacity: 0.5;
}

Jusque là ça fonctionne...lorsque je passe ma souris sur la case, ce dernier a une opacité de 50%

Par contre si je veux que cette case change d'image

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
 
a#case_1 {
background-image: url(../images/case_1-2);
}

Ça ne fonctionne pas ...lorsque je passe ma souris sur la case, il ne se produit rien.



Quelqu'un pourrait m'éclairer ?

[Bovino]

Malheureusement ça ne marche pas...

Désolé de te contredire, mais si, ça marche

Par contre si je veux que cette case change d'image

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
 
a#case_1 {
background-image: url(../images/case_1-2);
}

Ca ne fonctionne pas ...lorsque je passe ma souris sur la case, il ne se produit rien.

Ah ben oui... je comprends mieux
Il faudrait déjà comprendre la différence entre une image et une image de fond...
Ta balise <a> contient une balise <img />, ce qui signifie que cette image sera affichée "par dessus" la balise <a>, du coup, attribuer une image de fond (background-image) est particulièrement inutile puisqu'elle sera cachée par l'image de la balise <img />...

En gros, imagine toi un mur sur lequel tu as affiché un poster. Si tu essayes de mettre du papier peint sous le poster, ben tu le verras jamais puisqu'il sera masqué par le poster. C'est exactement ce que tu essayes de faire en CSS.

[iluvatar75]

Quelle nouille que je suis !

Tu as raison...et comment résoudre ce problème ?
Faut-il un script ?

[Bovino]

Soit tu mets ton image de départ en background, soit tu changes le src de l'image au survol mais ça nécessite un peu de JavaScript (ceci dit, ça permet aussi le préchargement de l'image).
Les effets de rollover avec hover, la pseudo-classe CSS