Discussion :

[rif15]

Bonsoir,
J'ai actuellement un souci, je souhaite avoir un effet de roll over sur mes images, mais la situation est un peu particuliére..
En effet, j'ai un tableau:

Code html :

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

1
2
3
4
5
6
7
 <table>
<tr>
<td background=fond.gif>
<img src=vide.gif>
</td>
</tr>
</table>

et je voudrait que lorsque la souris passe sur mon image vide.gif (meme taille que le <td>), mon fond , fond.gif change pour devenir new.gif

Donc concretement je voudrait que l'image préente dans ma cellule change en roll over le background de celle ci.

CSS, javascript?? j'avoue ne pas avoir d'idée, j'espere que vous pourrez m'aider

[Kerod]

Salut,

Comme tu as pu le remarquer il existe plusieurs solutions et je vais tenter de te les exposer

CSS :

1. Tu te casses pas la tête et tu définies la pseudo-classe hover de td (td:hover { }) et tu y mets le background que tu veux. Attention il faudrait faire la même chose pour l'état initial du fond (autrement dit : td { ... }
2. Il y a une deuxième solution car la première ne sera compatible qu'avec la dernière version de certains navigateurs surtout IE (les pseudo-classes, excepté pour les balises de liaisons (a), ne sont pas reconnues). Donc il faudrait éventuellement utiliser un a qui prendrait toutes la largeur et hauteur de ton td ( a { display : block; }, il me semble que tu n'aies pas besoin de définir les dimensions, mais si tu as un soucis de création il faudrait éventuellement le faire ou résoudre ce soucis) et bien sûr ton a pourra éventuellement contenir l'image de base (vide.gif) et avoir comme arrière-plan celui du td. Le seul soucis que je vois à cette heure avec l'utilisation du a est le lien . Il faudrait éventuellement faire ceci :

   Code html :

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

   <a href="#" onclick="return false">....</a>

3. Ben tout simplement le JavaScript, mais s'il est désactivé pour des raisons de sécurité, ben il y aura aucun effet.

Maintenant à toi de faire ton choix. Mais quelque soit ton choix il faudra te rediriger vers l'un des forums (CSS ou JavaScript)