onMouseOver, delai, cacher du texte

**line86** · 17/07/2008, 12h31

Bonjour,
Voila j'utilise un script que j'ai trouvé sur ce site(section sources javaScript)

Code :

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

1
2
3
4
5
6
7
8
9
10
11
 
function affCache(idDiv) {
	var div = document.getElementById(idDiv);
	if (div.style.display == "")
		div.style.display = "none";
	else
		div.style.display = "";
}
<input type="button" onclick="affCache('div1');" value="affCache('div1')"/>
<div id="div1">
</div>

Le problème c'est que j'aurais aimé qu'au chargement de ma page tout soit caché... et qu'on les découvre en cliquant sur le bouton.
J'ai essayé via le css, en mettant display none mais ensuite même en cliquant sur les boutons rien ne s'affiche

J'ai voulu remplacer le onclick par onMouseOver, le problème c'est que j'ai l'impression qu'on ne peut mettre de délai pour l'ouverture... car la c'est trop rapide

Merci a vous

**E.Bzz** · 17/07/2008, 12h34

Bonjour,

Envoyé par line86

J'ai essayé via le css, en mettant display none mais ensuite même en cliquant sur les boutons rien ne s'affiche

Il faut remplacer les "" par "block"

Pour le délai :

Code :

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

setTimeout(ta_fonction(), delai_en_ms);

A+

**Auteur** · 17/07/2008, 12h52

bonjour,

Le problème c'est que j'aurais aimé qu'au chargement de ma page tout soit caché...

dans ce cas dans la CSS écris display:none pour que tous les éléments soient cachés dès le chargement de la page (cela évitera l'éventuel appel à une fonction qui cachera les éléments les uns après les autres).

**line86** · 17/07/2008, 14h31

Merci beaucoup pour vos réponses

Donc j'arrive à "les" cacher au chargement mais il me reste des petits problèmes

je suis débutant donc ...

J'ai rajouté dans mon css
#div1 {
display:none;
}
Le problème c'est que je peux avoir un nombre différent de div...
Il n'y a pas comme l'étoile

pour lui dire tout ce qui finit par n"importe quoi... lol

Et je n'arrive pas a utiliser

Code :

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

1
2
 
setTimeout(ta_fonction(), delai_en_ms);

Je l'ai testé ainsi mais sans résultat

Code :

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

1
2
3
 
<input type="button" setTimeout(onmouseover="affCache('div1')",1000) value="nom"/>
<input type="button" onmouseover=setTimeout("affCache('div1')",1000) value="nom"/>

Merci beaucoup pour votre aide!!

**E.Bzz** · 17/07/2008, 14h36

Envoyé par line86

Le problème c'est que je peux avoir un nombre différent de div...

Dans ce cas, mieux vaut utiliser une class (CSS) que tu affecteras à chacun des div concernés ...

Pour le problème de syntaxe :

Code :

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

<input type="button" onclick="setTimeout(affCache('div1'),1000);" value="affCache('div1')"/>

A+

**Bovino** · 17/07/2008, 14h38

Code :

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

<input type="button" onclick="setTimeout(affCache('div1'),1000)" value="Texte_du_bouton" />

**Auteur** · 17/07/2008, 14h51

Le problème c'est que je peux avoir un nombre différent de div...

là plusieurs façons de procéder :

1- tu fais une classe :

Code css :

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

1
2
3
4
 
.cacherDiv{
display:none;
}

et pour chacun des div à cacher tu utilises l'attribut class :

Code html :

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

1
2
3
4
5
6
7
<div class="cacherDiv">ce div est caché</div>
 
<div class="cacherDiv">ce div est caché</div>
 
<div>ce div n'est pas caché !!!!</div>
 
<div class="cacherDiv">ce div est caché</div>

tous les div qui appelleront la classe cacherDiv seront cachés.

2- Tu utilises les id des éléments à cacher (comme tu l'as fait ci-dessus pour le #div1)

Code css :

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

1
2
3
#div1, #div2, #div3{
display:none;
}

Mais si tu as 50 div à cacher cela peut être fastidieux

3- Tu appliques la propriété sur tous les div :

Code css :

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

1
2
3
div{
display:none;
}

là c'est radical, tous les div seront cachés mais je ne crois pas que ce soit ce que tu recherches.

Remarque : fais bien attention à la syntaxe dans les 3 cas

(présence d'un point devant le nom de la classe, un # si tu utilises l'id, ou le nom de la balise pour que la propriété s'applique à tous les éléments).

**line86** · 17/07/2008, 15h05

Merci pour vos réponses !!!
Mais voila le problème, si j'utilise une class lorsque je vais survoler un bouton il risque de tout m'ouvrir car il n'aura plus un id unique... non?

Il me reste la méthode

#div1, #div2 .... lol

J'ai essayé les différentes syntaxes pour le setTimeout mais ça ne fonctionne pas

mais comme je le mets dans un print car je suis en php... je me suis peut être trompé...

Code :

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

1
2
 
print("<input type=\"button\" onmouseover=\"setTimeout(affCache('div$i'),1000000)\" value=\"$nomComplet\" />");

Merci encore !!!

**E.Bzz** · 17/07/2008, 15h24

Envoyé par line86

Mais voila le problème, si j'utilise une class lorsque je vais survoler un bouton il risque de tout m'ouvrir car il n'aura plus un id unique... non?

Non, aucun problème : id et class sont 2 notions indépendantes.
id = identifiant unique de l'objet dans le document
class = regroupement de propriétés CSS

La class peut être utilisée autant de fois que nécessaire dans le document.

Sinon on ne te proposerait pas cette solution

A+

**E.Bzz** · 17/07/2008, 15h25

... heu : 1000 secondes ça fait long à attendre.
Surtout pour des tests

A+

**Auteur** · 17/07/2008, 15h26

Pour le setTimeout() je me demande si la fonction passée en paramètre peut contenir des arguments ? Je n'en suis pas sûr.

**line86** · 17/07/2008, 15h42

... heu : 1000 secondes ça fait long à attendre.

Oui mais c'est pour voir si il s'ouvre directement ou pas....
et comme il s'ouvre directement... lol

Pour le setTimeout() je me demande si la fonction passée en paramètre peut contenir des arguments ? Je n'en suis pas sûr.

Vous parlez de la fonction affCache('div$i')?

Car si c'est le cas, il me semble que oui car c'est dans la rubrique source de se site que je l'ai trouvé

Merci

**E.Bzz** · 17/07/2008, 15h55

Envoyé par Auteur

Pour le setTimeout() je me demande si la fonction passée en paramètre peut contenir des arguments ? Je n'en suis pas sûr.

Si tu ne mets pas la fonction entre quottes, si ...

A+

**E.Bzz** · 17/07/2008, 15h57

Bref

Code :

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

<input type="button" onclick="setTimeout(affCache('div1'),1000);" value="affCache('div1')"/>

**line86** · 18/07/2008, 15h17

Bonjour, bonjour
Je n'arrive toujours pas a réaliser ce que je souhaite

Le temps de latence ne s'applique pas

Et la methode avec la class, pour remplacer tous les div1, div2, div3 ne fonctionne pas...

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
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
	<head>
		<title>[\o/]</title>
		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"/>
		<link rel="stylesheet" media="screen" type="text/css" title="Essai" href="essai.css" />
	</head>
<body>
 
<script type="text/javascript">
function affCache(idDiv) {
	var div = document.getElementById(idDiv);
	if (div.style.display == "block")
		div.style.display = "none";
	else							
		div.style.display = "block";
}
</script>
 
<input type="button" onclick="setTimeout(affCache('div1'),1000);" value="affCache('div1')"/>
	<div class="cacherDiv">
		<p>
		  Linux, ou GNU/Linux, est un système d'exploitation compatible POSIX. Linux est basé sur le noyau Linux, un logiciel libre <br />
		</p>
	</div>
<br />
 
<input type="button" onclick="setTimeout(affCache('div2'),1000);" value="affCache('div2')"/>
	<div id="div2">
		<p>
		En 1991, les compatibles PC dominent le marché des ordinateurs personnels et fonctionnent généralement sous les systèmes <br />
		d'exploitation MS-DOS, Windows et OS/2. Le microprocesseur Intel 80386, vendu depuis 1986, commence à être abordable. <br />
		</p>
	</div>
<br />
 
<input type="button" onmouseover="setTimeout(affCache('div3'),1000);" value="affCache('div2')"/>
	<div id="div3">
		<p>
				En juin 1991, la Berkeley Software Distribution (BSD) sort la Networking Release 2 (Net/2), qui constitue un système UNIX BSD <br />
			presque complet. Mais un procès lancé par Unix System Laboratories contre Berkeley Software Design fait peser des doutes sur le <br />
			statut de cette distribution pendant presque deux ans.<br />
		</p>
	</div>
</body>
</html>
 
 
Et le fichier essai.css
.cacherDiv {
	display:none;
}
 
#div2, #div3 {
	display:none;
}

Merci encore pour votre aide

**SpaceFrog** · 18/07/2008, 15h20

Code :

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

1
2
3
4
5
6
7
<script type='text/javascript'>
function lateAlert(texte){
alert(texte)
}
setTimeout(function(){lateAlert('coucou')},1000)
 
</script>

??

les paramètres passent bien

**line86** · 20/07/2008, 11h21

Oui ici le délai pour l'affichage est respecté...
[edit] Je viens de trouver une partie de ma réponse dans la FAQ

Faq:
Sous Firefox, il est également possible de passer des arguments à la fonction appellée, en rajoutant des arguments à la fonction setTimeout:

setTimeout(alert, 2000, 'gnark');

Ca fonctionne bien dans mon cas... Mais sous i-e ca ne fonctionne pas

**Auteur** · 20/07/2008, 12h38

Envoyé par line86

Et la methode avec la class, pour remplacer tous les div1, div2, div3 ne fonctionne pas...

Attention : ne confonds pas class et id ! Ne remplace pas l'attribut id par l'attribut class

(ce que tu as fait pour le div1).

id est l'identifiant de ton objet, il est unique.
Une classe (class) est regroupement de propriétés CSS (pour reprendre ce qu'à écrit E.Bzz). Une même classe peut s'appliquer sur plusieurs objets.

Pour ce qui est du setTimeout() :
En ce qui me concerne j'ai toujours du souci à passer des arguments à une fonction déclenchée par un timer (setTimeout() ou setInterval()).

J'ai donc trouvé un "compromis" :
- mes fonctions déclenchées par un timer n'ont pas d'arguments
- j'utilise des variables globales
d'où :

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
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
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
<head>
 
<title></title>
 
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta http-equiv="Content-Language" content="fr" />
 
<style type="text/css">
<!--
.cacherDiv{
 display: none;
}
-->
</style>
 
 
<script type="text/javascript">
<!--
var idDiv;
function affCache() 
{
        var div = document.getElementById(idDiv);
        if (div.style.display == "block")
                div.style.display = "none";
        else                                                    
                div.style.display = "block";
}
 
function declencherTimer(idDivCache)
{
  idDiv = idDivCache;
  setTimeout("affCache()","1000");
}
 
//-->
</script>
 
</head>
 
<body>
 
<input type="button" onclick="declencherTimer('div1')" value="afficher div1"/>
	<div id="div1" class="cacherDiv">
		<p>
		  Linux, ou GNU/Linux, est un système d'exploitation compatible POSIX. Linux est basé sur le noyau Linux, un logiciel libre <br />
		</p>
	</div>
 
<br>  
 
  <input type="button" onclick="declencherTimer('div2')" value="afficher div2"/>
	<div id="div2" class="cacherDiv">
		<p>
		En 1991, les compatibles PC dominent le marché des ordinateurs personnels et fonctionnent généralement sous les systèmes <br />
		d'exploitation MS-DOS, Windows et OS/2. Le microprocesseur Intel 80386, vendu depuis 1986, commence à être abordable. <br />
		</p>
	</div>
 
</body>
</html>

J'ai donc été obligé de créer une fonction qui déclenche le timer et la variable globale idDiv. Et j'ai supprimé l'argument de affCache(), la fonction déclenchée par le timer.

C'est "rustique" mais au moins tu n'as pas à te soucier des paramètres passés à ta fonction.

**line86** · 20/07/2008, 14h29

Super ca marche bien !
Merci pour ces informations !

beaucoup a vous !!

onMouseOver, delai, cacher du texte

JavaScript

Discussions similaires

Partager

Partager