Javascript, wat doe ik fout?

Overzicht Reageren

Sponsored by: Vacatures door Monsterboard

Ventilatiesysteem Productontwikkelaar HBO WO Verwa

Samengevat: Zij bieden flexibele ventilatiematerialen, geluidsdempers, rookgasafvoer producten en industrieslangen. Ben jij een technisch productontwikkelaar? Heb jij ervaring met het ontwikkelen van nieuwe producten? Vaste baan: Technisch Productontwikkelaar HBO WO €3.000 - €4.000 Zij bieden een variëteit aan flexibele ventilatiematerialen, geluiddempers, rookgasafvoer producten, industrieslangen en ventilatieslangen voor de scheepsbouw. Met slimme en innovatieve materialen zorgen wij voor een gezonde en frisse leefomgeving. Deze werkgever is een organisatie die volop in ontwikkeling is met hardwerkende collega's. Dit geeft goede ontwikkelingsmogelijkheden. De branche van dit bedrijf is Techniek en Engineering. Functie: Voor de vacature als Technisch Productontwikkelaar Ede Gld HBO WO ga

Bekijk vacature »

Hmck9ni

Hmck9ni

15/03/2008 19:29:00
Quote Anchor link
Deze informatie krijg ik hoe het moet.

http://www.plaatjesmakerij.nl/fade-javascript/javascript_slideshow.html

stap1.
Code (php)
PHP script in nieuw venster Selecteer het PHP script
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
<?php
<script>
// (C) 2000 www.CodeLifter.com
// http://www.codelifter.com
// Free for all users, but leave in this  header
// NS4-6,IE4-6
// Fade effect only in IE; degrades gracefully

// =======================================
// set the following variables
// =======================================

// Set slideShowSpeed (milliseconds)
var slideShowSpeed = 5000

// Duration of crossfade (seconds)
var crossFadeDuration = 3

// Specify the image files
var Pic = new Array() // don't touch this
// to add more images, just continue
// the pattern, adding to the array below

Pic[0] = 'images/foto 013.jpg'
Pic[1] = 'images/foto 014.jpg'
Pic[2] = 'images/foto 015.jpg'
Pic[3] = 'images/foto 016.jpg'


// ============================================
// do not edit anything below this line
// ============================================

var t
var j = 0
var p = Pic.length

var preLoad = new Array()
for (i = 0; i < p; i++){
   preLoad[i] = new Image()
   preLoad[i].src = Pic[i]
}

function runSlideShow(){
   if (document.all){
      document.images.SlideShow.style.filter="blendTrans(duration=2)"
      document.images.SlideShow.style.filter="blendTrans(duration=crossFadeDuration)"
      document.images.SlideShow.filters.blendTrans.Apply()      
   }
   document.images.SlideShow.src = preLoad[j].src
   if (document.all){
      document.images.SlideShow.filters.blendTrans.Play()
   }
   j = j + 1
   if (j > (p-1)) j=0
   t = setTimeout('runSlideShow()', slideShowSpeed)
}
</script>
?>


Stap2
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
<?php
<body onload="runSlideShow()">  
?>


Stap 3
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
<?php
<tr>
<td id="VU" height=515 width=165>
<img src="images/foto 013.jpg" name='SlideShow' width=167 height=515></td>
</tr>
</table>
?>



Iemand die het weet>>
Gewijzigd op 01/01/1970 01:00:00 door Hmck9ni
 
PHP hulp

PHP hulp

22/12/2024 09:35:34
 
Niek Weevers

Niek Weevers

15/03/2008 19:55:00
Quote Anchor link
Wat bedoel je? Je legt niet echt duidelijk uit wat er fout gaat
 
Martijn B

Martijn B

15/03/2008 20:02:00
Quote Anchor link
Krijg je een js error?

Haal die spatie eens uit de naam van de plaatjes.
 
Hmck9ni

Hmck9ni

15/03/2008 23:33:00
Quote Anchor link
@Martijn!

Spaties even weg gehaald maar werkt ook niet :s

Hier maar even heel me bestand,

Hier word uitgelegd hoe ik het moest doen..
Maar hij werkt niet en heb geen flauw idee waarom...

http://www.plaatjesmakerij.nl/fade-javascript/javascript_slideshow.html

Iemand die me aub kan helpe ..


Code (php)
PHP script in nieuw venster Selecteer het PHP script
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
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
<?php
<!doctype html public '-//w3c//dtd html 4.01 transitional//en'>
<HTML>
<HEAD>
<TITLE>javascript_slideshow</TITLE>

<META NAME="Title" CONTENT="Plaatjesmakerij">
<META NAME="Author" CONTENT="Marianne van der Klugt">
<META NAME="Subject" CONTENT="Paint Shop Pro tutorials">
<META NAME="Description" CONTENT="PSP tutorials, java applet, fade applet">
<meta http-equiv="imagetoolbar" content="no">
<META NAME="Keywords" CONTENT="Paint Shop Pro, tutorials, fade javascript, javascript slideshow, lessen">
<META NAME="Language" CONTENT="NL">
<META NAME="Robots" CONTENT="All">

<!-- ***
    
     *Copyright 2004-2008 Plaatjesmakerij (Marianne van der Klugt)

     *Gehele of gedeeltelijke overname, plaatsing op andere sites, verveelvoudiging op welke
     *andere wijze ook en/of commercieel gebruik van deze tutorial alleen na toestemming van
     *de auteur. -->


<style>
<!--
body {background-image: url(achtergrond3.gif); background-repeat: repeat;}
p {font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 10pt;}
  
a:hover {color: #eec00b; text-decoration:none;}
ul {list-style-type: circle; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 10pt}
-->
</style>

<script>
// (C) 2000 www.CodeLifter.com
// http://www.codelifter.com
// Free for all users, but leave in this  header
// NS4-6,IE4-6
// Fade effect only in IE; degrades gracefully

// =======================================
// set the following variables
// =======================================

// Set slideShowSpeed (milliseconds)
var slideShowSpeed = 2000

// Duration of crossfade (seconds)
var crossFadeDuration = 3

// Specify the image files
var Pic = new Array() // don't touch this
// to add more images, just continue
// the pattern, adding to the array below

Pic[0] = 'bowrose1.jpg'
Pic[1] = 'bowgroen1.jpg'
Pic[2] = 'bowblue1.jpg'


// =======================================
// do not edit anything below this line
// =======================================

var t
var j = 0
var p = Pic.length

var preLoad = new Array()
for (i = 0; i < p; i++){
   preLoad[i] = new Image()
   preLoad[i].src = Pic[i]
}

function runSlideShow(){
   if (document.all){
      document.images.SlideShow.style.filter="blendTrans(duration=2)"
      document.images.SlideShow.style.filter="blendTrans(duration=crossFadeDuration)"
      document.images.SlideShow.filters.blendTrans.Apply()      
   }
   document.images.SlideShow.src = preLoad[j].src
   if (document.all){
      document.images.SlideShow.filters.blendTrans.Play()
   }
   j = j + 1
   if (j > (p-1)) j=0
   t = setTimeout('runSlideShow()', slideShowSpeed)
}
</script>



</HEAD>

<body onload="runSlideShow()">


<div align="center">

<Table bgcolor="#bbbbbb" width="700" height="12" border=0>

<TR>
<TD width=100%>
</TR>
</TD>
</table>


<div align="center">

<Table bgcolor="#dad8d8" width="700" height="12" border=0>

<TR>
<TD width=100%>
</TR>
</TD>
</table>

</div>

<P>

<Div align=center>
<table  bgcolor="#eeeeee" width="700" border=0 cellPadding=0 cellSpacing=0>
<TBody>
<TR>
<TD bgcolor="#eeeeee">



<BLOCKQUOTE>

<p><center><img src="kop2.jpg" width="392"  height="120" alt="logo"></center></P>


<P>&nbsp;</p>

<P><strong>Slideshow met fade effect</strong>


<P>

Deze slideshow komt goed over in verschillende typen browser. Maar hou er rekening mee dat het fade-effect alleen maar te zien is in de Internet Explorer (vanaf 5.5).
<P>
Verder kun je net zoveel afbeeldingen gebruiken als je wilt. De snelheid van de slideshow kun je ook aanpassen.  

<P>

<div align=center><table border="0" cellpadding="0" cellspacing="0">
<tr>
<td id="VU" height=322 width=242>
<img src="bowrose1.jpg" name='SlideShow' width=322 height=242></td>

</tr>
</table></div>



<P>

Dit is de code voor de javascript slideshow.<BR>

<P>


<center><FORM>
<TEXTAREA  rows="20" cols="60">

======================================================
Script:   JavaScript Cross-Browser SlideShow Script
          With Cross-Fade Effect between Images
          Adjustable Timing and Unlimited Images
Function: Displays images continuously in a slideshow
          presentation format, with a fade effect on
          image transitions.
Browsers: All common browsers: NS3-6, IE 4-6
          Fade effect only in IE; others degrade gracefully
Author:   etLux
======================================================

Step 1.
Put the following script in the head of your page:

<script>
// (C) 2000 www.CodeLifter.com
// http://www.codelifter.com
// Free for all users, but leave in this  header
// NS4-6,IE4-6
// Fade effect only in IE; degrades gracefully

// =======================================
// set the following variables
// =======================================

// Set slideShowSpeed (milliseconds)
var slideShowSpeed = 5000

// Duration of crossfade (seconds)
var crossFadeDuration = 3

// Specify the image files
var Pic = new Array() // don't touch this
// to add more images, just continue
// the pattern, adding to the array below

Pic[0] = 'bowrose1.jpg'
Pic[1] = 'bowgroen1.jpg'
Pic[2] = 'bowblue1.jpg'
Pic[3] = '4.jpg'
Pic[4] = '5.jpg'

// ============================================
// do not edit anything below this line
// ============================================

var t
var j = 0
var p = Pic.length

var preLoad = new Array()
for (i = 0; i < p; i++){
   preLoad[i] = new Image()
   preLoad[i].src = Pic[i]
}

function runSlideShow(){
   if (document.all){
      document.images.SlideShow.style.filter="blendTrans(duration=2)"
      document.images.SlideShow.style.filter="blendTrans(duration=crossFadeDuration)"
      document.images.SlideShow.filters.blendTrans.Apply()      
   }
   document.images.SlideShow.src = preLoad[j].src
   if (document.all){
      document.images.SlideShow.filters.blendTrans.Play()
   }
   j = j + 1
   if (j > (p-1)) j=0
   t = setTimeout('runSlideShow()', slideShowSpeed)
}
</script>

===========================================================

Step 2.
Put this onload event call in your body tag:
  
<body onload="runSlideShow()">  

===========================================================

Step 3.
Put this in the body of your page where you want the
slide show to appear.  

Set widths and heights same as images
Set image file same as first image in array Pic[] (above)

<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td id="VU" height=150 width=150>
<img src="1.jpg" name='SlideShow' width=150 height=150></td>
</tr>
</table>

===========================================================


</TEXTAREA>
</FORM></center>
<P>

<div align=center> <font color=#800080>* * *</font></div>

<P>  

Voor de slideshow hierboven heb ik 3 foto's gebruikt. Alle drie hebben ze dezelfde afmetingen:<P>



<IMG SRC="bowrose1.jpg" WIDTH="322" HEIGHT="242" ALIGN="BOTTOM">
<IMG SRC="bowgroen1.jpg" WIDTH="322" HEIGHT="242" ALIGN="BOTTOM">
<IMG SRC="bowblue1.jpg" WIDTH="322" HEIGHT="242" ALIGN="BOTTOM">
</p>

  
<div style="margin-top:3px; "><FONT SIZE="1" COLOR="#000000" FACE="Arial,Helvetica,sans-serif"><I>Foto's van morgueFile.com</I></FONT></div>
<P>



<HR>
<P>
Een slideshow met hetzelfde effect kun je cre&euml;ren met een java applet. Zie mijn andere <A href="../fade-applet/fade_applet.html">tutorial</A> hierover. Vergelijk ze en kijk maar welke je het handigst vindt.

 <P>&nbsp;</P>



<P align=center><font size=1>

<A HREF="../index.html" target="_blank">Start</A> |
<A HREF="../tutorials/tutorials.html" target="_blank">Tutorials</A> |
<A HREF="../lesjes/korte_lesjes.html" target="_blank">Korte Lesjes</A> |
<A HREF="../tutorials/tutorials.html" target="_blank">CSS</A> |
<A HREF="http://www.vanderklugt.speedxs.nl/fonts/fonts.html" target="_blank">Fonts</A> |
<A HREF="../filters/filters.html" target="_blank">Filters</A> |
<A HREF="../links/links.html" target="_blank">Links</A> |
<A href="../allerlei/allerlei.html" target="_blank">Allerlei</A> |  
<A href="../sitemap/sitemap.html" target="_blank">Zoeken</A> |
<A href="http://www.freewebs.com/psp-varia" target="_blank">PSP-varia</A> |
<A href="http://www.vanderklugt.speedxs.nl/p-filiaal/etech-samba-index/index2.html" target="_blank">P-Filiaal</A></font>



<P>

</BLOCKQUOTE>
</table>

</div>
<P>

<div align="center">


<Table bgcolor="#bbbbbb" width=700 border=0>

<TR>

<TD  width=100% align=center><font face=verdana  size=1 color=#404040>Copyright  2004-2008 <script language='javascript'>eval(unescape('%64%6F%63%75%6D%65%6E%74%2E%77%72%69%74%65%28%22%3C%61%20%68%72%65%66%3D%27%6D%61%69%6C%74%6F%3A%6D%61%72%69%61%6E%6E%65%40%76%61%6E%64%65%72%6B%6C%75%67%74%2E%74%6B%3F%73%75%62%6A%65%63%74%3D%72%65%61%63%74%69%65%20%50%6C%61%61%74%6A%65%73%6D%61%6B%65%72%69%6A%27%3E")'))</script><font face='verdana' size='1'>Plaatjesmakerij</font></a> All rights reserved

</TD>
</TR>
</table>
</DIV>
</BODY>
</HTML>

?>
 
Jesper dd

jesper dd

16/03/2008 14:34:00
Quote Anchor link
Hey
Misschien een hint om het met javascript te doen
dan ik het wat overzichtelijker
groet, jesper
 



Overzicht Reageren

 
 

Om de gebruiksvriendelijkheid van onze website en diensten te optimaliseren maken wij gebruik van cookies. Deze cookies gebruiken wij voor functionaliteiten, analytische gegevens en marketing doeleinden. U vindt meer informatie in onze privacy statement.