Mauvais comportements de onMouseOut, onMouseOver

Version imprimable

Bonjour,
Je ne comprends pas les comportements de mes : onMouseOut, onMouseOver :(

Partie html(5):
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>index</title> <link rel="stylesheet" type="text/css" href="css/index.css"> <script type="text/javascript" src="javascript/javascript.js"></script> </head> <body> <div id="haut"><br><center><h1>TITRE</h1></center><br></div> <div id="gauche"><center><h1>GAUCHE</h1></center><div id="fond_gauche" onClick="changeType('type1'); afficheResultat('type1');" onMouseOver="survoleLogo('type1');" onMouseOut="survoleLogoOff('');"></div></div><div id="droite"><center><h1>DROITE</h1></center><div id="fond_droit" onClick="changeType('type2'); afficheResultat('type2');" onMouseOver="survoleLogo('type2');" onMouseOut="survoleLogoOff('');"></div></div> <div id="bas"><center><h1>RESULTAT</h1></center></div> </body> </html>
Partie javascript :
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 var typeChoisi = 'vide'; function survoleLogo(type) { if(type == 'type1') { document.getElementById('fond_gauche').innerHTML = '<img src="img/fonds/bleu.png" alt="Type">'; document.getElementById('fond_droit').innerHTML = ""; } else if (type == 'type2') { document.getElementById('fond_droit').innerHTML = '<img src="img/fonds/rouge.png" alt="Type">'; document.getElementById('fond_gauche').innerHTML = ""; } } function survoleLogoOff(type) { if(type == 'type1') { document.getElementById('fond_gauche').innerHTML = ""; } if (type == 'type2') { document.getElementById('fond_droit').innerHTML = ""; } }
En fait au survol du logo rouge ou bleu j'aimerais faire apparaitre le fond lui correspondant (rouge ou bleu).

Puis au click d'un logo, figer le fond sélectionné, occulter l'autre fond ET faire apparaître en bas (résultat) des images, ou tout autre objet (array, collection etc).

Seulement rien ne se comporte comme prévu et je dois cliquer plusieurs fois d'affilée pour afficher le "résultat" en bas.
Mes survols sont aussi très capricieux.

Mon gros soucis est que safari me pose des problèmes de compatibilité, il ne réagit pas, ou mal au onClick et n'affiche rien en "bas" dans résultat, et les onMouseOver "tremblent" et "saturent"
enfin, c'est horrible quoi... (et je ne parle pas de mes couleurs ;) )

Soyez indulgent je débute à peine.
merci à tous,

PS :
Pour une meilleure compréhension, mon projet en zip est disponible via MP

12/05/2014, 15h50
johnlobs

Bonjour,
La première chose est que ta page est mal organisée: les div prennent toute une ligne...tu devrait mieux organisé ton code.
concernant la fonction

Code:

onMouseOut="survoleLogoOff('');"

tu dois passer un argument a cette fonction pour qu'elle s’exécute correctement

Code:

onMouseOut="survoleLogoOff('type1');"//ou bien type 2 selon ton besoin

déjà à ce stade tu n aura plus de probleme avec onMouseOut et onMouseOver

si tu as d'autres problèmes après correction tu es le bienvenu

PS: -si tu ne donne pas tout ton script on ne pourra pas te dire grand chose par rapport à la fonction changeType...:(
- http://www.w3schools.com/tags/tag_center.asp

l'argument de ma fonction est un oubli de ma part désolé :)

Sinon, concernant les div c'est là toute la subtilité et je l'ai bien fait exprès,
dû au bug de css («white-space») , pour ne pas avoir de marge généré automatiquement, j'ai trouvé que cette bidouille pour réglé le soucis :(
je donnerais le script plus tard je n'ai l'ai pas sous le coude pour le moment

merci !

Voilà déjà mon html à jour ;) :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>index</title>
		<link rel="stylesheet" type="text/css" href="css/index.css">
		<script type="text/javascript" src="javascript/javascript.js"></script>
 
	</head>
	<body>
		<div id="haut"><br><center><h1>TITRE</h1></center><br></div>
 
				<div id="gauche"><h1>GAUCHE</h1><div id="fond_gauche" onClick="changeType('type1'); afficheResultat('type1');" onMouseOver="survoleLogo('type1');" onMouseOut="survoleLogoOff('type2');"></div></div><div id="droite"><h1>DROITE</h1><div id="fond_droit" onClick="changeType('type2'); afficheResultat('type2');" onMouseOver="survoleLogo('type2');" onMouseOut="survoleLogoOff('type1');"></div></div>
 
		<div id="bas"><h1>RESULTAT</h1></div>
 
	</body>
</html>

et ici tout mon javascript :

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
 
 
 
function survoleLogo(type)
{
  if(type == 'type1')
  {
    document.getElementById('fond_gauche').innerHTML = '<img src="img/fonds/bleu.png" alt="Type">';  
    document.getElementById('fond_droit').innerHTML = ""; 
  }
 
   else if (type == 'type2')
  {
    document.getElementById('fond_droit').innerHTML = '<img src="img/fonds/rouge.png" alt="Type">'; 
    document.getElementById('fond_gauche').innerHTML = ""; 
  }
}
 
function survoleLogoOff(type)
{
  if(type == 'type1')
  {
    document.getElementById('fond_gauche').innerHTML = "";
  }
 
    if (type == 'type2')
  {
 
    document.getElementById('fond_droit').innerHTML = "";
  }
}
 
 
function changeType(type)
{
 
  if(type == 'type1')
    {
    document.getElementById('fond_droit').innerHTML = '';
    document.getElementById('bas').innerHTML = '';
 
    typeChoisi = 'type1';
 
    document.getElementById('fond_gauche').innerHTML = '<img src="img/logos/logo_bleu.png" alt="Type">';
 
    document.getElementById('bas').innerHTML +='<img src="img/fonds/bleu.png" alt="1">';
    document.getElementById('bas').innerHTML +='<img src="img/fonds/bleu.png" alt="2">';
    document.getElementById('bas').innerHTML +='<img src="img/fonds/bleu.png" alt="3">';
    document.getElementById('bas').innerHTML +='<img src="img/fonds/bleu.png" alt="4">';
 
  }
 
   else if (type == 'type2')
  {
    document.getElementById('fond_gauche').innerHTML = '';
    document.getElementById('bas').innerHTML = '';
 
    document.getElementById('fond_droit').innerHTML = '<img src="img/logos/logo_rouge.png" alt="Type">';
 
    document.getElementById('bas').innerHTML += '<img src="img/fonds/rouge.png" alt="1">';
    document.getElementById('bas').innerHTML += '<img src="img/fonds/rouge.png" alt="2">';
    document.getElementById('bas').innerHTML += '<img src="img/fonds/rouge.png" alt="3">';
    document.getElementById('bas').innerHTML += '<img src="img/fonds/rouge.png" alt="4">';
  }
 
}
 
function afficheResultat(type)
{
    if(type == 'type1')
    {
      document.getElementById('fond_gauche').innerHTML = '<img src="img/fonds/bleu.png" alt="Type">';
    }
 
    else if (type == 'type2')
    {
      document.getElementById('fond_droit').innerHTML = '<img src="img/fonds/rouge.png" alt="Type >';
    }
 
    else
    {
 
      if (typeChoisi == 'type1')
      {
        changerType('type1');
      }
 
      else if (typeChoisi == 'type2')
      {
        changerType('type2');
      }
    }
 
}

12/05/2014, 19h40
Auteur
bonsoir,

Citation:

Envoyé par PROJECT-AURORA

Seulement rien ne se comporte comme prévu et je dois cliquer plusieurs fois d'affilée pour afficher le "résultat" en bas.
Mes survols sont aussi très capricieux.

ce n'est pas surprenant les <div> sur lesquels tu as placé tes événements sont vides !
Code:

1 2 <div id="fond_gauche" onClick="changeType('type1'); afficheResultat('type1');" onMouseOver="survoleLogo('type1');" onMouseOut="survoleLogoOff('type2');"> </div>

lu,

pourtant sous Fire Fox tout marche au poil :)

elles ne sont pas vide, le .css les remplis d'un background-image, et surtout mon fichier .js les utilise

donc, je ne comprends pas ta réponse ? désolé

je me sert des div comme d'un conteneur, que je modifie/rempli à ma guise. Une division quoi ;)

css :

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
html, body
{
	margin:0;
	padding:0;
	color: black;
	width: 100%;
	height: 100%;
}
 
h1
{
	color: black;
	text-align: center;
}
 
h2
{
	color: black;
	text-align: center;
}
 
#haut
{
	background-color:purple;
	height: 8%;
	width: 100%;
	padding-bottom: 2%;
}
 
#gauche
{
	height: 48%;
	width: 50%;
 
	background-color:green;
	display: inline-block;
	text-align: center;
 
}
 
#fond_gauche
{
	float: left;
	margin-left: 30%;
	text-align: center;
	height: 348px;
	width: 250px;
	background-image: url(../img/logos/logo_bleu.png);
}
 
#droite
{
	height: 48%;
	width: 50%;
 
	background-color:yellow;
	display: inline-block;
	text-align: center;
}
 
#fond_droit
{
	float: right;
	margin-right: 30%;
	text-align: center;
	height: 348px;
	width: 250px;
	background-image: url(../img/logos/logo_rouge.png);
}
 
 
#bas
{
	height: 52%;
	width:100%;
	padding-top:2%;
	background-color:orange;
	padding-left: 1%;
}

Je n'avais pas la feuille de style sous les yeux. Mais même si tes div ont un fond, elles sont vides (pas de texte).

Ensuite, plusieurs choses sont curieuses :
1-

Code:

document.getElementById('fond_gauche').innerHTML = '<img src="img/fonds/bleu.png" alt="Type">';

pourquoi recréer une balise img lorsque l'on survole le div ? Ce n'est pas plus simple de faire un style="visibility: hidden" ou style="visibility: visible" sur une balise img déjà présente dans le code HTML ?

2-
Code:

1 2 3 4 <div id="gauche"><center><h1>GAUCHE</h1></center> <div id="fond_gauche" onClick="changeType('type1'); afficheResultat('type1');" onMouseOver="survoleLogo('type1');" onMouseOut="survoleLogoOff('');"> </div> </div>
pourquoi 2 div imbriqués ? Un seul peut suffire contenant le titre et l'image, non ?

13/05/2014, 14h24
PROJECT-AURORA

lu,

merci pour ton intérêt :)

Tout simplement par ce que ces div n'affichent pas du tout la même chose ! De plus, j'ai trouvé cette solution pratique pour gérer le positionnement de son contenus.
L'une un fond et l'autre un logo sur ce fond.
Alors, à moins de n'avoir pas saisie ta réponse, je ne comprends pas pourquoi est ce "curieux" ?
Par ce que si je t'écoute et j'utilise effectivement les propriétés hidden et visible de style, mon fond sera cacher ainsi que mon logo...

Hors, comme écrit dans mon code, j'ai besoin de 2 div bien distinct, pour afficher l'une SUR l'autre (elles mêmes contenant un logo différent), sauf incompréhension de ma part.
26/05/2014, 18h31
johnlobs
Bonjour,
Pour commencer ,il ne faut jamais contredire quelque chose ou quelqu'un si tu n'es pas certain de ce que tu dis et surtout si tu prétends être débutant

Citation:

Soyez indulgent je débute à peine.
merci à tous

mais ce n'est qu'un detail!!!;)

pour en revenir au sujet, ton code est mal organisé et plus tard si tu bosses sur un projet tu auras peut être des contraintes imposées par le client comme le nombre de lignes ou bien le nombre de caractères d'une ligne.
Pour remédier par exemple à ce problème ,il suffit de ne pas mettre d'espace ENTRE TES BALISES!
http://css-tricks.com/fighting-the-s...lock-elements/
tu pourras par exemple choisir cette solution pour offrir un code plus agréable a lire pour toi et pour ceux qui seront la après toi peut être
Code:

1 2 3 4 5 6 7 <ul> <li> one</li><li> two</li><li> three</li> </ul>
D'autre part, tu peux faire ce que tu veux sans avoir deux div mais uniquement en jouant sur le css de tes deux éléments qui seront dans la même div et pourront être l'un sur l'autre mais il faut dire que deux div peuvent aussi être une bonne solution cette remarque sert juste à te montrer qu'il ne faut pas contester tout ce que les gens te proposent de manière formelle...

Bon courage et à bientôt si besoin d'aide...
:aie: