fonction document.getElementById

**nike547** · 19/01/2011, 00h28

Bonjour à tous, j'essaye actuellement de créer un slideshow (diaporama) automatique en javascript mais Safari me renvoit l'erreur "TypeError: Result of expression 'link' [null] is not an object". Pouvez-vous m'aidez. Veuillez m'excuser pour mon peu d'expérience dans ce langage.

Fichier html :

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
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
<!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" >
<link rel="stylesheet" media="screen" type="text/css" title="Exemple" href="design_NYS.css" />
   <head>
       <title>New York Shoes NYS Copyright 2011</title>
       <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
       <!--[if !IE]> <-->
		<style type="text/CSS">
		#menu li ul 
		{
 		position:absolute;
 		}
		</style>
		<!--><![endif]-->
 
		<!--[if IE 8]>
		<style type="text/CSS">
		#menu li ul 
		{
 		position:absolute;
 		}
		</style>
		<![endif]--> 
         <script type="text/javascript" src="script.js"></script>
 
   </head>
   <body>
 
   	<div id="en_tete">  	   	
	</div>
 
	<div id="menu">	 	
   		<ul>
   			<div class="element_menu1">
   				<li><a href="">Men</a>
   					<ul>
   						<li>New Products</li>
   						<li>Brands</li>
   						<li>Kind of shoes</li>   				
   					</ul>
   				</li>
   			</div>
 
   			<div class="element_menu2">   			 			 				      
	   		 	<li>Women
	   		 		<ul>
	   					<li>New Products</li>
	   					<li>Brands</li>
	   					<li>Kind of shoes</li>   				
	   				</ul>
	   			</li> 
   			</div>
 
   			<div class="element_menu3">   			 			 				      
	   		 	<li>Children
	   		 		<ul>
	   					<li>New Products</li>
	   					<li>Brands</li>
	   					<li>Kind of shoes</li>   				
	   				</ul>
	   			</li> 
   			</div>	
		</ul> 
        <p>
        	<img id="image" src="images/img1.jpg" alt="img1"/>
         </p>      	  		
   	</div>
 
	<div id="corps">	
		<div id="browsmosaic">
		<p class="firstline">
		<a href=""><img src="images/jordan1.jpg" alt="chaussures" class="f1"/></a>
		<a href=""><img src="images/jordan1.jpg" alt="chaussures" class="colums_needmargin"/></a>
		<a href=""><img src="images/jordan1.jpg" alt="chaussures" class="colums_needmargin" /></a>
		<a href=""><img src="images/jordan1.jpg" alt="chaussures" class="colums_needmargin"/></a>		
		</p>
 
		</div>  	
   	</div>
 
	<div id="pied_de_page">	
   		<p>Copyright "New York Shoes NYS", all rights reserved</p>
   		<p>by ANDRE Valentin</p>
   		<p class="dateC">2011</p>   		
	</div>
 
 
 
 
 
   </body>
</html>

Fichier javascript :

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
//Déclaration des variables
 
var nbimg=3,hauteur=480,largeur=640,timer,slideshow,i,Delay=3000,currentimg=0,link,source;
 
var tab=new Array('images/img1.jpg','images/img2.jpg','images/img3.jpg');
 
function chgimg()
{
	currentimg++;
 
	if(currentimg>nbimg)
	{
		currentimg=1;
	}
 
}
 
link=document.getElementById('image');
source=link.getAttribute('src');
link.setAttribute('source',tab[currentimg]);
 
 
 
setInterval("chgimg()",Delay);

Merci beaucoup

**nike547** · 19/01/2011, 20h04

Désolé du nombre des mes posts mais sayez je pense que mon diapo marche ou du moins en partie. J'ai juste appeler chgimg() au load du body. Mais il reste un probleme au bout d'un certain temps les images se mettent à défiler vite comme si cela bugger.

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
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
<!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" >
<link rel="stylesheet" media="screen" type="text/css" title="Exemple" href="design_NYS.css" />
   <head>
       <title>New York Shoes NYS Copyright 2011</title>
       <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
       <!--[if !IE]> <-->
		<style type="text/CSS">
		#menu li ul 
		{
 		position:absolute;
 		}
		</style>
		<!--><![endif]-->
 
		<!--[if IE 8]>
		<style type="text/CSS">
		#menu li ul 
		{
 		position:absolute;
 		}
		</style>
		<![endif]--> 
        <script type="text/javascript" src="script.js"></script>
 
 
   </head>
   <body onload="chgimg()">
 
   	<div id="en_tete">  	   	
	</div>
 
   <div id="menu">	 	
   		<ul>
   			<div class="element_menu1">
   				<li><a href="">Men</a>
   					<ul>
   						<li>New Products</li>
   						<li>Brands</li>
   						<li>Kind of shoes</li>   				
   					</ul>
   				</li>
   			</div>
 
   			<div class="element_menu2">   			 			 				      
	   		 	<li>Women
	   		 		<ul>
	   					<li>New Products</li>
	   					<li>Brands</li>
	   					<li>Kind of shoes</li>   				
	   				</ul>
	   			</li> 
   			</div>
 
   			<div class="element_menu3">   			 			 				      
	   		 	<li>Children
	   		 		<ul>
	   					<li>New Products</li>
	   					<li>Brands</li>
	   					<li>Kind of shoes</li>   				
	   				</ul>
	   			</li> 
   			</div>	
		</ul> 
        <p>
 
         </p>      	  		
   	</div>
 
	<div id="corps">	
    	<div id="slideshow">
        	<p>
        		<img id="preview" src="images/img1.jpg" alt="img1"/>
 
        	</p>
        </div>
 
 
		<div id="browsmosaic">
		<div class="firstline">
		<a href=""><img src="images/jordan1.jpg" alt="chaussures" class="f1"/></a>
 
		<a href=""><img src="images/jordan1.jpg" alt="chaussures" class="colums_needmargin"/></a>
		<a href=""><img src="images/jordan1.jpg" alt="chaussures" class="colums_needmargin" /></a>
		<a href=""><img src="images/jordan1.jpg" alt="chaussures" class="colums_needmargin"/></a>
 
		</div>
 
        <div class="secondline">
		<a href=""><img src="images/jordan1.jpg" alt="chaussures" class="f1"/></a>
 
		<a href=""><img src="images/jordan1.jpg" alt="chaussures" class="colums_needmargin"/></a>
		<a href=""><img src="images/jordan1.jpg" alt="chaussures" class="colums_needmargin" /></a>
		<a href=""><img src="images/jordan1.jpg" alt="chaussures" class="colums_needmargin"/></a>
 
		</div>
 
        <div class="thirdline">
		<a href=""><img src="images/jordan1.jpg" alt="chaussures" class="f1"/></a>
 
		<a href=""><img src="images/jordan1.jpg" alt="chaussures" class="colums_needmargin"/></a>
		<a href=""><img src="images/jordan1.jpg" alt="chaussures" class="colums_needmargin" /></a>
		<a href=""><img src="images/jordan1.jpg" alt="chaussures" class="colums_needmargin"/></a>
 
		</div>
 
        <div class="fourthline">
		<a href=""><img src="images/jordan1.jpg" alt="chaussures" class="f1"/></a>
 
		<a href=""><img src="images/jordan1.jpg" alt="chaussures" class="colums_needmargin"/></a>
		<a href=""><img src="images/jordan1.jpg" alt="chaussures" class="colums_needmargin" /></a>
		<a href=""><img src="images/jordan1.jpg" alt="chaussures" class="colums_needmargin"/></a>
 
		</div>
 
 
 
 
      </div>  	
   	</div>
 
	<div id="pied_de_page">	
   		<p>Copyright "New York Shoes NYS", all rights reserved</p>
   		<p>by ANDRE Valentin</p>
   		<p class="dateC">2011</p>
        <p><a href="mailto:valentin.ece@gmail.com">Contact</a></p> 
        <p><img id="logo" src="images/logo.png" alt="logo"/></p>  		
	</div>
 
 
 
 
 
   </body>
 
 
</html>

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
//Déclaration des variables
 
var nbimg=3,hauteur=480,largeur=640,timer,slideshow,i,Delay=3000,currentimg=0,link,source;
 
var tab=new Array('images/img1.jpg','images/img2.jpg','images/img3.jpg');
 
 
 
 
 
 
 
function chgimg()
{
	currentimg++;
 
	if(currentimg>nbimg)
	{
		currentimg=1;
	}
	link=document.getElementById('preview');
	source=link.getAttribute('src');
	link.setAttribute('src',tab[currentimg]);
	setInterval("chgimg()",Delay);
 
}

**vermine** · 19/01/2011, 20h14

Oui parce que là vous relancez chaque fois un setInterval. Ce n'est pas la fonction chgimg() qui doit être appelée au onload mais bien la fonction demarrage(). Et ceci ne doit apparaitre que dans demarrage() :

Code :

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

setInterval("chgimg()",Delay);

fonction document.getElementById

JavaScript

Vue hybride

Discussions similaires

Partager

Partager