comment faire cet effet de hover sur un row de table

Version imprimable

01/03/2011, 01h17
boucdur

1 pièce(s) jointe(s)

comment faire cet effet de hover sur un row de table

Bonjour à tous,

on me demande de réaliser un effet qui me parrait franchement compliqué à faire sur un row de table.
en piece jointe l'exemple en image, regarder bien l'effet hover sur le row

Etant donné que l'effet s'applique en hover sur un row (un tr), il me semble que le javascript est indispensable.

Le grossiement de l'ensemble y compris de lataille des caractère et surtout L'effet de decrochage me semble difficile à faire.

Si quelqu'un à une idée de la façon de s'y prendre pour faire ça et de façon compatible meme sur ie7 ce serait très intéressant.

Merci pour votre aide souvent précieuse. biggrin
01/03/2011, 08h43
SpaceFrog

a priori je dirais que la façon la plus simple de faire quelque chose de crossbrowser est de mettre une image en background du tr au survol...
Vu que tes cellules ont toutes l'air d'avoir la même taille ça n'en serait que plus simple ...
01/03/2011, 10h25
boucdur

bien sur,

mais là la largeur du tr au suvol est plus large que celle du tableau dans son etat normal. Si je met une image comme ça au survol c'est tout mon tableau qui va s'elargir non ? pas juste la ligne que je survole ?
01/03/2011, 10h34
SpaceFrog

ou alors tu mets un div légèrement plus grand en z-index de premier plan en le positionnant par rapport au tr survolé pour en effet avoir un effet de dépassement en largeur ...
Je proposais juste un truc simple
01/03/2011, 10h46
boucdur

je vois pas trop comment m'y prendre.
je vais essayé quelquechose et reviens.

A priori ca va être très compliqué donc non ?

Code:

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
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
<style type="text/css">
#tableau {
border-collapse: collapse;
}
#tableau tr td {
        border: solid 1px silver;
        }
 
#line {
	position:absolute;
	display: none;
	border: solid 1px silver;
	border-bottom:solid 2px gray;
	z-index: 2;
	height: 28px;
	background-color:white;
	border-collapse: collapse;
	}
#line tr td {	border: solid 1px silver;}
</style>
<script type="text/javascript">
$(function(){
$('#tableau tr').hover(function(){
	$('#line').css({top:$(this).offset().top-2+"px",left:$(this).offset().left-2+"px"});
	$('#line').css({width:'205px'})
	$('#line tr').eq(0).html(this.innerHTML)
	$('#line').show();
 
})
 
})</script>
</head>
 
<body>
<table id="line">
	<tr>
		<td></td>
		<td></td>
		<td></td>
		<td></td>
		<td></td>
	</tr>
</table>		
<table id="tableau">
	<tr class="zoom">
		<td>un  </td>
		<td>deux </td>
		<td>trois </td>
		<td>quatre </td>
		<td>cinq </td>
	</tr>
	<tr class="zoom">
		<td>six </td>
		<td>sept </td>
		<td>huit </td>
		<td>neuf </td>
		<td>dix </td>
	</tr>
	<tr class="zoom">
		<td>onze </td>
		<td>douze </td>
		<td>treize </td>
		<td>quatorze </td>
		<td>quinze </td>
	</tr>
 
</table>	
</body>
 
</html>

Super merci spaceFrog,

Ca à l'air d'etre la bonne méthode,
Cependant dans mon cas je n'arrive pas à conserver les styles.
Comme je comprend pas grand chose au jquery à moins que ça reste basique et ben là j'ai du mal à bidouiller ton code.

je ne sais pas par exemple recupérer la couleur de fond de la ligne sur laquelle je passe la souris et surtout les proportions des cellules de la ligne originale.

Code:

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
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
 
<style type="text/css">
#tableau {
border-collapse: collapse;
}
#tableau tr td {
        border: solid 1px silver;
        }
 
#line {
	position:absolute;
	display: none;
	border: solid 1px silver;
	border-bottom:solid 2px gray;
	z-index: 2;
	height: 28px;
	background-color:white;
	border-collapse: collapse;
	}
#line tr td {	border: solid 1px silver;}
</style>
<script type="text/javascript">
$(function(){
$('.table_warrants tr').hover(function(){
	$('#line').css({top:$(this).offset().top-2+"px",left:$(this).offset().left-2+"px"});
	$('#line').css({width:'602px'})
	$('#line tr').eq(0).html(this.innerHTML)
	$('#line').show();
 
})
 
})</script>
</head>
<body>
<table id="line">
	<tr>
		<td nowrap></td>
		<td nowrap></td>
		<td nowrap></td>
		<td nowrap></td>
		<td nowrap></td>
        <td nowrap></td>
        <td nowrap></td>
	</tr>
</table>	
 
 
 
			<table border="0" cellpadding="0" cellspacing="0" width="600" class="table_warrants">
 
			<tr class="ligne_titres_colonnes">
            <td width="11"></td>
			<td align="left">
				<span class="titre_col">Fond</span>
 
 
			</td>
			<td><span class="titre_col">Derniere V.L</span></td>
			<td>
 
				<span class="titre_col">1 sem</span>
				<a href="#"><img src="images/fleche_up_colonne.gif" border="0" title="Affichage croissant"/></a>
			</td>
			<td><span class="titre_col">1 mois</span><a href="#"><img src="images/fleche_up_colonne.gif" border="0" title="Affichage croissant"/></a></td>
 
			<td><span class="titre_col">3 mois</span><a href="#"><img src="images/fleche_up_colonne.gif" border="0" title="Affichage croissant"/></a></td>
			<td><span class="titre_col">6 mois</span><a href="#"><img src="images/fleche_up_colonne.gif" border="0" title="Affichage croissant"/></a></td>
			<td align="right">
 
				<span class="titre_col">1 an</span>
				<a href="/bourse/indices/indices.jsp?fw3_autonomous=/bourse/indices/indices-view.jsp&amp;indices_FRANCE_sort=dynamicPerformanceYear.priceVariation.value&amp;indices_FRANCE_order=ascending&amp;indices_FRANCE_pageNum=1"><img src="images/fleche_up_colonne.gif" border="0" title="Affichage croissant"/></a>
			</td>
 
			<td width="11"></td>
			</tr>
 
 
 
			<tr class="ligne_impaire premiere_ligne">
				<td></td>
                <td nowrap align="left">
					<b>
					CAC 40
					</b>
				</td>
				<td nowrap><b>4 015,91</b></td>
 
				<td nowrap>
					<b>
 
 
 
			    		  <span class="varup">+ 0,64%</span>
 
 
 
		    	  </b>
		    	</td>
				<td nowrap><b><span class="varup">+ 0,64%</span></b></td>
				<td nowrap><b><span class="varup">+ 0,64%</span></b></td>
 
				<td nowrap><b><span class="varup">+ 0,64%</span></b></td>
				<td nowrap align="right">
					<b>
 
 
 
			    		  <span class="varup">+ 5,55%</span>
 
 
 
 
		    	  </b>
		    	</td>
				<td nowrap></td>
			</tr>
 
			<tr  class="ligne_paire ligne_hover">
            <td></td>
				<td nowrap align="left">
					<b>
					CAC IT
					</b>
 
				</td>
				<td nowrap><b>972,71</b></td>
				<td nowrap>
					<b>
 
 
			    		  <span class="vardown">- 0,08%</span>
 
 
 
 
		    	  </b>
		    	</td>
				<td nowrap><b><span class="vardown">- 0,08%</span></b></td>
 
				<td nowrap><b><span class="vardown">- 0,08%</span></b></td>
				<td nowrap><b><span class="vardown">- 0,08%</span></b></td>
				<td nowrap align="right">
					<b>
 
 
 
			    		  <span class="vardown">+ 7,27%</span>
 
 
 
		    	  </b>
		    	</td>
 
				<td nowrap></td>
			</tr>
 
			<tr class="ligne_impaire">
				<td></td>
                <td nowrap align="left">
					<b>
					CAC IT20
					</b>
				</td>
				<td nowrap><b>3 993,84</b></td>
				<td nowrap>
					<b>
 
 
			    		  <span class="vardown">- 0,10%</span>
 
 
 
 
		    	  </b>
 
		    	</td>
				<td nowrap><b><span class="vardown">- 0,10%</span> </b></td>
				<td nowrap><b><span class="vardown">- 0,10%</span> </b></td>
				<td nowrap><b><span class="vardown">- 0,10%</span> </b></td>
				<td nowrap align="right">
					<b>
 
 
 
			    		  <span class="vardown">+ 8,21%</span>
 
 
 
 
		    	  </b>
		    	</td>
				<td nowrap></td>
			</tr>
 
			<tr class="ligne_paire">
				<td></td>
				<td nowrap align="left">
					<b>
					CAC MID &amp; SMALL 190
					</b>
				</td>
				<td nowrap><b>7 522,47</b></td>
				<td nowrap>
					<b>
 
 
 
 
			    		  <span class="varup">+ 0,10%</span>
 
 
 
		    	  </b>
		    	</td>
				<td nowrap><b><span class="varup">+ 0,10%</span> </b></td>
				<td nowrap><b><span class="varup">+ 0,10%</span> </b></td>
				<td nowrap>
<b><span class="varup">+ 0,10%</span> </b></td>
				<td nowrap align="right">
					<b>		    	  
			    		  <span class="varup">+ 4,56%</span>
			    	   	  </b>
		    	</td>
				<td nowrap></td>
			</tr>
 
  </table>

Tu serais vraiment super si tu pouvais encore m'aiguiller.
merci beaucoup déjà pour ce gros coup de main.

09/03/2011, 00h58
boucdur

SUUUPPERRR!!!

J'ai réussi grace à toi Spacefrog.
J'ai rajouté un peu de jquery (pas joli, joli mais bon...) et un peu de css.
Ca marche au poil.

Merci merci merci
09/03/2011, 09h53
boucdur

:cry:Fausse joie :cry:

Ca ne marche que sur firefox derniere version et chrome.

Ca bug à mort sur tous les internet explorer meme le 8.

J'ai verifié ton code. Il bug de la même façon.
Il ne semble pas compatible entre les navigateurs.

j'ai placé ton code tel quel (sans rien changer) ici pour le tester:
http://www.francois-rosenbaum.com/le...spacefrog.html
j'ai juste ajouté l'appel à jquery dans le head.
C'est bien du jquery ce code ?

et voila comment je l'ai adapté:
http://www.francois-rosenbaum.com/le..._les_echos.htm

Saurais tu comment rendre ce merveilleux code compatible sur internet explorer aussi, meme le 6 ?

Tu serais vraiment formidable.
09/03/2011, 10h56
SpaceFrog

il semblerait que sou IE il y ait un conflit de class ??
je pige pas bien ton attribution des class pour les tr
09/03/2011, 11h10
boucdur

Mais il me semble que ton exemple de base à les mêmes complications sur la compatibilité avec les internet explorer.
C'est peut etre plus facile de voir ce qui peut poser probleme dans ce code la qui est un petit peu plus simple.

Sinon j'ai mis en ligne une version ou ne se trouve que le tableau.
C'est beaucoup plus simple à comprendre.
http://www.francois-rosenbaum.com/te...t_tableau.html

Je t'explique mes attributions de class sur les tr.
La premiere ligne du tableau (la ligne de titre) n'a pas de class utilisé dans le script.
Toutes les autres lignes ont soit la classe="ligne_impaire" ou classe="ligne_paire"
Ca me permet de faire le changement de couleur bleu ou gris.
Par la suite ces classes sera ajoutée dynamiquement.
09/03/2011, 11h19
SpaceFrog

ben hormis le style sur le tableau lors du hover je viens de tester sous IE et j'ai bien l'effet
quel sont les symptomes de ton coté ?
09/03/2011, 11h32
boucdur

Ah oui effectivement je me suis trompé. Ton exemple et mon exemple marchent bien sur tous les navigateurs.

C'est uniquement dans la page complète que ça bloque sur les internet explorer.
Ca doit faire un conflit de script.
Bah merde alors pourquoi ...?
http://www.francois-rosenbaum.com/le..._les_echos.htm

Je comprend pas.
09/03/2011, 11h37
SpaceFrog

peut etre juste un souci de nommage de variable
rajoute un noconflict() ?
09/03/2011, 11h52
boucdur

j'ai changer juste les 2 premiere lignes du script comme ça
$.noConflict();
jQuery(document).ready(function(){

avant j'avais juste le
$(document).ready(function(){
});
qui emballait tout le code.

mais je n'ai pas de difference
09/03/2011, 11h57
boucdur

en fait quand je met ça :
$.noConflict();
jQuery(document).ready(function($) {

ça marche plus du tout meme sur firefox.

Y a un probleme de syntaxe ? J'ai pourtant copié collé du site
http://api.jquery.com/jQuery.noConflict/

mais apparemment sur ma page il n'y a pas d'autres librairie il me semble.
09/03/2011, 14h53
boucdur

Euh Sapecefrog,

Tu vas dire que c'est bizare.
Dans mon message de 11h10 je te disais que meme ton exemple ne marchait pas sur internet explorer.
Et puis finalement j'ai réessayé et là ça marchait.
J'avais pensé que j'avais du mal regardé.

Et ben là je suis sur cette page maintenant :
mon adaptation de ton code :
http://www.francois-rosenbaum.com/te...t_tableau.html
et ton code tel quel :
http://www.francois-rosenbaum.com/le...spacefrog.html

et ça redéconne alors que je n'y ai pas touché du tout.

les symptomes sur ton exemple
http://www.francois-rosenbaum.com/le...spacefrog.html
c'est que le truc reagit mal au hover. mais j'ai repéré ou etait le probleme.
pour que l'effet se declenche correctement il faut que sorte la souris du tableau puis que je ré-entre dans le tableau. Là l'effet se déclenche directement.
Sinon ca deconne.

Sur mon exemple ça déconne encore plus.
http://www.francois-rosenbaum.com/te...t_tableau.html
La solution de sortir la souris du tableau n'aide pas mieux à déclencher l'effet.
c'est certainement du au fait que je ne cible pas tous les tr comme sur ton exemple mais seulement ceux de class="ligne_impaire" et de class="ligne_paire"

je suis casimment sur que ça vient du script donc maintenant.

Tu vois le même problème chez toi ?
09/03/2011, 15h09
boucdur

Ca a l'air d"etre que sur internet explorer 8 et peut etre le 9 (ja l'ai pas celui là)
J'ai pas ce probleme surle 6 et le 7 simulé avec le logiciel ietester.
09/03/2011, 15h25
boucdur

Superfrog ca va t'intéresser :
http://www.code-styling.de/english/j...oblems-at-ie-8

Un article qui semble parler d'un probleme entre ie8 les show/hide/togglet et les tr

J'ai juste commencé de le lire mais je sens que je chauffe.
La solution est par là.

Ca y est j'ai trouvé la solution :

le hover ne plait pas internet explorer 8 pour le 6 et le 7 c'est ok.
un dernier detail : internet explorer ne sait pas mettre d'image de background sur les tr. Il faudrait donc aussi dans le cas d'utilisation d'images changer ce code un petit peu.

la solution c'est de mettre plutot un mousenter.

Donc voilà le code du tableau final complet et crossbrowsers :

Code:

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
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Document sans nom</title>
</head>
<script language="Javascript" src="http://www.francois-rosenbaum.com/les_echos/scripts/jquery-1.5.1.min.js" charset="iso-8859-1"></script>        
<style type="text/css">
#tableau {
border-collapse: collapse;
}
#tableau tr td {
        border: solid 1px silver;
        }
 
#line {
	position:absolute;
	display: none;
	border: solid 1px silver;
	border-bottom:solid 2px gray;
	z-index: 2;
	height: 28px;
	background-color:white;
	border-collapse: collapse;
	}
#line tr td {	border: solid 1px silver;}
</style>
<script type="text/javascript">
$(function(){
$('#tableau tr').mousenter(function(){
	$('#line').css({top:$(this).offset().top-2+"px",left:$(this).offset().left-2+"px"});
	$('#line').css({width:'205px'})
	$('#line tr').eq(0).html(this.innerHTML)
	$('#line').show();
 
})
 
})</script>
<body>
 
<table id="line">
	<tr>
 
		<td></td>
		<td></td>
		<td></td>
		<td></td>
		<td></td>
	</tr>
</table>		
<table id="tableau">
	<tr class="zoom">
		<td>un  </td>
 
		<td>deux </td>
		<td>trois </td>
		<td>quatre </td>
		<td>cinq </td>
	</tr>
	<tr class="zoom">
		<td>six </td>
 
		<td>sept </td>
		<td>huit </td>
		<td>neuf </td>
		<td>dix </td>
	</tr>
	<tr class="zoom">
		<td>onze </td>
 
		<td>douze </td>
		<td>treize </td>
		<td>quatorze </td>
		<td>quinze </td>
	</tr>
 
</table>	
</body>
 
 
</html>

J'y serais pas arrivé sans toi spacefrog.:ccool:

09/03/2011, 16h26
SpaceFrog

et dire que je me méfies comme de la peste du hover ...
j'utilise toujours mouseenter et mouseleave ...
:roll: désolé