[Résolu] Rollover CSS dynamique

Bonjour à tous,

Je suis entrain de travailler sur une galerie où lorsque l'on passe sa souris sur une photo, j'affiche via un rollover CSS une autre image (via un background-position).

Le problème est que les image sont affichées dynamiquement par un script PHP, je dois donc mettre une partie du CSS dans ma boucle PHP et une autre partie dans la feuille CSS, du moins c'est ce que je souhaite faire pour que ce soit propre.

Voici un petit exemple pour mieux comprendre :

Dans ma page PHP : ("nomimage*.jpg" étant dynamique)

[BOUCLE PHP START]
<a href="mapage.php" style="background:url(img/monimage1.jpg) no-repeat 0 0;">Ma Photo 1</a>
<a href="mapage.php" style="background:url(img/monimage2.jpg) no-repeat 0 0;">Ma Photo 2</a>
<a href="mapage.php" style="background:url(img/monimage3.jpg) no-repeat 0 0;">Ma Photo 3</a>
...
[BOUCLE PHP END]

Dans ma feuille CSS :

#madiv a {
	text-indent:-9999px;
	display:block;	
	width:100px;
	height:135px;
}

#madiv a:hover { 
	background-position: -100px 0;
}

Donc mon problème est que le rollover ne fonctionne pas
Apparemment il y a un problème d'héritage ou autre, auriez vous une idée de l'erreur ou une solution à me donner ?

Merci d'avance et bonne journée à tous

Michael
Modifié par Lemim (07 Apr 2010 - 13:21)

Salut,

C'est pas un problème d'héritage, mais de priorité des sélecteurs.

Un style appliqué via l'attribut HTML style a un poids plus important qu'un style appliqué dans une feuille externe (voir l'étape 3 de cet article).

Pour solutionner ton problème :

1°) Soit tu utilises !important dans le code CSS :

#madiv a:hover { 
background-position: -100px 0 [#red]!important[/#]; }

2°) Soit tu ne précises dans le code HTML que le background-image, et le reste dans la feuille :

<a href="mapage.php" style="background-image:url(img/monimage1.jpg);">

#madiv a { 
[...]
background:no-repeat 0 0; }

Bonjour,

Lemim a écrit :
auriez vous une idée de l'erreur ou une solution à me donner ?

Absolument pas, le code que tu donne est insufisant pour le faire.

Dans ton code CSS tu indique un #madiv, elle n'est pas représentée dans le code HTML.

Super BeliG et un grand merci, ça fonctionne parfaitement avec !important !
Sinon pas de problème de compatibilité ou de norme avec !important ?
Sinon je viens de tester avec IE7 et ça fonctionne, IE6 lui je l'ais abandonné

Merci Laurie-Anne, en fait je n'avais pas mis "madiv" dans mon exemple, mais elle est bien présente dans mon code

Bon finalement j'ai opté pour ta deuxième solution BeliG, n'abusons pas des bonnes choses
Sinon je vais prendre le temps de lire l'article sur la priorité des sélecteurs

Lemim a écrit :
Sinon pas de problème de compatibilité ou de norme avec !important ?

IE6.

Ton problème est [Résolu] ?

Laurie-Anne a écrit :
Lemim a écrit :
auriez vous une idée de l'erreur ou une solution à me donner ?

Absolument pas, le code que tu donne est insufisant pour le faire.

Fail !

BeliG a écrit :

Ton problème est [Résolu] ?

Yep, [Résolu]

Encore merci
Modifié par Lemim (07 Apr 2010 - 13:24)