onmousover s'affiche au chargement de page

asus02 · 24/09/2011, 17h03

bonjour,
j'ai un script qui m'affiche un div au passage de la souris, ca fonctionne sauf qu'au chergement de la page les div sont tous afficher, je suis obligé de passer une fois ma souris sur les boutons pour effacer et apres c'est bon, comment fais pour q'uil soit invisible au chargement de la page et ne s'affichent que quand je passe la souris sur mes boutons.

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
<div id="content">
<table id="table" name="table" width="800">
<tr>
<td><a onMouseOver="div.show('div1')" onMouseOut="div.hide('div1')"><img src=""></a></td>
<td><a onMouseOver="div.show('div2')" onMouseOut="div.hide('div2')"><img src="http://s384036379.onlinehome.fr/img/button.png"  onMouseOver=" this.src='http://s384036379.onlinehome.fr/img/button2.png'" onMouseOut="this.src='http://s384036379.onlinehome.fr/img/button.png'" align="absmiddle"></a></td>
<td><a onMouseOver="div.show('div3')" onMouseOut="div.hide('div3')"><img src="http://s384036379.onlinehome.fr/img/button.png"  onMouseOver=" this.src='http://s384036379.onlinehome.fr/img/button2.png'" onMouseOut="this.src='http://s384036379.onlinehome.fr/img/button.png'" align="absmiddle"></a></td>
<td><a onMouseOver="div.show('div4')" onMouseOut="div.hide('div4')"><img src="http://s384036379.onlinehome.fr/img/button.png"  onMouseOver="this.src='http://s384036379.onlinehome.fr/img/button2.png'" onMouseOut="this.src='http://s384036379.onlinehome.fr/img/button.png'" align="absmiddle"></a></td>
<td><a onMouseOver="div.show('div5')" onMouseOut="div.hide('div5')"><img src="http://s384036379.onlinehome.fr/img/button.png"  onMouseOver="this.src='http://s384036379.onlinehome.fr/img/button2.png'" onMouseOut="this.src='http://s384036379.onlinehome.fr/img/button.png'" align="absmiddle"></a></td>
<td><a onMouseOver="div.show('div6')" onMouseOut="div.hide('div6')"><img src="http://s384036379.onlinehome.fr/img/button.png"  onMouseOver="this.src='http://s384036379.onlinehome.fr/img/button2.png'" onMouseOut="this.src='http://s384036379.onlinehome.fr/img/button.png'" align="absmiddle"></a></td>
</td>
</table>
</div>
<div id='div1'>
 
</div>
<div id='div2'>
test 1
</div>
<div id='div3'>
test 1
</div>
<div id='div4'>
test 1
</div>
<div id='div5'>
test 1
</div>
<div id='div6'>
test 1
</div>
<div>

Code :

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

1
2
3
4
5
6
7
8
9
10
<script type="text/javascript">
	div = {
		show: function(elem) {
			document.getElementById(elem).style.visibility = 'visible';
		},
		hide: function(elem) {
			document.getElementById(elem).style.visibility = 'hidden';
		}
	}
</script>

Code css :

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

1
2
3
<style type="css">
div {visibility:hidden}
</style>

merci de votre réponse

NoSmoking · 24/09/2011, 17h14

Bonjour,
il te suffit de leur affecter une class:hidden par exemple et de mettre les propriétés correspondantes dans le CSS

Code css :

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

1
2
3
.hidden {
  visibility:hidden;
}

avec

Code html :

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

1
2
3
<div id='div1' class="hidden">
 Blabla...
</div>

asus02 · 24/09/2011, 17h26

merci de ta réponse, j'ai donc fais un test mais j'ai le même résultat, le contenu du div est visible au chargement de la page et une fois que je suis passé sur tout les bouton au moins une fois ca fonctionne normalement..

je te donne le code de la page complète si tu veut faire un test en local.

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
 
<!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" xml:lang="fr" >
<head>
<script type="text/javascript">
	div = {
		show: function(elem) {
			document.getElementById(elem).style.visibility = 'visible';
		},
		hide: function(elem) {
			document.getElementById(elem).style.visibility = 'hidden';
		}
	}
</script>
<style type="css">
div {visibility:hidden;}
.hidden {
  visibility:hidden;
}
</style>
</head>
 
 
 
 
</body>
<div id="content">
<table id="table" name="table" width="800">
<tr>
<td><a onMouseOver="div.show('div1')" onMouseOut="div.hide('div1')"><img src=""></a></td>
<td><a onMouseOver="div.show('div2')" onMouseOut="div.hide('div2')"><img src="http://s384036379.onlinehome.fr/img/button.png"  onMouseOver=" this.src='http://s384036379.onlinehome.fr/img/button2.png'" onMouseOut="this.src='http://s384036379.onlinehome.fr/img/button.png'" align="absmiddle"></a></td>
<td><a onMouseOver="div.show('div3')" onMouseOut="div.hide('div3')"><img src="http://s384036379.onlinehome.fr/img/button.png"  onMouseOver=" this.src='http://s384036379.onlinehome.fr/img/button2.png'" onMouseOut="this.src='http://s384036379.onlinehome.fr/img/button.png'" align="absmiddle"></a></td>
<td><a onMouseOver="div.show('div4')" onMouseOut="div.hide('div4')"><img src="http://s384036379.onlinehome.fr/img/button.png"  onMouseOver="this.src='http://s384036379.onlinehome.fr/img/button2.png'" onMouseOut="this.src='http://s384036379.onlinehome.fr/img/button.png'" align="absmiddle"></a></td>
<td><a onMouseOver="div.show('div5')" onMouseOut="div.hide('div5')"><img src="http://s384036379.onlinehome.fr/img/button.png"  onMouseOver="this.src='http://s384036379.onlinehome.fr/img/button2.png'" onMouseOut="this.src='http://s384036379.onlinehome.fr/img/button.png'" align="absmiddle"></a></td>
<td><a onMouseOver="div.show('div6')" onMouseOut="div.hide('div6')"><img src="http://s384036379.onlinehome.fr/img/button.png"  onMouseOver="this.src='http://s384036379.onlinehome.fr/img/button2.png'" onMouseOut="this.src='http://s384036379.onlinehome.fr/img/button.png'" align="absmiddle"></a></td>
</td>
</table>
</div>
<div id='div1' class="hidden">
 
</div>
<div id='div2' class="hidden">
test 1
</div>
<div id='div3' class="hidden">
test 1
</div>
<div id='div4' class="hidden">
test 1
</div>
<div id='div5' class="hidden">
test 1
</div>
<div id='div6' class="hidden">
test 1
</div>
<div>
</body>
</html>

NoSmoking · 24/09/2011, 17h40

pour commencer <style type="text/css"> et non <style type="css">.
ensuite supprimes

Code css :

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

div {visibility:hidden;}

qui masque le menu

asus02 · 24/09/2011, 18h42

impec, merci beaucoup, et pendant que je te tient vu que tu est modo tu pourra peut être me répondre.
-----------
j'ai voulu mettre un avatar sur mon profil mais quand je vais dans modifier avatar la case est déjà cochée et je n'est pas le choix ou les bouton parcourir pour mettre un avatar, il y a t il un endroit a modifier avant ?

merci

{edit}

comment faire pour que le div reste affiché quand je suis dessus car si je quitte le bouton il s'efface alors que je voudrais placer des liens dans les div donc il faudrais qu'il reste actif tant que je suis le div ouvert.

merci

NoSmoking · 24/09/2011, 19h23

Citation:

Envoyé par asus02

impec, merci beaucoup, et pendant que je te tient vu que tu est modo tu pourra peut être me répondre.
-----------
j'ai voulu mettre un avatar sur mon profil mais quand je vais dans modifier avatar la case est déjà cochée et je n'est pas le choix ou les bouton parcourir pour mettre un avatar, il y a t il un endroit a modifier avant ?

à lire Privilèges des "Membres du club" : signature, avatar, etc.
...il te faut patienter un peu...

Citation:

Envoyé par asus02

comment faire pour que le div reste affiché quand je suis dessus car si je quitte le bouton il s'efface alors que je voudrais placer des liens dans les div donc il faudrais qu'il reste actif tant que je suis le div ouvert.

tu peux t'inspirer de ce qui c'est raconté lors de ce message
Menu à onglets : Conserver l'onglet actif même après la perte du focus

asus02 · 24/09/2011, 22h28

ok merci bonne soirée ... enfin nuit.

asus02 · 25/09/2011, 14h23

bonjour, j'ai bien est bien regardé le sujet mais je n'arrive toujours pas a conserver ce div ouvert.

je bloque car en fait le bouton fait partie du div donc sur le bouton je rets bien actif quand je suis dessus mais sur le div non... merci

NoSmoking · 25/09/2011, 22h13

- Il faut que les DIV soit en display:none au départ
- Il ne faut pas mettre d'action sur le onmouseout.

24/09/2011, 17h40	#4
NoSmoking Modérateur Inscription : janvier 2011 Messages : 2 944 Détails du profil Informations personnelles : Sexe : Localisation : France, Isère (Rhône Alpes) Informations forums : Inscription : janvier 2011 Messages : 2 944 Points : 4 779 Points : 4 779	pour commencer <style type="text/css"> et non <style type="css">. ensuite supprimes Code css : Sélectionner tout - Visualiser dans une fenêtre à part div {visibility:hidden;} qui masque le menu
	00

24/09/2011, 18h42	#5
asus02 Futur Membre du Club olivier lebaron Webmaster Inscription : octobre 2007 Messages : 125 Détails du profil Informations personnelles : Nom : olivier lebaron Localisation : France, Drôme (Rhône Alpes) Informations professionnelles : Activité : Webmaster Informations forums : Inscription : octobre 2007 Messages : 125 Points : 18 Points : 18	impec, merci beaucoup, et pendant que je te tient vu que tu est modo tu pourra peut être me répondre. ----------- j'ai voulu mettre un avatar sur mon profil mais quand je vais dans modifier avatar la case est déjà cochée et je n'est pas le choix ou les bouton parcourir pour mettre un avatar, il y a t il un endroit a modifier avant ? merci {edit} comment faire pour que le div reste affiché quand je suis dessus car si je quitte le bouton il s'efface alors que je voudrais placer des liens dans les div donc il faudrais qu'il reste actif tant que je suis le div ouvert. merci
	00

24/09/2011, 22h28	#7
asus02 Futur Membre du Club olivier lebaron Webmaster Inscription : octobre 2007 Messages : 125 Détails du profil Informations personnelles : Nom : olivier lebaron Localisation : France, Drôme (Rhône Alpes) Informations professionnelles : Activité : Webmaster Informations forums : Inscription : octobre 2007 Messages : 125 Points : 18 Points : 18	ok merci bonne soirée ... enfin nuit.
	00

25/09/2011, 14h23	#8
asus02 Futur Membre du Club olivier lebaron Webmaster Inscription : octobre 2007 Messages : 125 Détails du profil Informations personnelles : Nom : olivier lebaron Localisation : France, Drôme (Rhône Alpes) Informations professionnelles : Activité : Webmaster Informations forums : Inscription : octobre 2007 Messages : 125 Points : 18 Points : 18	bonjour, j'ai bien est bien regardé le sujet mais je n'arrive toujours pas a conserver ce div ouvert. je bloque car en fait le bouton fait partie du div donc sur le bouton je rets bien actif quand je suis dessus mais sur le div non... merci
	00

25/09/2011, 22h13	#9
NoSmoking Modérateur Inscription : janvier 2011 Messages : 2 944 Détails du profil Informations personnelles : Sexe : Localisation : France, Isère (Rhône Alpes) Informations forums : Inscription : janvier 2011 Messages : 2 944 Points : 4 779 Points : 4 779	- Il faut que les DIV soit en display:none au départ - Il ne faut pas mettre d'action sur le onmouseout.
	00

Outils de la discussion
Afficher une version imprimable Envoyer un lien vers cette page par email