défilement de texte

Version imprimable

Voir 40 message(s) de cette discussion en une page

défilement de texte

bonjours j'ai un petit problème depuis 2 jours que j'arrive pas a résoudre

et je comprend pas l'erreur car normalement sa devrai marchai donc comme vous pourrez le voir j'ai pas mal bidouillé mais c'est toujours pas sa
donc si quelqu'un(e) peu m'aider si possible en enlevent le bidouillage ce serait cool

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
 
 
                <STYLE TYPE="text/css">
.txt_defil {font-size:11px;
font-family:Verdana;
color:#000000;
text-decoration:none;
position:absolute;
width:200px;
	height:105px;
}
.txt_defil:link {font-size:11px;
font-family:Verdana;
color:#FFFFFF;
text-decoration:none;
position:absolute;
}
.txt_defil:visited {font-size:11px;
font-family:Verdana;
color:#FFFFFF;
position:absolute;
text-decoration:none
}
.txt_defil:hover {font-size:11px;
font-family:Verdana;
color:#FFCCFF;
position:absolute;
text-decoration:underline
}
</STYLE>
                <script language="JavaScript">  
<!--
 
var txt_defil_width  = 500; 		
var txt_defil_height = 10;			
var txt_defil_bgcolor = '#9966FF';	
var txt_defil_background = ""; 		
var txt_defil_pause = 5000;			
var txt_defil_info = new Array;
 
 
txt_defil_info[1]='<div align="left"><br></div>';
txt_defil_info[2]='<a href="memory.php" CLASS=txt_defil><div STYLE="color:#FFFF33;" align="center"><b>Le Jeu de Memory</b></div><br><div align="left"><table width="300" border="0" CLASS=txt_defil><tr><td><img src="img/ok.jpg" width="45" height="35" border="0" align="middle"></td><td>Un2</td></tr></table><br></div></a>';
txt_defil_info[3]='<div align="left"><br></div>';
txt_defil_info[4]='<div align="left"><a href="creatsite.php" CLASS=txt_defil><img src="img/ok.jpg" width="65" height="60" border="0" align="middle"><b>Vous creez votre site ?</b></a><br>Vous1.<br></div>';
txt_defil_info[5]='<div align="left"><br></div>';
txt_defil_info[6]='<div STYLE="color:#FFFF33;" align="center"><b>Quelques liens</b></div><br><div align="left"><br>'+
'<br><a href="http://www.monsite.net/cours_jjs/index.php" target="_blank" CLASS=txt_defil>Cours de JavaScript</a><br>'+
'<a href="http://www.i-services.net/?refid=8081" target="_blank" CLASS=txt_defil title="Avec I-Services">Services Webmasters</a> Avec I-Services<br>'+
'<a href="http://www.monsite.com/partenaires/concours.php?id=jejavascri&l=2" TARGET="_blank" ????b?CLASS=txt_defil title="MonSiteJavascript">Recherche  javascript</a> avec MonSite Javascript<br></div>';
txt_defil_info[0]='<div align="left"><a href="creatsite.php" CLASS=txt_defil><img src="image/Copieurscouleur.jpg" width="150" height="125" border="0" align="middle"><b>Vous4 ?</b></a><br>Vous <br></div>';
//-->
</script>
                <script language="JavaScript" src="java/textdefil2.js"></script>

enffete je vous ai même pas di le problème lol

mon problème c'est que quant sa s'affiche des images vont l'une sur l'autre de plus des fois elles viennent 2 fois de suite donc merci aux personne qui voudront bien regardé ça

02/04/2008, 10h43
le_chomeur

on veut bien t'aider ...
mais sans le script : textdefil2.js
ça risque d'être difficile :king:

excuse c'est juste

c'est que j'ai tellement confiance en mon textdefil2.js
que sa peu pas être sa lol

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
71
72
73
 
 
//PLF - http://www.jejavascript.net/
function writext(texdef)
	{
	document.write(texdef);
	}
 
writext('<DIV ID=txt_defil_relativ onMouseOver="txt_defil_stop()" onMouseOut="txt_defil_rstart()" STYLE="position:relative;width:'+txt_defil_width +';height:'+txt_defil_height+';background-color:'+txt_defil_bgcolor+';background-image:url('+txt_defil_background+')">');
writext('<DIV ID=txt_defil_cadre STYLE="position:absolute;width:'+(txt_defil_width -8)+';height:'+(txt_defil_height-8)+';top:4;left:4;clip:rect(0 '+(txt_defil_width -8)+' '+(txt_defil_height-8)+' 0)">');
writext('<div id=txt_defiler_1 style="position:absolute;width:'+(txt_defil_width -8)+';left:0;top:0;" CLASS=txt_defil >'+txt_defil_info[0]+'</DIV>');
writext('<div id=txt_defiler_2 style="position:absolute;width:'+(txt_defil_width -8)+';left:0;top:'+txt_defil_height+';" CLASS=txt_defil >'+txt_defil_info[1]+'</DIV>');
writext('</DIV></DIV>');
 
txt_defil_1 =1;
txt_defil_2 = 0;
stop_mouss=0;
 
function txt_defil_f1()
	{
	if(txt_defil_1 == 1)
		{
		txt_defiler_haut = "txt_defiler_1";
		txt_defiler_bas = "txt_defiler_2";
		txt_defil_1 = 0;
		}
	else
		{
		txt_defiler_bas = "txt_defiler_1";
		txt_defiler_haut = "txt_defiler_2";
		txt_defil_1 = 1;
		}
	txt_defil_nb_info = txt_defil_info.length-1;
	if(txt_defil_2 == txt_defil_nb_info)
		txt_defil_next = 0;
	else
		txt_defil_next = txt_defil_2+1;
	if(document.getElementById)
		document.getElementById(txt_defiler_bas).innerHTML = txt_defil_info[txt_defil_next];
	txt_defil_top = 0;
	if(document.getElementById)
	move1=setTimeout("txt_defil_f2 ()",txt_defil_pause)
	}
 
function txt_defil_f2 ()
	{
if (stop_mouss == 0)
{	
	txt_defil_top -= 1;
	document.getElementById(txt_defiler_haut).style.top = txt_defil_top;
	document.getElementById(txt_defiler_bas).style.top = txt_defil_top+txt_defil_height;
	if((txt_defil_top+txt_defil_height) > 0)
	move2=setTimeout("txt_defil_f2 ()",10)
	else
		txt_defil_f3()
}
else	move1=setTimeout("txt_defil_f2 ()",1000)	
	}
 
function txt_defil_f3()
	{
	txt_defil_2 = txt_defil_next;
	txt_defil_f1()
	}
function txt_defil_stop()
	{
	stop_mouss=1;
	}
function txt_defil_rstart()
	{
	stop_mouss=0;
	}	
window.onload = txt_defil_f1;

voila et merci

02/04/2008, 11h51
SpaceFrog

déja quand je vois un document.write je n'ai jamais confiance !!!
02/04/2008, 11h53
le_chomeur

lol spaffy , sois indulgent , on a tous commencé par du copier/coller ;)
02/04/2008, 13h20
le_chomeur

après avoir regardé et testé le script d'origine , je te conseillerais plutôt celui ci :
http://javascript.developpez.com/sou...ges#defilimage
02/04/2008, 18h09
Matthieu2000

Citation:

Envoyé par le_chomeur

lol spaffy , sois indulgent , on a tous commencé par du copier/coller ;)

sauf le premier

Code:

class='txt_defil'

ajoute des class à tes calques...

merci a tous ceu qui m'on aidé mais je crois que j'ai oublier de précisé que je suis débutant c'est pour sa que je fais pas mal de copier coller mais j'essail malgré tous de rajouté des chose qui sont a moi

et la reflexion de Matthieu2000 comme quoi le premier a avoir codé na pas copier coller ben franchement respect bon j'écrit pas pour raconté ma vie :lol:

voilà j'ai essaillé ce que vous m'avez dit Matthieu2000 franchement j'ai rien compris et pour le_chomeur c'est pas vraiment ce que je cherchais donc je me sui rabattu sur l'autre code que j'avais qui me semble un peu moin performant mais qui est quand même ce que je cherche
Code:

1 2 3 4 5 6 <marquee align="center" onmouseover="this.stop()" onmouseout="this.start()" scrollamount="3" scrolldelay="1" direction="up" height="250"> <p><a href="http://www.yahoo.fr" ><img src="img/ok.jpg" width="65" height="60" border="0" align="middle"><b>Vous creez votre site ?</b></a><br>Vous trouverez sur cette page quelques adresses utiles pour vous aider à construire votre site et à le rentabiliser.<br> <br><br><br> <img border="0" src="image\Fax\Fax.jpg" /></p></marquee>
j'aimerai bien avoir votre avis la dessus

de plus celui là est parfait mais il me manque quelques élément j'aimerai qu'une fois que la première image arrive elle fait une pause de 5 seconde j'ai cherché mais ne trouve pas cela est il possible??

je vous remerci encore pour vos réponse et futur réponse:king:

03/04/2008, 11h22
sinifer

Méaculpa je suis revenue au premier lol

par contre Matthieu2000 je comprend pas bien ce que tu ma dis
et je doit mettre ou ces class ???

je vais faire une recherche mais là je suis un peu paumé :(
03/04/2008, 19h01
Auteur

et la balise marquee ? Elle ferait très bien l'affaire ;)
03/04/2008, 19h19
sinifer

oui mai le problème c'est que je peu pas fair un arret sur image car mon but c'est que l'image défile une fois qu'elle est entière dans mon cadre elle s'arrete 5 seconde et repart pour fair venir une autre et avec la balise marquee il me semble que c'est impossible du moin j'ai cherché mais j'a pas trouvé donc si tu sai commen fair ta réponse est la bienvenue :)

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
 
<html>
<head>
<title></title>
	<script type="text/javascript">
        <!--
                function arret(obj)
                {
                        obj.stop();
                }
                function demarrer(obj)
                {
                        obj.start();
                }
        //-->
        </script>
</head>
<body>
 
	<marquee onmouseover="arret(this)" onmouseout="demarrer(this)" style="width:200px" direction="left" behavior="scroll" scrolldelay="10" scrollamount="2" >
	test
	</marquee>
 
</body>
</html>

Fonctionne sous FF et IE 7. A tester avec IE 6 ;)

04/04/2008, 08h44
sinifer

merci Auteur

mais je sai pas si j'ai mal recopier ou si je doi rajouté quelque chose
mais sa ne marche pas comme je veux le text défile mais il ne s'arrette pas.
j'ai recopier exactement ce que ta mis rien rajouté ai je eu tord??

comme c'est ma première fois que j'utlilise js je mitrise pas
04/04/2008, 10h36
Auteur

Citation:

Envoyé par sinifer

merci Auteur

mais je sai pas si j'ai mal recopier ou si je doi rajouté quelque chose
mais sa ne marche pas comme je veux le text défile mais il ne s'arrette pas.
j'ai recopier exactement ce que ta mis rien rajouté ai je eu tord??

comme c'est ma première fois que j'utlilise js je mitrise pas

Le code fonctionne tel quel... Maintenant je ne sais pas s'il fonctionne sur tous les navigateurs. Quel navigateur as-tu utilisé ? Et quelles sont les erreurs retournées (s'il y en a) ?

Je n'avais pas vu que tu avais déjà essayé la balise marquee :oops:

Si ça ne marche toujours pas, il faudra s'orienter vers un script plus élaboré (cf. le lien de le_chomeur)
04/04/2008, 10h56
sinifer

merci de tes réponse Auteur

j'utilise easy php mais tous marches sauf le fait que l'image ne s'arrete pas
et pour moi c'est sa le plus important

j'ai regardé le code que le_chomeur ma dit mais je comprend rien a ce code par contre j'avais mis un code au début qui devrai marché mai je comprend pas pourquoi il ne marche pas quan c'est moi qui le met??

bon voici un début :

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
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
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta http-equiv="Content-Language" content="fr" />
 
<style type="text/css">
<!--
.conteneur{
        border: 5px #AAAAAA ridge;
        background-color: #DDDDD;
        overflow: hidden;
        padding: 5px;
        height: 120px;
        width: 200px;
}
 
.image{
        height: 120px;
        width: 200px;
        margin-left: 5px;
        margin-right: 5px;
        margin-top: 0px;
        margin-bottom: 0px;
        cursor: pointer;
}
 
//-->
</style>
 
<script type="text/javascript">
<!--
var chemin = "images\\";
var tabImg = new Array("i1.gif","i2.gif","i3.gif","i4.gif","i5.gif");
 
var attente = "3000"; //délai d'affichage d'une image en ms
 
// Action à réaliser lors du clic sur l'image
// Les id des images sont de la forme "imgX" avec X l'indice de l'image dans le tableau tabImg
function clicSurImage(objImg)
{
        alert(objImg.id);
}
 
/*********************************************************/
//***** Fonctions du diaporama *****//
var tempo = "2";
var pas = 2;
var chrono;
var posFin, conteneur, sens;
 
// Ajout des images dans le div conteneur
function creationDiaporama()
{
        var i, imgDiapo;
        var conteneur = document.getElementById("conteneur");
        var elnobr = document.createElement("nobr");
        
        for (i=0; i<tabImg.length; i++)
        {
                imgDiapo = document.createElement("img");
                imgDiapo.id = "img"+i;
                imgDiapo.src = chemin+tabImg[i];
                imgDiapo.className = "image";
                
                imgDiapo.objetImage = imgDiapo;
                imgDiapo.onclick = function(){clicSurImage(this.objetImage);}
                elnobr.appendChild(imgDiapo);   
        }
        
        conteneur.appendChild(elnobr);
        chrono1 = setTimeout("deroule()",attente);
} 
 
function deroule()
{
        var distance;
 
        conteneur = document.getElementById("conteneur");
        distance = conteneur.scrollWidth / tabImg.length;
        
        if (conteneur.scrollLeft + distance >=conteneur.scrollWidth)
        {
                sens = -1;
        }
 
        if (conteneur.scrollLeft<distance)
        {
                sens = 1;
        }
        
        posFin = conteneur.scrollLeft + sens * distance;
        chrono = setTimeout("defileImage()", tempo);
}
 
function defileImage()
{
        conteneur.scrollLeft = conteneur.scrollLeft + sens * pas;       
        
        if (sens == 1)
        {
                if (conteneur.scrollLeft<posFin)
                        chrono = setTimeout("defileImage()", tempo);
                else
                        chrono = setTimeout("deroule()",attente);
        }
        else
        {
                if (conteneur.scrollLeft>posFin)
                        chrono = setTimeout("defileImage()", tempo);
                else
                        chrono = setTimeout("deroule()",attente);
        
        }
 
        document.getElementById('idTest').innerHTML=conteneur.scrollLeft + " / " + posFin;
}
 
// Réinitialisation du diaporama
function stopDiaporama()
{
        clearTimeout(chrono);
        document.getElementById("conteneur").scrollLeft = 0;
}
 
 
//-->
</script>
 
</head>
 
<body onload="creationDiaporama()" onunload="stopDiaporama()">
 
<div class="conteneur" id="conteneur">
 
 
</div>
 
<div id="idTest"></div>
 
</body>
 
</html>

Les images défilent de gauche à droite puis de droite à gauche.
Tu peux cliquer sur les images, une boite de dialogue s'ouvre et affiche l'id de l'image cliquée.

Pour changer la durée d'affichage d'une image, modifie le contenu de la variable attente : c'est une durée en millisecondes.
La variable tempo est la vitesse de défilement de l'image.

Tu dois juste modifier le chemin des images (variable chemin) et le nom des images (variable tabImg).

Le div idTest est là pour montrer l'évolution du scroll ;)

En pièce jointe un exemple (code+images)

07/04/2008, 09h35
sinifer

salut auteur

je te remerci pour ton code il marche impécable il fau juste ke je fasse défilé le text avec et c'est bon merci en tous cas :king:
07/04/2008, 11h35
sinifer

enffet si je veu mettre du text je doi la mettre avec mon image gif??

donc je doi créer une image avec le text en bas pour ke sa défil en même temps
07/04/2008, 12h57
Auteur

Citation:

Envoyé par sinifer

enffet si je veu mettre du text je doi la mettre avec mon image gif??

donc je doi créer une image avec le text en bas pour ke sa défil en même temps

pitié évite le sms :pleure:

Il faut placer l'image et le texte dans un div. Puis ajouter (appendChild) ce div dans le div conteneur. Et c'est ce div (image+texte) qui défilera...
Je vais voir comment modifier ce script. Normalement ça ne sera pas trop dur :D
07/04/2008, 16h14
Auteur

Bon j'ai changé de stratégie :D
Je n'utilise pas de div (sauf pour le conteneur) mais un tableau qui contient les images et les textes. Celui-ci est ensuite inséré dans le conteneur.

Voici donc un diaporama avec texte et image. Le code est commenté. Fonctionne sous IE7 et FF. Je ne l'ai pas testé avec d'autres navigateurs

Tu as juste à renseigner le contenu des variables chemin, tabImg, tabTxt et à modifier certaines propriétés (!) des feuilles de style.

[edit]
code source : voir cette discussion du forum contribution :
http://www.developpez.net/forums/sho...d.php?t=543119
[/edit]
08/04/2008, 09h07
sinifer

ok
merci auteur

par contre je suis désolé pour l'orthographe mais c'est pas ma branche lol

je vais tout mettre en place le code que tu ma donnée et je te fais signe ;)
08/04/2008, 09h56
sinifer

désolé mais j'ai un petit problème :roll:

quant je place :

Code:

<div class="coneneur" id="coneneur">

il y a

Code:

<div id="conteneurlog">

qui n'est plus lue donc mon css ne marche et je comprend pas pourquoi??
08/04/2008, 10h16
sinifer

:lol:

désolé je me suis pri la tête depuis ce matin a cause d'oublie du div :aie:
tous marche impécablement et encore désolé du dérengement
bonne journée
08/04/2008, 11h29
Auteur
Citation:

Envoyé par sinifer

désolé mais j'ai un petit problème :roll:

quant je place :

Code:

<div class="coneneur" id="coneneur">

il y a

Code:

<div id="conteneurlog">

qui n'est plus lue donc mon css ne marche et je comprend pas pourquoi??

surtout que c'est conteneur et pas coneneur :aie:
Code:

1 2 3 4 5 <div class="conteneur" id="conteneur"> </div>
Si tu changes le nom de la classe et l'id il faut réaliser les même modifications dans la feuille de styles et le script : remplacer conteneur par conteneurlog.

Mais visiblement tu as corrigé le problème ;)
09/04/2008, 09h05
sinifer

oui merci mais comme j'ai aussi conteneur comme css j'ai dû changer le nom et je l'ai fait pour tous le code que tu ma donné :king:
j'avais oublié de mettre le div a la fin c'estai pour sa
j'ai vu ton mots sur l'autre message je vais mettre tous sa en place et si j'ai ouvert une nouvel discution c'est que je voulais pas t'en demandé trop te laissé un peu reposé ;)
10/04/2008, 08h58
sinifer

hhheeeeuuuuu :roll:

rebonjour je vien de voir un ptit problème sa marche pas sous firefox le text défile mais pas l'image ????

Citation:

Envoyé par sinifer

hhheeeeuuuuu :roll:

rebonjour je vien de voir un ptit problème sa marche pas sous firefox le text défile mais pas l'image ????

:koi:

- Tu as bien quelque chose qui ressemble à ceci au début de ton code :
Code:

1 2 3 4 5 6 var chemin = "images\\"; var tabImg = new Array("i1.gif","i2.gif","i3.gif","i4.gif","i5.gif"); var tabTxt = new Array("Image 1", "Voici un long, terriblement long et ennuyeux commentaire sur l'image2", "Image3", "Image4", "Image5"); var attente = "3000"; //délai d'affichage d'une image en ms
:question:

- Tu as modifié les fonctions du diaporama (creationDiaporama, deroule, defileImage et stopDiaporama) ou l'une de ses variables ?

10/04/2008, 11h01
Matthieu2000

J'ai vu des images qui défilent...
http://www.escrime-info.com/
pas trop le temps de lire le code.
10/04/2008, 12h06
sinifer

non je n'ai rien changé j'ai laissé tel quel
10/04/2008, 14h58
Auteur

Citation:

Envoyé par sinifer

non je n'ai rien changé j'ai laissé tel quel

montre moi ton code JS et HTML... Tu ne t'est pas trompé dans le chemin des images ?

voila mon code html de la page

si jamais il se trouve sous mon code 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
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
 
<!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" lang="fr">
<head>
<title>Inergy</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<link href="css.css" rel="stylesheet" type="text/css" />
<script src="Scripts/defilement.js" type="text/javascript"></script>
<script src="Scripts/AC_RunActiveContent.js" type="text/javascript"></script>
</head>
<body onload="creationDiaporama()" onunload="stopDiaporama()">
<div id="conteneur">
  <div id="header"></div>
<div id="haut">
 
        <div class="logo">
          <?php include("logo.php") ?>
        </div>
    <div class="menu">
      <script type="text/javascript">
AC_FL_RunContent( 'codebase','http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0','width','635','height','131','src','flash/inergy3?button=1','quality','high','pluginspage','http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash','movie','flash/inergy3?button=1' ); //end AC code
</script><noscript><object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0" width="635" height="131">
        <param name="movie" value="flash/inergy3.swf?button=1" />
        <param name="quality" value="high" />
        <embed src="flash/inergy3.swf?button=1" quality="high" pluginspage="http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash" type="application/x-shockwave-flash" width="635" height="131"></embed>
      </object>
    </noscript></div>
    <div class="xerox"><img src="img/logo-xerox.jpg" alt="" width="86" height="39" /></div>
</div>
  <div class="ban">
    <table width="989" height="27" border="0" cellpadding="0" cellspacing="0">
 
      <tr>
        <td width="209"><span class="titrerouge">Contact Inergy</span><br />
          Inergy SA<br />
          12, Av. des Morgines<br />
          1213 Petit-Lancy / Gen&egrave;ve<br />
          <table width="167" height="16" border="0" cellpadding="0" cellspacing="0">
            <tr>
              <td><strong>TEL.</strong></td>
              <td>022 / 394 94 40</td>
            </tr>
            <tr>
              <td><strong>Fax</strong></td>
              <td>022 / 301 71 50</td>
            </tr>
            <tr>
              <td><strong>MAIL</strong></td>
              <td>bienvenue@inergy.ch</td>
            </tr>
          </table>
          <br />
          <p><img src="img/ligne-rose.jpg" alt="" width="173" height="9" /></p>
          <p class="titrerouge">Assistance Xerox</p>
          <table width="167" height="16" border="0" cellpadding="0" cellspacing="0">
            <tr>
              <td><strong>FR</strong></td>
              <td>043 / 299 90 01</td>
            </tr>
            <tr>
              <td><strong>ALL</strong></td>
              <td>043 / 299 90 00</td>
            </tr>
          </table>
          <br />
          <p><img src="img/ligne-rose.jpg" alt="" width="173" height="9" /></p>
          <p><br />
          </p></td>
        <td width="780"><img src="img/ban-home.jpg" alt="" width="779" height="277" /></td>
      </tr>
    </table>
    <map name="Map" id="Map2">
      <area shape="rect" coords="116,6,187,97" href="produits.php" alt="" />
    </map>
  </div>
 
  <div id="centre">
    <p>&nbsp;</p>
    <table width="998" height="50" border="0" cellpadding="0" cellspacing="0">
      <tr>
 
        <td width="255" rowspan="3" valign="top" class="bloc"><p class="titreblanc">ACTUALITES</p>
       <div class="blocdefilement"> 
	   			<?php
 
    if(file_exists('test.txt'))
   {
            $lignes = file('test.txt');
            $n       = 0; 
			$bb = "";
			$ss = '<br />';
 
 
            $lignes = array_slice($lignes, $n, $n+100); 
 
            foreach($lignes AS $valeur)
           {
				$bb = $bb.$ss.$valeur;
           }
   }
           		   ?>
	<marquee scrollamount="3" loop="auto" direction="up" onmouseover="this.stop()" onmouseout="this.start()" >
		<?php echo $bb,'<br />'; ?></marquee>
            <?php 
?>
		</div>
        <td width="255" rowspan="3" valign="top" class="bloc"><p class="titreblanc">A LA UNE</p>
        <div class="coneneur" id="coneneur">
 
     </div>
        <td width="255" rowspan="3" valign="top" class="bloc"><p class="titreblanc">SHOP ONLINE</p>
        <p>24 heures sur 24, 7 jours sur 7<br />
          et 366 jours par an c'est plus de<br />
          6'500 articles de toute marque<br />
          &agrave; prix discount<br />
          <br />
          <span class="Style3">&bull; <span class="Style7"><a href="#">xxx.pdf</a></span><br />
&bull; <span class="Style8"><a href="#">xxx.pdf</a></span></span></p></td>
        <td width="233" valign="top" class="bloc"><p class="titreblanc">RESSOURCES UTILES</p>
        <p><span class="Style3">&bull;</span> &eacute;v&eacute;nement &amp; presse<br />
          <span class="Style3">&bull;</span> assistance &amp; pilotes<br />
          <span class="Style3">&bull;</span> nous trouver<br />
          <span class="Style3">&bull;</span> relev&eacute; compteurs<br />
          <span class="Style3">&bull;</span> conditions g&eacute;n&eacute;rales<br />
          <span class="Style3">&bull;</span> account management</p></td>
      </tr>
      <tr>
        <td>&nbsp;</td>
      </tr>
      <tr>
        <td valign="top" class="bloc"><p class="titreblanc">A PROPOS D'INERGY</p>
        <p><span class="Style3">&bull;</span> entreprise<br />
          <span class="Style3">&bull;</span> environnement, sant&eacute; &amp; s&eacute;curit&eacute;<br />
          <span class="Style3">&bull;</span> sponsoring &amp; partenariat<br />
          <span class="Style3">&bull;</span> emploi<br />
          <br />
        </p></td>
      </tr>
    </table>
    <br />
  </div>
 
  <div id="pied"></div>
</div>
<div id="idTest"></div>
</body>
</html>

et le code 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
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
 
// JavaScript Document
<!--
/* 
chemin => chemin relatif des images
tabImg => nom des images
tabTxt => légende des images
*/
 
var chemin = "images\\";
var tabImg = new Array("i1.gif","i2.gif","i3.gif","i4.gif","i5.gif");
var tabTxt = new Array("Image 1", "Voici un long, image2", "Image3", "Image4", "Image5");
 
var attente = "3000"; //délai d'affichage d'une image en ms
 
 
// Action à réaliser lors du clic sur une cellule. 
// id est de la forme "celluleX" avec X compris entre 0 et tabImg.length-1
function clicSurImage(objCellule)
{
	//alert(objCellule.id);
	switch (objCellule.id)
	{
		case "cellule0": // pour la 1ère image
			document.location.href = "http://www.developpez.net/forums/showthread.php?t=519736";
			break;
		case "cellule1": // pour la 2nde image
			document.location.href = "produits.php";
			break;
		case "cellule2": // pour la 3ère image
			document.location.href = "http://www.developpez.net/forums/showthread.php?t=519736";
			break;
		case "cellule3": // pour la 4nde image
			document.location.href = "http://www.google.fr/";
			break;
		case "cellule4": // pour la 5nde image
			document.location.href = "http://www.google.fr/";
			break;		
	}
}
 
 
/*********************************************************/
//***** Fonctions du diaporama *****//
var tempo = "1";
var pas = 2;
var chrono;
var posFin, coneneur, sens;
 
// Ajout des images et du texte dans le div coneneur
function creationDiaporama()
{
	var i;
	var imgDiapo, txtDiapo, crlf;
	var coneneur = document.getElementById("coneneur");
 
	// Création du tableau contenant les élements
	var elTable = document.createElement("table");			
	// Ajout d'une ligne dans ce tableau
	var elLigne = elTable.insertRow(-1);
	var elCell;
 
	elTable.style.width = parseInt(coneneur.clientWidth * tabImg.length) + "px";
	elTable.cellSpacing = "0";
	elTable.cellPading = "0";
 
	for (i=0; i<tabImg.length; i++)
	{
		// Création du noeud image
		imgDiapo = document.createElement("img");
		imgDiapo.src = chemin+tabImg[i];
		imgDiapo.className = "image";
 
		// Création du saut de ligne
		crlf = document.createElement("br");
 
		// Création du noeud texte
		txtDiapo = document.createTextNode(tabTxt[i]);
 
		// Création de la cellule contenant les objets
		elCell = elLigne.insertCell(i);
		elCell.className = "cellule";
		elCell.id = "cellule"+i;
		elCell.objetCellule = elCell;
		elCell.onclick = function(){clicSurImage(this.objetCellule);}
 
		// Ajout des éléments dans la cellule
		elCell.appendChild(imgDiapo);
		elCell.appendChild(crlf);
		elCell.appendChild(txtDiapo);
	}
 
	// Ajout du tableau dans le div coneneur
	coneneur.appendChild(elTable);
	chrono1 = setTimeout("deroule()",attente);
} 
 
// Détermination du sens de défilement des images et des distances à parcourir
function deroule()
{
	var distance;
 
	coneneur = document.getElementById("coneneur");
	distance = coneneur.scrollWidth / tabImg.length;
 
	if (coneneur.scrollLeft + distance >=coneneur.scrollWidth)
	{
		sens = -1;
	}
 
	if (coneneur.scrollLeft<distance)
	{
		sens = 1;
	}
 
	posFin = coneneur.scrollLeft + sens * distance;
	chrono = setTimeout("defileImage()", tempo);
}
 
// Défilement des images
function defileImage()
{
	coneneur.scrollLeft = coneneur.scrollLeft + sens * pas;	
 
	if (sens == 1)
	{
		if (coneneur.scrollLeft<posFin)
			chrono = setTimeout("defileImage()", tempo);
		else
			chrono = setTimeout("deroule()",attente);
	}
	else
	{
		if (coneneur.scrollLeft>posFin)
			chrono = setTimeout("defileImage()", tempo);
		else
			chrono = setTimeout("deroule()",attente);
 
	}
		//affiche en bas la position
	/*document.getElementById('idTest').innerHTML=coneneur.scrollLeft + " / " + posFin; */
}
 
// Réinitialisation du diaporama lors de la fermeture de la page
function stopDiaporama()
{
	clearTimeout(chrono);
	document.getElementById("coneneur").scrollLeft = 0;
}

merci en tous cas

11/04/2008, 11h02
Auteur
Dans ta page HTML
Code:

1 2 3 <link href="css.css" rel="stylesheet" type="text/css" /> <script src="Scripts/defilement.js" type="text/javascript"></script>
et dans ton script Scripts/defilement.js :
Code:

1 2 var chemin = "images\\";
où se trouve ton dossier images ? Dans ton cas il doit se trouver dans le dossier Scripts.

Petite parenthèse : privilégie les minuscules dans les url et les différents chemins. Certains serveurs sont "case sensitive".
11/04/2008, 11h12
sinifer

Citation:

où se trouve ton dossier images ? Dans ton cas il doit se trouver dans le dossier Scripts

il se trouvai dans le www mais quand je l'ai mis dans le script sa marchais ni sur ie et firefox
11/04/2008, 11h35
Auteur
Citation:

Envoyé par sinifer

il se trouvai dans le www mais quand je l'ai mis dans le script sa marchais ni sur ie et firefox

le script tel que tu me l'as donné ci-dessus fonctionne sous IE mais pas sous FF ?

Essaye cette syntaxe (mais je doute que cela vienne de là) :
Code:

1 2 var chemin = "images/";
11/04/2008, 11h41
sinifer

ouai je te l'ai donnée tel quel
sa marche pas avec / :(
11/04/2008, 11h52
Auteur

Si j'ai bien compris le script fonctionne sous IE mais pas sous FF ? C'est curieux...

Ouvre ta page sous FF puis ouvre la console javascript (Outils->Console d'erreurs) et dis moi quelle est l'erreur générée.

c'est a ne rien comprendre aujourd'hui sa marche mais il y a quand même sa dans mes consoles d'erreure
mais je pense pas que c'est grave

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
 
 
Avertissement*: Erreur d'analyse de la valeur pour la propriété «*float*».  Déclaration abandonnée.
Fichier source*: http://127.0.0.1/inergy/css.css
Ligne*: 306
 
Avertissement*: Couleur attendue, mais «*none*» trouvé.  Erreur d'analyse de la valeur pour la propriété «*background-color*».  Déclaration abandonnée.
Fichier source*: http://127.0.0.1/inergy/css.css
Ligne*: 378
 
 
Avertissement*: Couleur attendue, mais «*#*» trouvé.  Erreur d'analyse de la valeur pour la propriété «*color*».  Déclaration abandonnée.
Fichier source*: http://127.0.0.1/inergy/css.css
Ligne*: 399
 
Avertissement*: Couleur attendue, mais «*#*» trouvé.  Erreur d'analyse de la valeur pour la propriété «*color*».  Déclaration abandonnée.
Fichier source*: http://127.0.0.1/inergy/css.css
Ligne*: 400
 
Avertissement*: Couleur attendue, mais «*#*» trouvé.  Erreur d'analyse de la valeur pour la propriété «*color*».  Déclaration abandonnée.
Fichier source*: http://127.0.0.1/inergy/css.css
Ligne*: 401
 
Avertissement*: Couleur attendue, mais «*#*» trouvé.  Erreur d'analyse de la valeur pour la propriété «*color*».  Déclaration abandonnée.
Fichier source*: http://127.0.0.1/inergy/css.css
Ligne*: 402
 
Avertissement*: Couleur attendue, mais «*#*» trouvé.  Erreur d'analyse de la valeur pour la propriété «*color*».  Déclaration abandonnée.
Fichier source*: http://127.0.0.1/inergy/css.css
Ligne*: 403

14/04/2008, 11h45
Auteur

Citation:

Envoyé par sinifer

c'est a ne rien comprendre aujourd'hui sa marche mais il y a quand même sa dans mes consoles d'erreure
mais je pense pas que c'est grave

ça ce n'est pas méchant (enfin pas vraiment), cela indique simplement que certaines propriétés CSS ne sont pas appliquées car les valeurs ne sont pas conformes.

Si ton script fonctionne aujourd'hui cela veut sans doute dire que tu avais oublié de vider ton cache avant de réouvrir ta page.
23/04/2008, 11h26
osia1

bonjour, ton code fonctionne super bien Auteur mais je voudrais savoir ce que je dois modifier pour que le scrolling se fasse de bas en haut...
Merci
29/04/2008, 00h44
King_T

Salut,
votre fonction marche a merveille ;)
Mais le probleme est que j'utilise la classe "Smarty" pour mon site
et je crois qu'elle sont incompatibles !!!!
j'ai même utilisé une <iframe> , mais ça ne donne rien.
bon, si vous avez une idée je tout ouïe :)

merci

Voir 40 message(s) de cette discussion en une page