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

[Fleuretta]

Autre problème d'affichage...

Lorsqu'une image apparait elle ne sort pas de la droite réellement elle apparait et en plus il y a toujours un petit saut vers l'arrière.

J'ai mis les images entre ".$derniers."".$point." mais ce texte est quand même écrit et défile ...

Des solutions?


Merci

[SpaceFrog]

oui ...
désolé pas le temps de rentrer en détail dasn ces scripts..;
en voici un de note ami javatwister:
http://javatwist.imingo.net/defilim.php

[Fleuretta]

Merci

Je ne comprends pas comment insérer les images

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
 
 
<script type="text/javascript">
 
//||||||||||
//Variables|
//||||||||||
var timer,zero,w,lf,el;
var tab=new Array();
var pos=0;
var val=0;
var oui=true;
 
 
//||||||||||||||||||||||||
//Variables paramétrables|
//||||||||||||||||||||||||
var M=100;// marge de gauche de la boîte à images;
 
var W=300;// largeur de la boîte à images 
// (forcément supérieure à la somme des largeurs des images);
 
var H=70;// hauteur de la boîte à images;
 
var delai=Math.round(W/4);// le délai initial est d'un quart 
// de la largeur de la boîte;
 
 
//|||||||||||||||||||||
//Création de la boîte|
//|||||||||||||||||||||
var c=document.createElement('div');
c.id="c";
c.style.marginLeft=M+"px";
c.style.width=W+"px";
c.style.height=H+"px";
 
var dec=M+W/2;// position horizontale au centre de la boîte;
 
 
//||||||||||||||||||||
//Création des images|
//||||||||||||||||||||
for(i=0;i!=60;i++){
	zero= i<9 ? 0 : "";
	tab[i]=new Image();
	tab[i].src="http://javatwist.imingo.net/sm"+zero+(i+1)+".gif";
	c.appendChild(tab[i]);
}
document.body.replaceChild(c,document.getElementById('nul'));
 
 
//|||||||||||||||||||||||
//Déplacement des images|
//|||||||||||||||||||||||
function go(){
for(i in tab){
	lf=parseInt(tab[i].style.left);
	w=tab[i].width;
	tab[i].style.left=lf+val+"px";
	if(lf>pos-w){
		tab[i].style.left=lf-pos+"px"};
	if(lf<W-pos){
		tab[i].style.left=lf+pos+"px"};
}
timer=setTimeout("go()",delai)
}
 
 
//||||||||||||||||
//Vitesse et sens|
//||||||||||||||||
function speed(e){
el= (!e) ? event.clientX : e.pageX;
 
if(el>=dec){
	delai=W/2+2-(el-dec);val=2}// val=déplacement
else{
	delai=W/2-1-(dec-el);val=-2};// val=déplacement
}
 
 
//||||||||||||||||||||||||
//Gestionnaire de "speed"|
//||||||||||||||||||||||||
c.onmousemove=speed;
 
 
//|||||||||||||||||||||||||||||||||||||||||||||||||
//Pause / relance du script / activation des liens|
//|||||||||||||||||||||||||||||||||||||||||||||||||
c.onclick=function(){
	if(oui){clearTimeout(timer);oui=false;
		for(i in tab){
			tab[i].style.cursor="pointer"};
	}
	else{go();oui=true;
		for(i in tab){
			tab[i].style.cursor="default"};
	};
}
 
 
//||||||||||||||||||||
//Lancement des liens|
//||||||||||||||||||||
for(i in tab){
	tab[i].onclick=function(){
		if(this.style.cursor=="pointer"){
			window.open(this.src)}
		};
}
 
//|||||||||||||||||||||||||||||||||||||||||||||||||
//Positionnement des images et lancement du script|
//|||||||||||||||||||||||||||||||||||||||||||||||||
onload=function(){
document.body.removeChild(document.getElementById("mess"));
c.style.display="block";
for(i in tab){
tab[i].style.left=pos+"px";
tab[i].style.top=(H-tab[i].height)/2+"px";
tab[i].style.display="inline";
pos+=tab[i].width;
};
go();
}
 
</script>

C'est le bout de code pour insérer les images. Comment on fait?

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
 
 
 
 
//||||||||||||||||||||
//Création des images|
//||||||||||||||||||||
for(i=0;i!=60;i++){
	zero= i<9 ? 0 : "";
	tab[i]=new Image();
	tab[i].src="http://javatwist.imingo.net/sm"+zero+(i+1)+".gif";
	c.appendChild(tab[i]);
}
document.body.replaceChild(c,document.getElementById('nul'));

Merci

[SpaceFrog]

Code :

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

tab[i].src="http://javatwist.imingo.net/sm"+zero+(i+1)+".gif";

les path des images sont insérées dasn un tableau (Array)

[Fleuretta]

Merci mais ta réponse ne m'aide pas.

J'ai réussi à faire afficher les images de l'autre script que tu trouves . À part le code qui semble différent, le résultat est le même. Dans les deux cas c'est un peu saccadé.

Comme j'ai l'impression d'être un boulet je vais prendre l'autre script et ne plus vous déranger.


Merci

[SpaceFrog]

Personne n'a dit que tu étais un boulet ...
Je n'ai juste pas le temps de rentrer dans le détail

Je te conseille d'étudier le script de Javatwister...

il créé un tableau d'image

dans cette boucle

Code :

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

1
2
3
4
5
6
7
8
9
//||||||||||||||||||||
//Création des images|
//||||||||||||||||||||
for(i=0;i!=60;i++){
	zero= i<9 ? 0 : "";
	tab[i]=new Image();
	tab[i].src="http://javatwist.imingo.net/sm"+zero+(i+1)+".gif";
	c.appendChild(tab[i]);
}

Il a fait une bidouille pour le nommage de ses images, mais en simplifié si tu avais 10 images nommées

image0.gif à image9.gif tu pourrais modifier la boucle comme suit:

Code :

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

1
2
3
4
5
6
7
8
//||||||||||||||||||||
//Création des images|
//||||||||||||||||||||
for(i=0;i<10;i++){
	tab[i]=new Image();
	tab[i].src="image"+i+".gif";
	c.appendChild(tab[i]);
}

[Fleuretta]

Bonjour

Chaque image a un nom bien spécifique (le nom de chaque image correspond à ce que l'on voit sur l'image) de plus je veux mettre un alt sur chacune des images.

Je n'ai pas les connaissances suffisantes pour faire un bidouillage dans ce script dont je vais prendre celui que tu n'aimes pas.


Merci

[SpaceFrog]

suffit de faire un tableau d'images ...

Code :

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

1
2
3
4
5
6
7
var TabPics= new Array()
TabPics[0]=new Image();
TabPics[0].src="monimage1.jpg";
TabPics[1]=new Image();
TabPics[1].src="unautrenom.gif";
TabPics[2]=new Image();
TabPics[2].src="averycomplicatednameforsucasmallpicture.png";

[Fleuretta]

Et on fait quoi avec ce bout de code?

Code :

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

1
2
3
4
5
6
7
8
9
 
 
for(i=0;i!=60;i++){
	zero= i<9 ? 0 : "";
	tab[i]=new Image();
	tab[i].src="http://javatwist.imingo.net/sm"+zero+(i+1)+".gif";
	c.appendChild(tab[i]);
}
document.body.replaceChild(c,document.getElementById('nul'));

Je n'y connais rien de rien dans tout ce genre de code.



Merci

[SpaceFrog]

ben tu boucles sur le tableau d'images ...

Code :

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

1
2
3
4
 
for(i=0;i<TabPics.length;i++){
	c.appendChild(tab[i]);
}

[Fleuretta]

C'est surement tout évident pour toi mais pas pour moi.

Comme je l'ai dit dans un message précédent je vais prendre l'autre script car même si tu me donnes des informations sur le script de ton ami y'a toujours des affaires qui ne se sont pas évidente pour moi et toujours des questions.

Je sens toujours que je dérange et que je devrais connaitre les réponses.
Si je connaissais les réponses je ne poserais pas de questions.

Ne travaille plus sur ce sujet.


Merci

[Fleuretta]

Bonjour

Je voulais juste vous montrer le résultat final pour des images défilantes. J'ai utilisé un tout autre script qui fait appel à la css et naturellement au javascript. J'ai modifié à peine le script d'origine pour arriver à mes fins.

Vous pourrez voir le code dans la source de la page.

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



Bonne journée