Comment creer un cadre avec un texte qui défile?

gégé140488 le 13 aout 2007 à 12h11

Bonjour, j'aimerais creer un cadre pour mon site comme celui qui est sur celui-ci :
http://www.semettreauvert.com/
comment fait on?
Merci pour vos réponses

répondre

dj QUIOU le 13 aout 2007 à 18h10

voila le script a insérer dans ton code source entre <body> et </body>

<table width="20%" border="2">
<p align="center">  </p></td>
</tr>
<tr>
<td> <table width="349" height="111" border="0" align="center" >
<tr>
<td width="343"><div align=center><script language=JavaScript

class="textenoirsimple">
ejs_scroll_largeur =350;
ejs_scroll_hauteur = 117;
ejs_scroll_bgcolor = '';

ejs_scroll_background = "http://ton_image.gif";
/* script créé par http://in-sainzatox.c.la */
/* temps en secondes */
ejs_scroll_pause_seconde = 5;

ejs_scroll_message = new Array;

ejs_scroll_message[0]='TON MESSAGE 1';
ejs_scroll_message[1]='TON MESSAGE 2';
ejs_scroll_message[2]='TON MESSAGE 3';
ejs_scroll_message[3]='TON MESSAGE 4';
ejs_scroll_message[4]='TON MESSAGE 5';
ejs_scroll_message[5]='TON MESSAGE 6';
function d(texte)
{
document.write(texte);
}
d('<DIV ID=ejs_scroll_relativ

STYLE="position:relative;width:'+ejs_scroll_largeur+';height:'+ejs_scroll_hauteur+';background-color:'+

ejs_scroll_bgcolor+';background-image:url('+ejs_scroll_background+')">');
d('<DIV ID=ejs_scroll_cadre

STYLE="position:absolute;width:'+(ejs_scroll_largeur-8)+';height:'+(ejs_scroll_hauteur-8)+';top:4;left:

4;clip:rect(0 '+(ejs_scroll_largeur-8)+' '+(ejs_scroll_hauteur-8)+' 0)">');
d('<div id=ejs_scroller_1 style="position:absolute;width:'+(ejs_scroll_largeur-8)+';left:0;top:0;"

CLASS=ejs_scroll>'+ejs_scroll_message[0]+'</DIV>');
d('<div id=ejs_scroller_2

style="position:absolute;width:'+(ejs_scroll_largeur-8)+';left:0;top:'+ejs_scroll_hauteur+';"

CLASS=ejs_scroll>'+ejs_scroll_message[1]+'</DIV>');
d('</DIV></DIV>');

ejs_scroll_mode =1;
ejs_scroll_actuel = 0;

function ejs_scroll_start()
{
if(ejs_scroll_mode == 1)
{
ejs_scroller_haut = "ejs_scroller_1";
ejs_scroller_bas = "ejs_scroller_2";
ejs_scroll_mode = 0;
}
else
{
ejs_scroller_bas = "ejs_scroller_1";
ejs_scroller_haut = "ejs_scroller_2";
ejs_scroll_mode = 1;
}
ejs_scroll_nb_message = ejs_scroll_message.length-1;
if(ejs_scroll_actuel == ejs_scroll_nb_message)
ejs_scroll_suivant = 0;
else
ejs_scroll_suivant = ejs_scroll_actuel+1;
if(document.getElementById)
document.getElementById(ejs_scroller_bas).innerHTML =

ejs_scroll_message[ejs_scroll_suivant];
ejs_scroll_top = 0;
if(document.getElementById)
setTimeout("ejs_scroll_action()",ejs_scroll_pause_seconde*1000)
}

function ejs_scroll_action()
{
ejs_scroll_top -= 1;
document.getElementById(ejs_scroller_haut).style.top = ejs_scroll_top;
document.getElementById(ejs_scroller_bas).style.top = ejs_scroll_top+ejs_scroll_hauteur;
if((ejs_scroll_top+ejs_scroll_hauteur) > 0)
setTimeout("ejs_scroll_action()",10)
else
ejs_scroll_stop()
}

function ejs_scroll_stop()
{
ejs_scroll_actuel = ejs_scroll_suivant;
ejs_scroll_start()
}

window.onload = ejs_scroll_start; //laisser sans libre si pas de js appellé en page accueil
</script></div></td>
</tr>
</table>

par contre, pour obtenir une effet visule comme sur le site que tu donne en exemple, c'est du bricolage, car la tablé était ajustée en fnction du papier peint du site.

:bien:

a +

les champs écrits en bleu sont ceux que tu dois modifier

-->Message édité par dj QUIOU le 13/08/2007 18:25:40<--

-------
-lorsque ton topic est résolu indique le comme ceci [résolu] dans ton titre en cliquant sur [:dj QUIOU:1]

de ton premier message.
- Astuces informatique, Sécurité, Optimisation windows XP et Vista, Programmation, Tutoriaux => http://pc-system.fr

répondre

gégé140488 le 15 aout 2007 à 12h13

Merci, mais je l'ai fait ton script et ca me donne juste un cadre gris et le texte à l'interieur de s'affiche pas, et je n'arrive pas a mettre d'arrière plan derrière.
Pourrais tu me donner le script avec un truc qui marche en remplacant avec un arrière plan au pif et du texte.
merci, je suis un peu débutant..

répondre

dj QUIOU le 15 aout 2007 à 14h58

chez moi cela fonctionne impécablement :chepa:

certes ce n'est pas très joli mais pour débuter ce n'est pas mal. pourrais tu me copier ton code source pour que je puisse voir ce qui ne va pas :bien:

a+

-------
-lorsque ton topic est résolu indique le comme ceci [résolu] dans ton titre en cliquant sur [:dj QUIOU:1]

de ton premier message.
- Astuces informatique, Sécurité, Optimisation windows XP et Vista, Programmation, Tutoriaux => http://pc-system.fr

répondre

gégé140488 le 16 aout 2007 à 14h07

voila mon code , je remplace le http:// .... par mon image et le texte quoi mais mon image n'apparaît pas et le texte non plus.

<html>
<body>
<table width="20%" border="2">
<p align="center"> </p></td>
</tr>
<tr>
<td> <table width="349" height="111" border="0" align="center" >
<tr>
<td width="343"><div align=center><script language=JavaScript

class="textenoirsimple">
ejs_scroll_largeur =350;
ejs_scroll_hauteur = 117;
ejs_scroll_bgcolor = '';

ejs_scroll_background = "http://ton_image.gif";
/* script créé par http://in-sainzatox.c.la */
/* temps en secondes */
ejs_scroll_pause_seconde = 5;

ejs_scroll_message = new Array;

ejs_scroll_message[0]='TON MESSAGE 1';
ejs_scroll_message[1]='TON MESSAGE 2';
ejs_scroll_message[2]='TON MESSAGE 3';
ejs_scroll_message[3]='TON MESSAGE 4';
ejs_scroll_message[4]='TON MESSAGE 5';
ejs_scroll_message[5]='TON MESSAGE 6';
function d(texte)
{
document.write(texte);
}
d('<DIV ID=ejs_scroll_relativ

STYLE="position:relative;width:'+ejs_scroll_largeur+';height:'+ejs_scroll_hauteur+';background-color:'+

ejs_scroll_bgcolor+';background-image:url('+ejs_scroll_background+')">');
d('<DIV ID=ejs_scroll_cadre

STYLE="position:absolute;width:'+(ejs_scroll_largeur-8)+';height:'+(ejs_scroll_hauteur-8)+';top:4;left:

4;clip:rect(0 '+(ejs_scroll_largeur-8)+' '+(ejs_scroll_hauteur-8)+' 0)">');
d('<div id=ejs_scroller_1 style="position:absolute;width:'+(ejs_scroll_largeur-8)+';left:0;top:0;"

CLASS=ejs_scroll>'+ejs_scroll_message[0]+'</DIV>');
d('<div id=ejs_scroller_2

style="position:absolute;width:'+(ejs_scroll_largeur-8)+';left:0;top:'+ejs_scroll_hauteur+';"

CLASS=ejs_scroll>'+ejs_scroll_message[1]+'</DIV>');
d('</DIV></DIV>');

ejs_scroll_mode =1;
ejs_scroll_actuel = 0;

function ejs_scroll_start()
{
if(ejs_scroll_mode == 1)
{
ejs_scroller_haut = "ejs_scroller_1";
ejs_scroller_bas = "ejs_scroller_2";
ejs_scroll_mode = 0;
}
else
{
ejs_scroller_bas = "ejs_scroller_1";
ejs_scroller_haut = "ejs_scroller_2";
ejs_scroll_mode = 1;
}
ejs_scroll_nb_message = ejs_scroll_message.length-1;
if(ejs_scroll_actuel == ejs_scroll_nb_message)
ejs_scroll_suivant = 0;
else
ejs_scroll_suivant = ejs_scroll_actuel+1;
if(document.getElementById)
document.getElementById(ejs_scroller_bas).innerHTML =

ejs_scroll_message[ejs_scroll_suivant];
ejs_scroll_top = 0;
if(document.getElementById)
setTimeout("ejs_scroll_action()",ejs_scroll_pause_seconde*1000)
}

function ejs_scroll_action()
{
ejs_scroll_top -= 1;
document.getElementById(ejs_scroller_haut).style.top = ejs_scroll_top;
document.getElementById(ejs_scroller_bas).style.top = ejs_scroll_top+ejs_scroll_hauteur;
if((ejs_scroll_top+ejs_scroll_hauteur) > 0)
setTimeout("ejs_scroll_action()",10)
else
ejs_scroll_stop()
}

function ejs_scroll_stop()
{
ejs_scroll_actuel = ejs_scroll_suivant;
ejs_scroll_start()
}

window.onload = ejs_scroll_start; //laisser sans libre si pas de js appellé en page accueil
</script></div></td>
</tr>
</table>
</body>
</html>

répondre

dj QUIOU le 16 aout 2007 à 20h38

as tu laissé les ' ' , c'est très important il ne faut pas les oublier. ensuite, pourrais tu me donner le lien de ton image que tu as mis en fond .

-------
-lorsque ton topic est résolu indique le comme ceci [résolu] dans ton titre en cliquant sur [:dj QUIOU:1]

de ton premier message.
- Astuces informatique, Sécurité, Optimisation windows XP et Vista, Programmation, Tutoriaux => http://pc-system.fr

répondre

djcoco le 16 aout 2007 à 20h53

je ne sais pas si c'est ça que tu veux faire mais tu trouvera ici du texte qui défile de bas en haut : http://www.e-monsite.com/calvofamily/rubrique-4777.html
c'est d'ailleurs djQUIOU qui m'avait donné ce lien (merci d'ailleurs, mon texte défile a merveille ^^)

répondre

gégé140488 le 17 aout 2007 à 11h54

voila mon code avec le lien vers l'image ke je veux mettre en fond. En fait c'est l'image d'arrière plan du texte qui défile sur le site que je t'ai donné plus haut. (les parenthèses oranges)

<html>
<body>
<table width="20%" border="2">
<p align="center"> </p></td>
</tr>
<tr>
<td> <table width="349" height="111" border="0" align="center" >
<tr>
<td width="343"><div align=center><script language=JavaScript

class="textenoirsimple">
ejs_scroll_largeur =350;
ejs_scroll_hauteur = 117;
ejs_scroll_bgcolor = '';

ejs_scroll_background = "C:\Documents and Settings\monnom\Bureau\parenthèse2.gif";
/* script créé par http://in-sainzatox.c.la */
/* temps en secondes */
ejs_scroll_pause_seconde = 5;

ejs_scroll_message = new Array;

ejs_scroll_message[0]='salut';
ejs_scroll_message[1]='salut';
ejs_scroll_message[2]='salut';
ejs_scroll_message[3]='salut';
ejs_scroll_message[4]='salut';
ejs_scroll_message[5]='salut';
function d(texte)
{
document.write(texte);
}
d('<DIV ID=ejs_scroll_relativ

STYLE="position:relative;width:'+ejs_scroll_largeur+';height:'+ejs_scroll_hauteur+';background-color:'+

ejs_scroll_bgcolor+';background-image:url('+ejs_scroll_background+')">');
d('<DIV ID=ejs_scroll_cadre

STYLE="position:absolute;width:'+(ejs_scroll_largeur-8)+';height:'+(ejs_scroll_hauteur-8)+';top:4;left:

4;clip:rect(0 '+(ejs_scroll_largeur-8)+' '+(ejs_scroll_hauteur-8)+' 0)">');
d('<div id=ejs_scroller_1 style="position:absolute;width:'+(ejs_scroll_largeur-8)+';left:0;top:0;"

CLASS=ejs_scroll>'+ejs_scroll_message[0]+'</DIV>');
d('<div id=ejs_scroller_2

style="position:absolute;width:'+(ejs_scroll_largeur-8)+';left:0;top:'+ejs_scroll_hauteur+';"

CLASS=ejs_scroll>'+ejs_scroll_message[1]+'</DIV>');
d('</DIV></DIV>');

ejs_scroll_mode =1;
ejs_scroll_actuel = 0;

function ejs_scroll_start()
{
if(ejs_scroll_mode == 1)
{
ejs_scroller_haut = "ejs_scroller_1";
ejs_scroller_bas = "ejs_scroller_2";
ejs_scroll_mode = 0;
}
else
{
ejs_scroller_bas = "ejs_scroller_1";
ejs_scroller_haut = "ejs_scroller_2";
ejs_scroll_mode = 1;
}
ejs_scroll_nb_message = ejs_scroll_message.length-1;
if(ejs_scroll_actuel == ejs_scroll_nb_message)
ejs_scroll_suivant = 0;
else
ejs_scroll_suivant = ejs_scroll_actuel+1;
if(document.getElementById)
document.getElementById(ejs_scroller_bas).innerHTML =

ejs_scroll_message[ejs_scroll_suivant];
ejs_scroll_top = 0;
if(document.getElementById)
setTimeout("ejs_scroll_action()",ejs_scroll_pause_seconde*1000)
}

function ejs_scroll_action()
{
ejs_scroll_top -= 1;
document.getElementById(ejs_scroller_haut).style.top = ejs_scroll_top;
document.getElementById(ejs_scroller_bas).style.top = ejs_scroll_top+ejs_scroll_hauteur;
if((ejs_scroll_top+ejs_scroll_hauteur) > 0)
setTimeout("ejs_scroll_action()",10)
else
ejs_scroll_stop()
}

function ejs_scroll_stop()
{
ejs_scroll_actuel = ejs_scroll_suivant;
ejs_scroll_start()
}

window.onload = ejs_scroll_start; //laisser sans libre si pas de js appellé en page accueil
</script></div></td>
</tr>
</table>
</body>
</html>

répondre

dj QUIOU le 17 aout 2007 à 16h19

j'ai compri pourquoi cela ne fonctionne pas. tu as laissé ton image sur ton disque dur, elle doit impérativement se trouver sur ton FTP ou sur un autre hébergeur d'images. sinon cela ne fonctionnera pas :bien:

-------
-lorsque ton topic est résolu indique le comme ceci [résolu] dans ton titre en cliquant sur [:dj QUIOU:1]

de ton premier message.
- Astuces informatique, Sécurité, Optimisation windows XP et Vista, Programmation, Tutoriaux => http://pc-system.fr

répondre

dj QUIOU le 17 aout 2007 à 16h20

djcoco a écrit :

je ne sais pas si c'est ça que tu veux faire mais tu trouvera ici du texte qui défile de bas en haut : http://www.e-monsite.com/calvofamily/rubrique-4777.html
c'est d'ailleurs djQUIOU qui m'avait donné ce lien (merci d'ailleurs, mon texte défile a merveille ^^)

pour notre ami, j'ai récupéré le code du site sur lequel il a trouvé le cadre qui lui plaisait avec le texte qui défile.

mais c'est vrai que le site que je t'ai conseillé propose des codes en html beaucoup moins complexes ^^

-------
-lorsque ton topic est résolu indique le comme ceci [résolu] dans ton titre en cliquant sur [:dj QUIOU:1]

de ton premier message.
- Astuces informatique, Sécurité, Optimisation windows XP et Vista, Programmation, Tutoriaux => http://pc-system.fr

répondre

Poulbot le 17 aout 2007 à 16h30

Bonjour,

gégé140488 a écrit :

Au passage, où se trouve la feuille de style ?
Pour un copier/coller, il faut tout copier/coller.

cordialement

-------
(\__/)
(='.'=)
(")_(") >>> Flash <<<

répondre

dj QUIOU le 17 aout 2007 à 16h43

Poulbot a écrit :

Bonjour,

Au passage, où se trouve la feuille de style ?
Pour un copier/coller, il faut tout copier/coller.

cordialement

je ne pense pas que se soit un oubli mais plutot une erreur de mise en forme due au copier /coller , regarde elle est 2 lignes en dessous, il y a des espaces en trop a corriger :bien:

-------
-lorsque ton topic est résolu indique le comme ceci [résolu] dans ton titre en cliquant sur [:dj QUIOU:1]

de ton premier message.
- Astuces informatique, Sécurité, Optimisation windows XP et Vista, Programmation, Tutoriaux => http://pc-system.fr

répondre

Poulbot le 17 aout 2007 à 17h02

dj QUIOU a écrit :

regarde elle est 2 lignes en dessous

Non ! elle est bien manquante.

cordialement

-------
(\__/)
(='.'=)
(")_(") >>> Flash <<<

répondre

dj QUIOU le 17 aout 2007 à 21h35

<html>
<body>
<table width="20%" border="2">
<p align="center"> </p></td>
</tr>
<tr>
<td> <table width="349" height="111" border="0" align="center" >
<tr>
<td width="343"><div align=center><script language=JavaScript

class="textenoirsimple">
ejs_scroll_largeur =350;
ejs_scroll_hauteur = 117;
ejs_scroll_bgcolor = '';

ejs_scroll_background = "C:\Documents and Settings\monnom\Bureau\parenthèse2.gif";
/* script créé par http://in-sainzatox.c.la */
/* temps en secondes */
[...]

regarde en vert :chepa:

elle est bien présente, mais elle est coupée par un espace en trop il faudrait ceci

<html>
<body>
<table width="20%" border="2">
<p align="center"> </p></td>
</tr>
<tr>
<td> <table width="349" height="111" border="0" align="center" >
<tr>
<td width="343"><div align=center><script language=JavaScript class="textenoirsimple">
ejs_scroll_largeur =350;
ejs_scroll_hauteur = 117;
ejs_scroll_bgcolor = '';

ejs_scroll_background = "C:\Documents and Settings\monnom\Bureau\parenthèse2.gif";
/* script créé par http://in-sainzatox.c.la */
/* temps en secondes */
[...]

-->Message édité par dj QUIOU le 17/08/2007 21:41:17<--

-------
-lorsque ton topic est résolu indique le comme ceci [résolu] dans ton titre en cliquant sur [:dj QUIOU:1]

de ton premier message.
- Astuces informatique, Sécurité, Optimisation windows XP et Vista, Programmation, Tutoriaux => http://pc-system.fr

répondre

Poulbot le 18 aout 2007 à 09h11

dj QUIOU a écrit :

regarde en vert :chepa:

elle est bien présente, mais elle est coupée par un espace en trop il faudrait ceci

<script language=JavaScript class="textenoirsimple">

Je parle de la définition de la classe .textenoirsimple :

}
.textenoirsimple {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
color: #000000;
text-decoration: none;
font-weight: normal;
}

cordialement

-------
(\__/)
(='.'=)
(")_(") >>> Flash <<<

répondre

dj QUIOU le 18 aout 2007 à 10h44

ah oui désolé, elle n'y était pas :sweat:

-->Message édité par dj QUIOU le 18/08/2007 10:44:46<--

-------
-lorsque ton topic est résolu indique le comme ceci [résolu] dans ton titre en cliquant sur [:dj QUIOU:1]

de ton premier message.
- Astuces informatique, Sécurité, Optimisation windows XP et Vista, Programmation, Tutoriaux => http://pc-system.fr

répondre

À PROPOS DU FORUM MICRO HEBDO

LES FORUMS THÉMATIQUES ET TECHNIQUES

LES FORUMS GÉNÉRAUX

ARCHIVES DU FORUM