AIDEZ MOI : texte defilant html ?
vrompir
-
TigerJim1994 -
TigerJim1994 -
Salut,
voila y' a un truc que j'aimerai faire mais je sais pas du tout comment, je pense qu'il fo du javscript ou quelque chose du genr mais j'en suis pas sure ...
j'explique
j'ai une image dans un layer et un autre layer sur cette image qui contient du texte....en bas de l'image se trouve 2 petits boutons, (haut/bas) qui permettent de faire defiller le texte qu'il y a dans le second layer de texte comme une scrollbar ...
je sais pas comment faire et toute aide serait la bienvenue ...
voila y' a un truc que j'aimerai faire mais je sais pas du tout comment, je pense qu'il fo du javscript ou quelque chose du genr mais j'en suis pas sure ...
j'explique
j'ai une image dans un layer et un autre layer sur cette image qui contient du texte....en bas de l'image se trouve 2 petits boutons, (haut/bas) qui permettent de faire defiller le texte qu'il y a dans le second layer de texte comme une scrollbar ...
je sais pas comment faire et toute aide serait la bienvenue ...
14 réponses
Salut vrompir,
J'suis pas sûr d'avoir tout compris ...
Cependant voici un ex en Javascript qui répondra peut être à tes besoins.
Peut être JAVA ou FLASH seraient ils mieux appropriés mais comme je ne connais ni l'un ni l'autre ...
Copie ce qui suit dans un fichier html sur ton PC et test avec IE
<html>
<head>
<style>
.stylecadre
{
position:absolute;
overflow:hidden;
background-color:#E0E0E0;
}
.styletexte
{
position:absolute;
left:5px;
top:0px;
overflow:hidden;
}
.perso
{
font-family:arial;
font-weight:bold;
font-size:10pt;
color:#0000BB;
}
</style>
<script language="Javascript">
<!--
var fenetre=null
// Object qui va référence un layer <DIV> HTML positionner de manière absolue de préférence
function DivObject(id)
{
this.ref=window.document.getElementById(id);
}
// Définir les dimensions de l'object DIV référencé
function divObject_setSize(szX,szY)
{
this.setWidth(szX)
this.setHeight(szY)
}
DivObject.prototype.setSize=divObject_setSize
// Définir la position absolue de l'object DIV référencé
function divObject_setPos(x,y)
{
this.setX(x)
this.setY(y)
}
DivObject.prototype.setPos=divObject_setPos
// Pas utilisé ...
function divObject_setClip(x,y,szX,szY)
{
this.ref.style.clip="rect("+y+","+szX+","+szY+","+x+")";
}
DivObject.prototype.setClip=divObject_setClip
// Définir la largeur de l'object DIV référencé
function divObject_setWidth(szX)
{
this.ref.style.width=szX+"px"
}
DivObject.prototype.setWidth=divObject_setWidth
// Définir la hauteur de l'object DIV référencé
function divObject_setHeight(szY)
{
this.ref.style.height=szY+"px"
}
DivObject.prototype.setHeight=divObject_setHeight
// Modifier la position horizontale du delta passé dans dx
function divObject_setdX(dx)
{
dx+=this.ref.offsetLeft;
this.ref.style.left=dx+"px"
}
DivObject.prototype.setdX=divObject_setdX
// Modifier la position verticale du delta passé dans dy
function divObject_setdY(dy)
{
dy+=this.ref.offsetTop;
this.ref.style.top=dy+"px"
}
DivObject.prototype.setdY=divObject_setdY
// Définir la position horizontale de l'object DIV référencé
function divObject_setX(x)
{
this.ref.style.left=x+"px"
}
DivObject.prototype.setX=divObject_setX
// Définir la position verticale de l'object DIV référencé
function divObject_setY(y)
{
this.ref.style.top=y+"px"
}
DivObject.prototype.setY=divObject_setY
// Création des objects nécessaire au chargement
function load()
{
// D'abord la zone cadre qui va servir de support à la zone de texte
zonecadre=new DivObject("cadre");
// On définit ensuite les dimensions de la zone de cadres
zonecadre.setSize(180,250);
// Puis sa position
zonecadre.setPos(10,100);
zonetexte=new DivObject("texte");
}
// Tout le code Javascript qui suit ne sert que pour le scroll automatique ...
// name : le nom de la variable javascript déclarée comme objet de type DivObject
// direction : "UP", "DOWN", "LEFT" ou "RIGHT"
// start : mettre à zéro (pas utilisé)
// end : valeur qui met fin au scrolling lorsque la coordonnée x ou y de l'objet DIV référencé atteind ou dépasse cette valeur
// step : pas entre 2 déplacements
// time : durée en milliseconde entre 2 appels au timer
function divObject_scrollStart(name,direction,start,end,step,time)
{
// Si déjà un timer en cours on sort ..
if (this.timerMove) return;
this.step=step
this.start=start
this.end=end
this.name=name
this.time=time
this.timerMove=null
this.direction=direction
// Lance le timer
if (!this.timerMove) this.timerMove=setInterval(this.name+".move()",this.time);
}
DivObject.prototype.scrollStart=divObject_scrollStart
function divObject_move()
{
stop=true
switch (this.direction)
{
case "UP" :
if (this.ref.offsetTop >= this.end)
{
stop=false
this.setdY(-this.step)
}
break;
case "DOWN" :
if (this.ref.offsetTop <= this.end)
{
stop=false
this.setdY(this.step)
}
break;
case "LEFT" :
if (this.ref.offsetLeft >= this.end)
{
stop=false
this.setdX(-this.step)
}
break;
case "RIGHT" :
if (this.ref.offsetLeft <= this.end)
{
stop=false
this.setdX(this.step)
}
break;
}
if (stop) this.scrollStop()
}
DivObject.prototype.move=divObject_move
function divObject_scrollStop()
{
if (this.timerMove) clearInterval(this.timerMove);
this.timerMove=null
}
DivObject.prototype.scrollStop=divObject_scrollStop
// -->
</script>
</head>
<body onload="load()">
<form>
<table>
<tr>
<td>
<fieldset><legend>Remote control</legend>
<input type="button" value="Gauche" onclick="zonetexte.setdX(-10)">
<input type="button" value="Droite" onclick="zonetexte.setdX(10)">
<input type="button" value="Haut" onclick="zonetexte.setdY(-10)">
<input type="button" value="Bas" onclick="zonetexte.setdY(10)">
<input type="button" value="R.a.z" onclick="zonetexte.setPos(5,0)">
</fieldset>
</td>
<td valign=center>
<fieldset><legend>Défilement auto</legend>
<input type="button" value="Start" onclick="zonetexte.scrollStart('zonetexte','UP',0,-140,2,100)">
<input type="button" value="Stop" onclick="zonetexte.scrollStop()">
</fieldset>
</tr>
</table>
</form>
<div id="cadre" class=stylecadre>
<div id="texte" class=styletexte>
<p class=perso nowrap>
Salut vrompir<br><br>
Ce texte est contenu dans un layer appelé "texte" lui même contenu dans un autre layer (en gris) appelé "cadre".<br>
Le contenu du layer "texte" ne peut pas sortir de la zone délimitée par le layer "cadre" qui peut très bien être une image.<br><br>
Clique sur <font color=#FF0000>[Start]</font> pour faire automatiquement défiler ce texte vers le haut.<br><br>
N'oublie pas de cliquer ensuite sur [Stop] pour mettre fin au timer ...<br><br>
Php<br><br>
[[ The Truth is Out There ]]</p>
</div>
</div>
</body>
</html>
Si tu as un pb par rapport au code, laisse un msg ;:)
@+
Philippe
[[ The Truth is Out There ]]
J'suis pas sûr d'avoir tout compris ...
Cependant voici un ex en Javascript qui répondra peut être à tes besoins.
Peut être JAVA ou FLASH seraient ils mieux appropriés mais comme je ne connais ni l'un ni l'autre ...
Copie ce qui suit dans un fichier html sur ton PC et test avec IE
<html>
<head>
<style>
.stylecadre
{
position:absolute;
overflow:hidden;
background-color:#E0E0E0;
}
.styletexte
{
position:absolute;
left:5px;
top:0px;
overflow:hidden;
}
.perso
{
font-family:arial;
font-weight:bold;
font-size:10pt;
color:#0000BB;
}
</style>
<script language="Javascript">
<!--
var fenetre=null
// Object qui va référence un layer <DIV> HTML positionner de manière absolue de préférence
function DivObject(id)
{
this.ref=window.document.getElementById(id);
}
// Définir les dimensions de l'object DIV référencé
function divObject_setSize(szX,szY)
{
this.setWidth(szX)
this.setHeight(szY)
}
DivObject.prototype.setSize=divObject_setSize
// Définir la position absolue de l'object DIV référencé
function divObject_setPos(x,y)
{
this.setX(x)
this.setY(y)
}
DivObject.prototype.setPos=divObject_setPos
// Pas utilisé ...
function divObject_setClip(x,y,szX,szY)
{
this.ref.style.clip="rect("+y+","+szX+","+szY+","+x+")";
}
DivObject.prototype.setClip=divObject_setClip
// Définir la largeur de l'object DIV référencé
function divObject_setWidth(szX)
{
this.ref.style.width=szX+"px"
}
DivObject.prototype.setWidth=divObject_setWidth
// Définir la hauteur de l'object DIV référencé
function divObject_setHeight(szY)
{
this.ref.style.height=szY+"px"
}
DivObject.prototype.setHeight=divObject_setHeight
// Modifier la position horizontale du delta passé dans dx
function divObject_setdX(dx)
{
dx+=this.ref.offsetLeft;
this.ref.style.left=dx+"px"
}
DivObject.prototype.setdX=divObject_setdX
// Modifier la position verticale du delta passé dans dy
function divObject_setdY(dy)
{
dy+=this.ref.offsetTop;
this.ref.style.top=dy+"px"
}
DivObject.prototype.setdY=divObject_setdY
// Définir la position horizontale de l'object DIV référencé
function divObject_setX(x)
{
this.ref.style.left=x+"px"
}
DivObject.prototype.setX=divObject_setX
// Définir la position verticale de l'object DIV référencé
function divObject_setY(y)
{
this.ref.style.top=y+"px"
}
DivObject.prototype.setY=divObject_setY
// Création des objects nécessaire au chargement
function load()
{
// D'abord la zone cadre qui va servir de support à la zone de texte
zonecadre=new DivObject("cadre");
// On définit ensuite les dimensions de la zone de cadres
zonecadre.setSize(180,250);
// Puis sa position
zonecadre.setPos(10,100);
zonetexte=new DivObject("texte");
}
// Tout le code Javascript qui suit ne sert que pour le scroll automatique ...
// name : le nom de la variable javascript déclarée comme objet de type DivObject
// direction : "UP", "DOWN", "LEFT" ou "RIGHT"
// start : mettre à zéro (pas utilisé)
// end : valeur qui met fin au scrolling lorsque la coordonnée x ou y de l'objet DIV référencé atteind ou dépasse cette valeur
// step : pas entre 2 déplacements
// time : durée en milliseconde entre 2 appels au timer
function divObject_scrollStart(name,direction,start,end,step,time)
{
// Si déjà un timer en cours on sort ..
if (this.timerMove) return;
this.step=step
this.start=start
this.end=end
this.name=name
this.time=time
this.timerMove=null
this.direction=direction
// Lance le timer
if (!this.timerMove) this.timerMove=setInterval(this.name+".move()",this.time);
}
DivObject.prototype.scrollStart=divObject_scrollStart
function divObject_move()
{
stop=true
switch (this.direction)
{
case "UP" :
if (this.ref.offsetTop >= this.end)
{
stop=false
this.setdY(-this.step)
}
break;
case "DOWN" :
if (this.ref.offsetTop <= this.end)
{
stop=false
this.setdY(this.step)
}
break;
case "LEFT" :
if (this.ref.offsetLeft >= this.end)
{
stop=false
this.setdX(-this.step)
}
break;
case "RIGHT" :
if (this.ref.offsetLeft <= this.end)
{
stop=false
this.setdX(this.step)
}
break;
}
if (stop) this.scrollStop()
}
DivObject.prototype.move=divObject_move
function divObject_scrollStop()
{
if (this.timerMove) clearInterval(this.timerMove);
this.timerMove=null
}
DivObject.prototype.scrollStop=divObject_scrollStop
// -->
</script>
</head>
<body onload="load()">
<form>
<table>
<tr>
<td>
<fieldset><legend>Remote control</legend>
<input type="button" value="Gauche" onclick="zonetexte.setdX(-10)">
<input type="button" value="Droite" onclick="zonetexte.setdX(10)">
<input type="button" value="Haut" onclick="zonetexte.setdY(-10)">
<input type="button" value="Bas" onclick="zonetexte.setdY(10)">
<input type="button" value="R.a.z" onclick="zonetexte.setPos(5,0)">
</fieldset>
</td>
<td valign=center>
<fieldset><legend>Défilement auto</legend>
<input type="button" value="Start" onclick="zonetexte.scrollStart('zonetexte','UP',0,-140,2,100)">
<input type="button" value="Stop" onclick="zonetexte.scrollStop()">
</fieldset>
</tr>
</table>
</form>
<div id="cadre" class=stylecadre>
<div id="texte" class=styletexte>
<p class=perso nowrap>
Salut vrompir<br><br>
Ce texte est contenu dans un layer appelé "texte" lui même contenu dans un autre layer (en gris) appelé "cadre".<br>
Le contenu du layer "texte" ne peut pas sortir de la zone délimitée par le layer "cadre" qui peut très bien être une image.<br><br>
Clique sur <font color=#FF0000>[Start]</font> pour faire automatiquement défiler ce texte vers le haut.<br><br>
N'oublie pas de cliquer ensuite sur [Stop] pour mettre fin au timer ...<br><br>
Php<br><br>
[[ The Truth is Out There ]]</p>
</div>
</div>
</body>
</html>
Si tu as un pb par rapport au code, laisse un msg ;:)
@+
Philippe
[[ The Truth is Out There ]]
JE REPETE "MARQUEE" n existe pas
il faut du javascript http://www.editeurjavascript.com/scripts/search.php?asked=texte+defilant&dest=1
mais bon puisque plus on dis "ne faite pas ca " plus il y en as qui font le contraire !!!
RAD
il faut du javascript http://www.editeurjavascript.com/scripts/search.php?asked=texte+defilant&dest=1
mais bon puisque plus on dis "ne faite pas ca " plus il y en as qui font le contraire !!!
RAD
De toute les façons c'est microsoft qui detient les 90%du marche informatique
alors marche avec leur language.
encore une belle connerie !!!!!
microsoft n est pas proprietaire du web !!!!
et 90% des particuliers on microsofts mais cela ne veux pas dire que tous utilise la m....de Internet explorer pour naviguer !!!
et ce n est pas microsoft qui decide des standart web !! et heureusement !!
RAD
alors marche avec leur language.
encore une belle connerie !!!!!
microsoft n est pas proprietaire du web !!!!
et 90% des particuliers on microsofts mais cela ne veux pas dire que tous utilise la m....de Internet explorer pour naviguer !!!
et ce n est pas microsoft qui decide des standart web !! et heureusement !!
RAD
Vous n’avez pas trouvé la réponse que vous recherchez ?
Posez votre question
j te remercie , mais ce que je veux c 'est ca , je veux un titre par exemple "la france" qu m 'affiche sur la page d'accueil lettre par lettre comme suit: l puis a puis f puis r puis.....
ce que ta proposé on peut l faire avec la balise marquee
j espere ta d' autres idees j te remercie bcq
ce que ta proposé on peut l faire avec la balise marquee
j espere ta d' autres idees j te remercie bcq
Comme un texte de machine a écrire ? Si c'est le cas, voici un script JavaScript qui fera l'affaire : http://ww38.easy-script.com/scripts-Javascript/un-texte-de-machine-a-ecrire-109.html
Désolé de te contredire mais "MARQUEE" fonctionne très bien sous firefox!
Faut arrêter de prendre Sun pour des débutants sérieux :-(
Faut arrêter de prendre Sun pour des débutants sérieux :-(
SALUT
J'ai beaucoup plus facile ! Sans javascript ..
<marquee>Texte ici</marquee>
sur IE :-)))
je rapel que la balise "MARQUEE" n existe pas !!!!!!!!!!!! c est une invention microsoft ( ou netscape ? je me rapel plus )!!
donc utilisation js ou java ou flash !!
RAD
J'ai beaucoup plus facile ! Sans javascript ..
<marquee>Texte ici</marquee>
sur IE :-)))
je rapel que la balise "MARQUEE" n existe pas !!!!!!!!!!!! c est une invention microsoft ( ou netscape ? je me rapel plus )!!
donc utilisation js ou java ou flash !!
RAD
la balise <marquee> fonctionne aussi sous firefox
mais comment faire pour que le mouvement s'arrete quand on passe la souris dessus???
mais comment faire pour que le mouvement s'arrete quand on passe la souris dessus???
utulise marquee un point c'est tout
<marquee>ton texte ici</marquee>
et ca marche.
De toute les façons c'est microsoft qui detient les 90%du marche informatique
alors marche avec leur language.
<marquee>ton texte ici</marquee>
et ca marche.
De toute les façons c'est microsoft qui detient les 90%du marche informatique
alors marche avec leur language.
Coucou,
Je sais que c'est pas du tout le BON sujet, mais je préfère me faire engueuler(me tuer pas quand même) que créer un topic (au pire je le créé quand même...)
Je ne peux pas utiliser marquee, comment je fais? parce que là où je veux l'utiliser, c'est sur facebook(désolé) et le HTML ne marche pas :(
Merci d'avance :D
Je sais que c'est pas du tout le BON sujet, mais je préfère me faire engueuler(me tuer pas quand même) que créer un topic (au pire je le créé quand même...)
Je ne peux pas utiliser marquee, comment je fais? parce que là où je veux l'utiliser, c'est sur facebook(désolé) et le HTML ne marche pas :(
Merci d'avance :D
Sun = ????
Ensuite le site n'est PAS en [b]HTML/b
Que j'utilise firefox ou non, ce n'est pas la question, une page non html ne peut pas affiché "marquee" car celui ci appartient au langage HTML...
Tu ne m'as pas compri !
Ensuite le site n'est PAS en [b]HTML/b
Que j'utilise firefox ou non, ce n'est pas la question, une page non html ne peut pas affiché "marquee" car celui ci appartient au langage HTML...
Tu ne m'as pas compri !
Et bé.... que de bêtises "marquées" :D
En effet, si vous voulez mettre un site-torchon en ligne, utilisez-donc la balise marquee, vous en êtes libre. Cependant, comme le dit RAD, ce n'est pas un standard. Donc, faites ce que vous voulez pour vous mais ne conseillez pas ces absurdités pour d'autres personnes. Les standards du Net, les normes W3C, le HTML Strict, etc, sont des normes qui permettent à un site d'être accessible à une multitude d'utilisateurs. Vous devez vraiment avoir de la veine de ne pas être malvoyant sinon vous comprendrez vraiment ce qui est écrit dans ce message...
Bref, utilisez la balise mais ne venez pas vous plaindre ensuite si l'accessibilité de votre site est décrié par la suite. C'est ce genre de détails et de possibilités offertes aux internautes qui différencient un site d'amateurs d'un site professionnel ou d'aspect professionnel.
Au final, il reste la solution du javascript (mais gare aux utilisateurs l'ayant désactivé) ou en flash (mais ce point aussi est difficile au niveau de l'accessibilité).
De plus, dans le Web 2.0, le fait de respecter les normes permet d'être ajouté dans les petits papiers des internautes qui prendront des nouvelles de votre site via des flux ou des outils récupérant les infos pour suivre l'actu proposée par le site.
En effet, si vous voulez mettre un site-torchon en ligne, utilisez-donc la balise marquee, vous en êtes libre. Cependant, comme le dit RAD, ce n'est pas un standard. Donc, faites ce que vous voulez pour vous mais ne conseillez pas ces absurdités pour d'autres personnes. Les standards du Net, les normes W3C, le HTML Strict, etc, sont des normes qui permettent à un site d'être accessible à une multitude d'utilisateurs. Vous devez vraiment avoir de la veine de ne pas être malvoyant sinon vous comprendrez vraiment ce qui est écrit dans ce message...
Bref, utilisez la balise mais ne venez pas vous plaindre ensuite si l'accessibilité de votre site est décrié par la suite. C'est ce genre de détails et de possibilités offertes aux internautes qui différencient un site d'amateurs d'un site professionnel ou d'aspect professionnel.
Au final, il reste la solution du javascript (mais gare aux utilisateurs l'ayant désactivé) ou en flash (mais ce point aussi est difficile au niveau de l'accessibilité).
De plus, dans le Web 2.0, le fait de respecter les normes permet d'être ajouté dans les petits papiers des internautes qui prendront des nouvelles de votre site via des flux ou des outils récupérant les infos pour suivre l'actu proposée par le site.
>Flow31
>Je ne peux pas utiliser marquee, comment je fais? parce que là où je veux l'utiliser, c'est sur facebook(désolé)
>et le HTML ne marche pas :(
Facebook doit peut-être permettre uniquement du BBcode, un code allégé en somme. C'est utilisé pour éviter les mauvaises actions que l'on pourrait réaliser avec du code HTML. Donc, il est impossible de faire défiler du texte en BBcode tant que ce n'est pas géré dans ce "langage".
>Je ne peux pas utiliser marquee, comment je fais? parce que là où je veux l'utiliser, c'est sur facebook(désolé)
>et le HTML ne marche pas :(
Facebook doit peut-être permettre uniquement du BBcode, un code allégé en somme. C'est utilisé pour éviter les mauvaises actions que l'on pourrait réaliser avec du code HTML. Donc, il est impossible de faire défiler du texte en BBcode tant que ce n'est pas géré dans ce "langage".