Bonsoir,
J'ai un petit programme qui me permet, au survol d'un signe [+], de faire apparaitre un message caché... Ca, ça fonctionne !
Après, je viens de passer plusieurs heures à essayer de faire en sorte que, quand on survole plusieurs fois ce bouton, seul le 1er survol est enregistré, mais rien n'y fait... Il y aurait bien pu y avoir la fonction stop(), qui permet d'éviter ce bigntz là avec la fonction animate(), mais dans le cas présent, j'ai dû me rabattre sur slideDown car cette fonction a l'avantage (quand même) de me permettre d'ajuster la hauteur du bloc caché (à son apparition) en fonction de la hauteur que va occuper le texte caché (vu que le height n'a pas besoin d'être précisé dans la fonction slideDown).
Voilà, peut-être l'un de vous aura déjà été confronté à ce problème de rebond, en tous cas, si vous avez une proposition à me faire, par avance Merci !

Code html + javascript:
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
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
<html>
<head>
<title>Empecher un rebond</title>
 
<link type="text/css" rel="stylesheet" href="Empecher_un_rebond.css" />
<script src="http://jqueryjs.googlecode.com/files/jquery-1.3.js" type="text/javascript"></script>
 
<script type="text/javascript">
	$(document).ready(function(){
 
		$(".numero_de_bouton1").mouseover(function (){
			$('.message_numero1 > div').slideDown(500);});
 
		$(".numero_de_bouton1").mouseout(function (){
			$('.message_numero1 > div').slideUp(500);});
	});
</script>
 
</head>
<body bgcolor="#FFFFFF" background="images/Fond.png">
 
<div id="Container" style="position:absolute; width:310px; height:100px; left: 200px; top: 10px">
 
	<div id="Sous_titre" style="width:300">Sous titre</div>
	<div id="Ombre_sous_titre_d"></div>
 
	<div id="Bouton_plus" class="numero_de_bouton1"></div>
	<div id="Texte" style="width:280px">Texte</div>		
	<div id="Ombre_ligne_d"></div>
 
	<span class="message_numero1">
		<!-- Gestion / texte caché -->
			  <div id="Texte_caché" style="display:none; width:290px">
				<span>Texte qui apparait... Texte qui apparait... Texte qui apparait... Texte qui apparait... </span>
				<br /><br />
			  </div>
	</span>
</div>
 
</body>
</html>
Code CSS:
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
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
#Container
{
   z-index: 1;
   border: 1px solid #F9CB66;
}
#Sous_titre
{
   float: left;
   height: 20px; 
   background-image: url("images/Degrade_sous_titre.png");
   background-repeat: repeat-x;
   padding: 0px;
   margin: 0px;
   text-align: left;
   line-height: 18px;
   text-indent: 15px;
   color: #9E352F; /* Texte en rouge */
   font-weight: bold; /* Texte en gras */
   font-size: 13px;
   font-family: Arial, "Arial Black", "Times New Roman", Times, serif;
}
#Ombre_sous_titre_d
{
   float: left;
   background-color: #663D1D;
   width:5px; 
   height:17px;
   margin-top: 3px; /* Décalage de l'ombre */
}
#Bouton_plus
{
   float: left;
   width: 20px;
   height: 19px;
   background-color: #FFD9B3;
   background-image: url("images/Plus_mini_2.gif");
   background-position : right; /* Fond avec bouton "Plus" positionné à droite */
   background-repeat: no-repeat;
}
#Texte
{
   float: left;
   height: 19px;
   background-image: url("images/Fond_texte.png");
   background-repeat: repeat-x; 
   text-align: left;
   line-height: 17px;
   text-indent: 1px;
   color: black;
   font-weight: normal;
   font-size: 12px;
   font-family: Arial, "Arial Black", "Times New Roman", Times, serif;
}
#Ombre_ligne_d
{
   float: left;
   background-color: #663D1D;
   width:5px; 
   height:19px;
}
#Texte_caché
{
   float: left;
   background-color: #FFE9D2;
   background-image: url("images/Ombre_ligne_droit.png");
   background-position : right; /* Fond avec ombre positionnée à droite */
   background-repeat: repeat-y;
   text-align: left;
   padding-left: 5px;
   padding-right: 10px;
   line-height: 17px;
   text-indent: 7px;
   color: black;
   font-weight: normal;
   font-size: 12px;
   font-family: Arial, "Arial Black", "Times New Roman", Times, serif;
}