Discussion :

[Fleuretta]

Bonjour

Je veux mettre des images défilantes. J'ai essayé deux façons. La première est avec la balise marquee et la deuxième est avec un script pris sur le net (javascript) http://exemple-script.wifeo.com/images-defilantes.php

Mon problème est que rien n'apparait sur ma page.
http://www.chezfrances.com/annuaire/testmarquee.php

Ce que vous voyez défilez est le script avec le marquee. Celui avec le javascript devrait être en dessous mais on ne voit rien de rien et je ne sais pas pourquoi.

Si on regarde le code source on voit bien le script mais rien ne se voit.

Je ne connais rien en javascript donc je ne peux pas voir l'erreur.

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
 
 
<div style="margin-top: 300px;">
 
<!-- DEBUT DU SCRIPT CARROUSEL -->
<script type="text/javascript">
***********************************************
PARAMETRES DE REGLAGE
***********************************************/
// Spécifiez la largeur du diaporama (en pixel)
var sliderwidth="467px"
// Spécifiez la hauteur du diaporama (en pixel)
var sliderheight="70px"
// Spécifiez la vitesse de défilement (de 1 à 10)
var slidespeed=3
// Spécifiez la couleur du fond
slidebgcolor="#ceb696"
// SPECIFICATIONS DU CARROUSEL : chemin des images
// Vous pouvez rendre l'image cliquable
var leftrightslide=new Array()
var finalslide=''
leftrightslide[0]='<img src="image/banque/amuse-gueuleaujambon.jpg" width="93" height="70" border="0" alt="Amuse-gueule au jambon" >'
leftrightslide[1]='<a href="http://www.pashmina-le-site.com/recetteT.htm#q" title="Baoli Handi" target="_blank"><img src="image/banque/baolihandi.jpg" width="93" height="70" border="0" alt="Baoli Handi"></a>'
leftrightslide[2]='<a href="http://www.pashmina-le-site.com/recetteW.htm#e" title="Escalope du berger" target="_blank"><img src="image/banque/berger.jpg" width="93" height="70" border="0" alt="Escalope du berger"></a>'
leftrightslide[3]='<a href="http://www.pashmina-le-site.com/recetteT.htm#b" title="Bibinca" target="_blank"><img src="image/banque/bibinca.jpg" width="93" height="70" border="0" alt="Bibinca"></a>'
leftrightslide[4]='<img src="image/banque/boucheesauchevre.jpg" width="93" height="70" border="0" alt="Bouchées au chèvre" >'
leftrightslide[5]='<img src="image/banque/boucherscompotetomatesepicees.jpg" width="93" height="70" border="0" alt="Bouchées de compote aux tomates épicées" >'
leftrightslide[6]='<img src="image/banque/bruchettas.jpg" width="93" height="70" border="0" alt="Bruchettas">'
leftrightslide[7]='<img src="image/banque/cachettetiedeauxfraises.jpg" width="93" height="70" border="0" alt="Cachette tiède aux fraises" >'
leftrightslide[8]='<a href="http://lesgourmandisesdisa.blogspot.com/2006/04/cake-au-jambon-et-aux-olives-farcies.html" title="Cake au jambon et aux olives farcies" target="_blank"></a><img src="image/banque/cakeaujambonetauxolivesfarcies.jpg" width="93" height="70" border="0" alt="Cake au jambon et aux olives farcies" >'
leftrightslide[9]='<img src="image/banque/compotedetomatesauxepices.jpg" width="93" height="70" border="0" alt="Compote de tomates épicées">'
leftrightslide[10]='<img src="image/banque/coulant_au_chocolat.jpg" width="93" height="70" border="0" alt="Coulant au chocolat">'
leftrightslide[11]='<a href="http://www.pashmina-le-site.com/recetteW.htm#m" title="Le Fadione" target="_blank"><img src="image/banque/fiadone.jpg" width="93" height="70" border="0" alt="Le Fadione" ></a>'
leftrightslide[12]='<a href="http://www.pashmina-le-site.com/recetteW.htm#f" title="Gratin de courgettes" target="_blank"><img src="image/banque/gratin.jpg" width="93" height="70" border="0" alt="Gratin de courgettes"></a>'
leftrightslide[13]='<img src="image/banque/carrecitronnoixcoco.jpg" width="93" height="70" border="0" alt="Carré au citron et à la noix de coco" >'
leftrightslide[14]='<img src="image/banque/keurmoka.jpg" width="93" height="70" border="0" alt="Coeur au moka" >'
leftrightslide[15]='<a href="http://www.pashmina-le-site.com/recetteT.htm#m" title="Poulet Korma" target="_blank"><img src="image/banque/korma.jpg" width="93" height="70" border="0" alt="Poulet Korma"></a>'
leftrightslide[16]='<img src="image/banque/miniterrineausaumon.jpg" width="93" height="70" border="0" alt="Mini terrine au saumon">'
leftrightslide[17]='<img src="image/banque/napoleondescalopesdesaumon.jpg" width="93" height="70" border="0" alt="Napoléon de saumon">'
leftrightslide[18]='<img src="image/banque/papillotepouletmielsauge.jpg" width="93" height="70" border="0" alt="Papillote de poulet au miel et à la sauge">'
leftrightslide[19]='<img src="image/banque/papilottedindeetmozarella.jpg" width="93" height="70" border="0" alt="Papillote de dinde et mozarella">'
leftrightslide[20]='<img src="image/banque/pavesdemorueemulsiondhuiledolivesauxherbes.jpg" width="93" height="70" border="0" alt="Pavés de morue, émulsion d huile d olives aux herbes">'
leftrightslide[21]='<img src="image/banque/poudingaucitron.jpg" width="93" height="70" border="0" alt="Pouding au citron">'
leftrightslide[22]='<img src="image/banque/pouletcannettebiere.jpg" width="93" height="70" border="0" alt="Poulet cannette de bière">'
leftrightslide[23]='<img src="image/banque/pureemoutardeancienne.jpg" width="93" height="70" border="0" alt="Purée à la moutarde à l ancienne">'
leftrightslide[24]='<img src="image/banque/ramequinfondantchocolat.jpg" width="93" height="70" border="0" alt="Ramequin fondant au chocolat" >'
leftrightslide[25]='<img src="image/banque/saladepaysanne.jpg" width="93" height="70" border="0" alt="Salade paysanne" >'
leftrightslide[26]='<a href="http://www.pashmina-le-site.com/recetteT.htm#j" title="Samosa de légumes" target="_blank"><img src="image/banque/samosa.jpg" width="93" height="70" border"0" alt="Samosa de légumes"></a>'
leftrightslide[27]='<a href="http://www.pashmina-le-site.com/recetteW.htm#h" title="Sucré-salé" target="_blank"><img src="image/banque/sucresale.jpg" width="93" height="70" border="0" alt="Sucré-salé"></a>'
leftrightslide[28]='<a href="http://mitainecarlate.canalblog.com/archives/2006/02/24/index.html" title="Asperges et oranges grillées, croustilles de parmsan" target="_blank"><img src="image/banque/Asperge_orange.jpg" width="93" height="70" border="0" alt="Asperges et oranges grillées, croustille de parmesan"></a>'
leftrightslide[29]='<a href="http://mitainecarlate.canalblog.com/archives/2006/03/12/index.html" title="Baluchon de fruit de mer au curry et à la lime" target="_blank"><img src="image/banque/Baluchonfruitsdemer.jpg" width="93" height="70" border="0" alt="Baluchon de fruit de mer au curry et à la lime"></a>'
leftrightslide[30]='<a href="http://mitainecarlate.canalblog.com/archives/2006/04/17/index.html" title="Bombe glacée épicée au tourbillon de mangue" target="_blank"><img src="image/banque/bombeglacee.jpg" width="93" height="70" border="0" alt="Bombe glacée épicée au tourbillon de mangue"></a>'
leftrightslide[31]='<img src="image/banque/terrinedelegumes.jpg" width="93" height="70" border="0" alt="Terrine de légumes">'
 
// Spécifiez l'espace entre chaque image (se servir du HTML):
var imagegap="3"
// Spécifiez le nombre de pixels/espace entre chaque rotation du carrousel (nombre entier)
var slideshowgap=5
////NE RIEN EDITER A PARTIR D'ICI////////////
var copyspeed=slidespeed
leftrightslide='<nobr>'+leftrightslide.join(imagegap)+'</nobr>'
var iedom=document.all||document.getElementById
if (iedom)
document.write('<span id="temp" style="visibility:hidden;position:absolute;top:-100px;left:-9000px">'+leftrightslide+'</span>')
var actualwidth=''
var cross_slide, ns_slide
function fillup(){
if (iedom){
cross_slide=document.getElementById? document.getElementById("test2") : document.all.test2
cross_slide2=document.getElementById? document.getElementById("test3") : document.all.test3
cross_slide.innerHTML=cross_slide2.innerHTML=leftrightslide
actualwidth=document.all? cross_slide.offsetWidth : document.getElementById("temp").offsetWidth
cross_slide2.style.left=actualwidth+slideshowgap+"px"
}
else if (document.layers){
ns_slide=document.ns_slidemenu.document.ns_slidemenu2
ns_slide2=document.ns_slidemenu.document.ns_slidemenu3
ns_slide.document.write(leftrightslide)
ns_slide.document.close()
actualwidth=ns_slide.document.width
ns_slide2.left=actualwidth+slideshowgap
ns_slide2.document.write(leftrightslide)
ns_slide2.document.close()
}
lefttime=setInterval("slideleft()",30)
}
window.onload=fillup
function slideleft(){
if (iedom){
if (parseInt(cross_slide.style.left)>(actualwidth*(-1)+8))
cross_slide.style.left=parseInt(cross_slide.style.left)-copyspeed+"px"
else
cross_slide.style.left=parseInt(cross_slide2.style.left)+actualwidth+slideshowgap+"px"
if (parseInt(cross_slide2.style.left)>(actualwidth*(-1)+8))
cross_slide2.style.left=parseInt(cross_slide2.style.left)-copyspeed+"px"
else
cross_slide2.style.left=parseInt(cross_slide.style.left)+actualwidth+slideshowgap+"px"
}
else if (document.layers){
if (ns_slide.left>(actualwidth*(-1)+8))
ns_slide.left-=copyspeed
else
ns_slide.left=ns_slide2.left+actualwidth+slideshowgap
if (ns_slide2.left>(actualwidth*(-1)+8))
ns_slide2.left-=copyspeed
else
ns_slide2.left=ns_slide.left+actualwidth+slideshowgap
}
}
if (iedom||document.layers){
with (document){
document.write('<table border="0" cellspacing="0" cellpadding="0"><td>')
if (iedom){
write('<div style="position:relative;width:'+sliderwidth+';height:'+sliderheight+';overflow:hidden">')
write('<div style="position:absolute;width:'+sliderwidth+';height:'+sliderheight+';background-color:'+slidebgcolor+'" onMouseover="copyspeed=0" onMouseout="copyspeed=slidespeed">')
write('<div id="test2" style="position:absolute;left:0px;top:0px"></div>')
write('<div id="test3" style="position:absolute;left:-1000px;top:0px"></div>')
write('</div></div>')
}
else if (document.layers){
write('<ilayer width='+sliderwidth+' height='+sliderheight+' name="ns_slidemenu" bgColor='+slidebgcolor+'>')
write('<layer name="ns_slidemenu2" left=0 top=0 onMouseover="copyspeed=0" onMouseout="copyspeed=slidespeed"></layer>')
write('<layer name="ns_slidemenu3" left=0 top=0 onMouseover="copyspeed=0" onMouseout="copyspeed=slidespeed"></layer>')
write('</ilayer>')
}
document.write('</td></table>')
}
}
</script>
<!-- FIN DU SCRIPT CARROUSEL -->
<br><br><br>
</div>
</body>
</html>

Quelqu'un peut me dire pourquoi ça ne fonctionne pas?


Merci

[SpaceFrog]

1) mettre des images dasn un marquee quelle idée ...
2) créer des images avec document.write
utilise le DOM document.createElement('img')
3) il y a des scipts d'images défilantes dans les contributions ...

[Fleuretta]

Bonjour space frog

Je fais ce que je peux avec mes connaissances et avec ce qui ressort sur google lorsque je fais des recherches.

J'ai cherché ici (sur le forum) des scripts d'images défilantes et aucun script de ressort.

Tu dis qu'il y a des scripts dans les contributions. Les contributions de quel langage? DOM document.createElement('img') fait parti de quel langage?



Merci

[SpaceFrog]

par exemple:

http://www.developpez.net/forums/sho...ghlight=defile

colle les images dasn les divs ...

[Fleuretta]

Merci

Pourquoi lorsque je fais un copier coller du premier code du message 111 tout s'écrit en noir dans mon DW? La coloration syntaxique ne se fait pas du tout et tout le code s'enligne du 2 lignes. Le 2ième bout de code pour le défilement horizontal est correct lorsque je le colle (coloration syntaxique ).


Merci

[Fleuretta]

J'ai trouvé pourquoi.
Il fallait que j'écrive <script type="text/javascript">

Maintenant autre problème ... c'est ça

".$derniers."".$point." qui défile et non les images.

http://www.chezfrances.com/annuaire/testmarquee.php


Merci