<body> ne fonctionne pas avec deux codes JavaScript

Version imprimable

1 pièce(s) jointe(s)

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:

1 2 3 4 5 6 7 8  <body background="JavaScript.jpg" onload="menu(2);"> -->    
Je joins le code et les images

Merci de votre aide
Bonne journée

21/04/2012, 09h18
SpaceFrog
Code:

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 ...)

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é ? :roll:
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 :lol:

Citation:

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 :P

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

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
<!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:

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:

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);
}

22/04/2012, 11h48
utopman
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 :D

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:

<body background="JavaScript.jpg" >

ainsi qu'un
Code:

1 2 3 4 5 6 window.onload= function() { setInterval("slideback()",speed); menu(2); }
et le tour est joué :D
22/04/2012, 20h18
andrebernard

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

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 :cry:

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. :aie:

Encore mille merci Eric de ta si précieuse aide, car jamais je n'aurais trouvé la solution tout seul. :oops:
Et merci aussi à SpaceFrog ;)

Je vous souhaite une excellente soirée 8-)