<body> ne fonctionne pas avec deux codes JavaScript

**andrebernard** · 20/04/2012, 18h14

Bonjour à tous

Je suis débutant, et cela fait une journée que j'essaie de faire marcher sans succés un code qui réuni deux effets en JavaScript

Le premier effet change le fond automatiquement
Le second fait tourner deux images toutes seules

A force de chercher j'ai découvert que mon probleme venait que dans la balise <body> je ne pouvais pas mettre la fonction onload="menu(2);" car cela arretait le changement de fonds

Et inversement si je met le changement de fonds seul evidement les deux images ne tournent plus puisque je n'appelle plus onload="menu(2);

Dans le code, j'ai commenté les trois possibilités pour facilité la compréhension de mon probleme

Code :

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

1
2
3
4
5
6
7
8
<!-- MARCHE PAS ENTIEREMENT (SEULEMENT LA VALSE DES RHINOCEROS MARCHE) --> 
<body background="JavaScript.jpg" onload="menu(2);"> --> 
 
<!-- SEULEMENT LA VALSE DES RHINOCEROS MARCHE --> 
<!-- <body onload="menu(2);"> --> 
 
<!-- SEULEMENT LE CHANGEMENT FOND MARCHE --> 
<!--  <body background="JavaScript.jpg" > -->

Je joins le code et les images

Merci de votre aide
Bonne journée

**SpaceFrog** · 21/04/2012, 09h18

Code :

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

1
2
3
4
5
6
<style type="text/css">
body {
     background-image=url("JavaScript.jpg");
}
</style>
<body  onload="menu(2);">

Peux tu nous montrer la fonction menu(2) js ici ?
(tout le monde n'as pas envie de downloader et décompresser ...)

**andrebernard** · 21/04/2012, 17h41

Bonjour SpaceFrog et merci de ta réponse

J'avais aussi essayé la solution que tu m'as donnée, mais cela ne marche pas non plus

L'image de fond n'apparait pas, et ne clignote pas

Pour qu'elle apparaisse, il faut que je retire le onload="menu(2);" en écrivant <body>

C'est dingue je n'arrive pas a comprendre pourquoi un code empêche l'autre de tourner.
J'ai pensé aussi aux variables qui peuvent être du même nom, je les avais changé, sans résultat
Peut être en avais je oublié ?

Alors du coups j'ai tout remis d'origine, car a force de triturer ces deux codes qui ne sont pas de moi, j'ai peur de les "esquinter" a jamais

Peux tu nous montrer la fonction menu(2) js ici ?
(tout le monde n'as pas envie de downloader et décompresser ...)

Pas de problème, je pensais que ce serais plus simple avec un ZIP

Voici les codes décompressés:
index.php

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
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Essai</title>
 
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
 
<script type="text/javascript" src="menu.js"></script>
<link rel="stylesheet" media="screen" type="text/css" href="menu.css"/>
 
<script type="text/javascript" language="JavaScript1.2">
 
 var bgslides=new Array()
 
	bgslides[0]="JavaScript.jpg"
	bgslides[1]="JavaScript2.jpg"
 
	var speed=200
 
	var processed=new Array()
 
	for (i=0;i<1000;i++){
		processed[i]=new Image()
		processed[i].src=bgslides[i]
	}
 
	var inc=-1
 
	function slideback(){
 
	if (inc<bgslides.length-1)
		inc++
	else
		inc=0
		document.body.background=processed[inc].src
	}
 
	if (document.all||document.getElementById)
	window.onload=new Function('setInterval("slideback()",speed)')
 
</script>
 
</head>
 
<!-- MARCHE PAS ENTIEREMENT (SEULEMENT LA VALSE DES RHINOCEROS MARCHE) --> 
<body background="JavaScript.jpg" onload="menu(2);"> --> 
 
<!-- SEULEMENT LA VALSE DES RHINOCEROS MARCHE --> 
<!-- <body onload="menu(2);"> --> 
 
<!-- SEULEMENT LE CHANGEMENT FOND MARCHE --> 
<!--  <body background="JavaScript.jpg" > --> 
 
<div id="menu" onMouseOver="stopanim();" onMouseOut="replayanim();" style="position:absolute; left:493px; top:179px; width:101px; height:222px; z-index:5">
 <div id="centre">
 <ul>
   <li id="item1"><a href="pages/modesoperatoirescpc/index.php"><img src="images.jpg" width="100px" height="100px" border="0"/></a></li>
   <li id="item2"><img src="images.jpg" width="100px" height="100px"/></li>
 </ul>
</div>
</div>
</body>
 
</html>

menu.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
body{
 background-repeat: no-repeat;
 background-position: 250 95;
 
}
 
#menu {
	width: 98px;
	height: 100px;
	position: relative;
	margin: 0px;
	padding: 0px;
	text-decoration: none;
	left: 0px;
	top: 0px;
}
 
#menu li	{	
	list-style-type: none;
	list-style-position: none;	
}
 
h2 {	
	text-align: center;
	position: absolute;
	margin: -100px;
	color: maroon;
	font-family: marker felt, arial, verdana, sans-serif;
}
 
h2 a	{
	text-decoration: none;
}
 
#menu li a	{	
	text-decoration: none;
}
 
#menu li a:hover	{
	cursor: pointer;
}
 
#centre	{
	height: 100px;
	width: 100px;
}
 
.item	{
	position: absolute;
}

menu.js

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
var decalage = 0;
var nbBout;	  
var timer;
 
function menu(nb)
{
 
 var angle = 360 / nb;		
 nbBout = nb;
 var posX;
 var posY;
 var rayon = 60;
 var centreX = document.getElementById("centre").offsetLeft;
 var centreY = document.getElementById("centre").offsetTop;
 var lItem = 200;
 var i = 1;
 var item;
 var b;
 
for(b = 0; b < 360; b += angle)
 {		  
  posX = centreX + 25 + rayon * Math.cos(b * Math.PI / 180);
  posY = centreY + 25 + rayon * Math.sin(b * Math.PI / 180); 
 
  item = document.getElementById("item" + i);
  item.className = "item";	
  item.style.top = (posY - lItem / 2) + "px"; 
  item.style.left = (posX - lItem / 2) + "px";
  i++;
 }
}
 
function anim()
{		  
 decalage++;
 var angle = 360 / nbBout;		
 var posX;
 var posY;
 var rayon = 120;
 var centreX = document.getElementById("centre").offsetLeft;
 var centreY = document.getElementById("centre").offsetTop;
 var lCentre = 50;
 var lItem = 20;
 var i = 1;
 var item
 var b;
 
 for(b = 0; b < 360; b = b + angle)
 {		  
  posX = centreX + 25 + rayon * Math.cos((b + decalage) * Math.PI / 180);
  posY = centreY + 25 + rayon * Math.sin((b + decalage) * Math.PI / 180); 
 
  item = document.getElementById("item" + i);
  item.style.top = (posY - lItem / 2) + "px"; 
  item.style.left = (posX - lItem / 2) + "px";
  i++;
 }	
}
 
timer = setInterval("anim()",50);
 
function stopanim()
{
 clearInterval(timer);		   
}
 
function replayanim()
{
 timer = setInterval("anim()",50);
}

**utopman** · 22/04/2012, 11h48

Salut et grand merci,

j'ai passé ma scolarité à ne pas savoir comment faire une rotation (la trigo m'a toujours fait peur), et tu m'as appris comment faire avec ton code

par contre je peux t'aider pour ton problème. En fait tu fais un body onload sur la balise body et tu fais aussi un windows.onload, ce sont les mêmes fonctions...
donc la seconde déclarée est celle qui s'exécute effectivement puisqu'elle replace l'autre.

c'est bien mieux de faire des appels au dom que d'écrire du code dans tes balises html. je te propose donc un

Code :

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

<body background="JavaScript.jpg"  >

ainsi qu'un

Code :

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

1
2
3
4
5
6
 
	window.onload= function()
	{
		setInterval("slideback()",speed);
		menu(2);
	}

et le tour est joué

**andrebernard** · 22/04/2012, 20h18

T'es fou, c'est toi qui me sauve la vie

Alors faut rendre à césar ce qui n'est pas a moi, les deux codes ne sont pas de moi, j'aurais bien aimé, malheureusement j'adore et je "gratouille" la programmation locale, mais le WEB c'est du chinois pour moi

Je sais pas comment vous faites et je vous admire, c'est tellement plus dur que la prog, enfin c'est ce que je pense.

Encore mille merci Eric de ta si précieuse aide, car jamais je n'aurais trouvé la solution tout seul.

Et merci aussi à SpaceFrog

Je vous souhaite une excellente soirée