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)

[ceetix]

C'est du rollover ca. Chercher sur google tu aura du code préfait. C'est pas dur ^^. enfin je crois hein si je me trompe mea culpa

[rif15]

c'est bien un effet roll-over que je cherche
mais je ne sait pas comment faire pour le faire sur le background d'un td :s

[xavaxoo]

essaie ça :

entre les balises head de la page:

Code html :

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

1
2
3
4
5
6
7
8
9
10
<script language="javascript">
function dessus(){
    var image=document.getElementById("im");
    image.style.backgroundImage="url(i2.gif)";
}
function dehors(){
    var image=document.getElementById("im");
    image.style.backgroundImage="url(i1.gif)";
}
</script>

et dans le body :

Code html :

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

1
2
3
4
5
6
7
<table>
<tr>
<td id="im" style=" background-image:url(i1.gif)" width="100px" height="100px">  
<a href="javascript:void(0)" onmouseover="dessus();return false;" onmouseout="dehors(); return false;"><img  src="vide.gif" width="100px" height="100px" border="0"></a>  
</td>
</tr>
</table>

[Kerod]

Visiblement tu as opté pour la solution CSS

Je peux te proposer deux solutions :

1. Code html :

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

   1
   2
   3
   4
   5
   6
   7
   <table>
       <tr>
           <td class="rollover">
               <img src="vide.gif" alt="" />
           </td>
       </tr>
   </table>

   Code :

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

   1
   2
   3
   4
   5
   6
   7
   8
   9
     td.rollover
     {
       background : transparent url('image.gif') no-repeat 0 0;
     }
    
     td.rollover:hover
     {
       background : transparent url('image2.gif') no-repeat 0 0;
     }

   Pas je l'ai dit plus haut cette solution ne fonctionne que si l'utilisateur voit cette page avec avec un Internet Explorer 7 tous les inférieurs n'interprèteront pas correctement le CSS.

2. Code html :

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

   1
   2
   3
   4
   5
   6
   7
   <table>
       <tr>
           <td>
               <a class="rollover" href="#" onclick="return false;"><img src="vide.gif" alt="" /></a>
           </td>
       </tr>
   </table>

   Code :

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

   1
   2
   3
   4
   5
   6
   7
   8
   9
   10
   11
   12
   13
   14
   15
   16
   17
     img{
    
        border:0;
     }
    
     a.rollover
     {
       display :table;
       height:100%;
       text-decoration:none;
       background : transparent url('image.gif') no-repeat 0 0;
     }
    
     a.rollover:hover
     {
       background : transparent url('image2.gif') no-repeat 0 0;
     }

   Un seul petit soucis c'est que ta cellule doit avoir un contenu mais je suppose que ce sera le cas

[rif15]

Merci de vos reponses
J'aurais effectivement bien voulu le faire en css mais sa ne semble pas etre possible pour faire ce que je faire :s (enfin si mais pas tout compatible )

En fait la solution que tu propose kerod avec la class sur le td rend exactement ce que je veut (changement du background dans le td), mais comme tu la signaler sa n'est pas compatible avec ie< a la version7, ors il semble que 50% des internautes utilise une version antérieur :s

Je me suis donc empresser de tester ta 2éme solution, et la sa marche correctement, mais je ne peut pas l'adapter pour moi, effectievement, ce n'est plus le background qui change, mais l'image comprise dedans, et moi mon background est une image découper en plusieur morceaux qui se reforme une fois la table former, en utilisant le background dans un td sa marche bien, mais si l'image est inséré dans celui-ci il y a une séparation entre chaque :s

J'ai demander dans le forum javascript et on ma proposé une solution qui marche, mais la j'ai un bug qui apparait au niveau d'internet explorer, effectivement, le e présent dans l'onglet clignote dés que je passe sur mes images en rollover, celui-ci se fait bien en tout cas.

J'ai cependant peur que ce clignotement, ne géne mes membres et surtouts donne une image d'amateurisme.
Quelqu'un a déja vu sa?
Et si vous avez d'autre idée je suis preneurs

la solution javascript:

Code html :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
 
<html>
<head>
<style>
.img1{
background-image: url(image1.gif);
width: 200px;
height: 200px;
}
.img2{
background-image: url(image2.gif);
width: 200px;
height: 200px;
}
</style>
</head>
 
<body>
<table>
<tr>
<td class="img1" onmouseOut="this.className='img1';" onmouseOver="this.className='img2';">
image vide
</td>
</tr>
</table>
</body>
</html>

rappel: default constater: clignotement/sautement du symbole ie dans l'onglet au passage sur la zone en rollover

[rif15]

Personne n'a d'idée pour eviter le scintillement du favicon?