Comment faire un texte dynamique en Javascript ?

 

par meltech1 |

     
Comment faire un texte dynamique en Javascript ?

Sur votre site Internet vous voulez dynamiser votre texte mais vous n'avez pas le programme pour le faire. Avec commentfaiton.com ce programme va être expliqué dans ce qui suit. Dynamiser un texte, cela revient à lui donner un effet de déplacement en flash qui donne l'impression qu'il se dynamise. Voici comment faire en Javascript.

Quelles sont les fournitures nécessaires ?

  • Internet Explorer
  • Logiciel Bloc Notes

Étapes de réalisation

1.

Veuillez ouvrir votre site Internet avec le logiciel Bloc Notes pour en obtenir le code source. C'est le programme qui va vous permettre de programmer ce qui suit. Dans ce programme veuillez chercher la balise <head>.

2.

Dans la balise <head> veuillez insérer le script suivant :
<style TYPE="text/css">
<!--
.TextScrollStyle {
visibility:hidden;
font-family:Verdana;
font-weight:bold;
text-align:center;
padding:0;
margin:0;
width:100%;
overflow:hidden;
}
-->
</style>
<script language="JavaScript1.2">
// Texte Dynamique
// Create a hex convertor array (Dex2Hex[])
var hexbase= new Array("0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "A", "B", "C", "D", "E", "F");
var value=0;
var Dec2Hex=new Array();
for (x=0; x<16; x++){
for (y=0; y<16; y++){
Dec2Hex[value]= hexbase[x] + hexbase[y];
value++;
}
}

// Convert RGB colour to string base
function RGB2STR(rgbcolor)
{
return Dec2Hex[rgbcolor>>16] + Dec2Hex[(rgbcolor>>8)&0xFF] + Dec2Hex[rgbcolor&0xFF];
}

// Check the following variables to see if they exist. If not use default value
if (String(TS_colorFG)=="undefined") var TS_colorFG = 0x0000FF;
if (String(TS_colorBG)=="undefined") var TS_colorBG = 0xFFFFFF;
if (String(TS_ymax) =="undefined") var TS_ymax = 50;
if (String(TS_ystep) =="undefined") var TS_ystep = 1;
if (String(TS_speed) =="undefined") var TS_speed = 2;
if (String(TS_pause) =="undefined") var TS_pause = 600;
between messages
if (String(TS_fadestep)=="undefined") {
var TS_fadestep = TS_ymax>>1;
} else {
if (TS_fadestep > (TS_ymax>>1)) TS_fadestep = TS_ymax>>1;
}
if (String(TS_message)=="undefined") {
// use the default messages
var TS_message = new Array();
TS_message[0] = 'TEXTE DYNAMIQUE';
TS_message[1] = 'Fait pour Comment fait-on?';
TS_message[2] = 'Tout texte est dynamisé';
TS_message[3] = 'Visitez le site <A HREF="http://www.commentfaiton.com">Comment fait-on?</A>';
}

var TS_ypos = 0;
var TS_yposOrg = 0;
var TS_color = TS_colorBG;
var TS_curMsg = 0;

// Calculate the difference between background and foreground color
var half_TS_ymax = (TS_ymax)>>1
var dfRed = -((TS_colorBG>>16) - (TS_colorFG>>16)) / TS_fadestep;
var dfGreen = -(((TS_colorBG>>8)&0xFF) - ((TS_colorFG>>8)&0xFF)) / TS_fadestep;
var dfBlue = -((TS_colorBG&0xFF) - (TS_colorFG&0xFF)) / TS_fadestep;
var TS_opColor = (dfRed<<16) + (dfGreen<<8) + (dfBlue);

var timer;
var TS;

function UnloadMe()
{
clearTimeout(timer);
}

var isReadForNextText = 0;
var isChangeText = 0;

function ScrollText(currentstate)
{


TS_ypos += TS_ystep;

// Ready to change text?
if (TS_ypos >= TS_ymax || TS_ypos <= 0)
isChangeText = 1;
else
isChangeText = 0;

// Need to set the timer first so that it will go smoothly
if (isChangeText) {
if (TS_pause < TS_speed)
timer = setTimeout('ScrollText(0)', TS_speed);
else
timer = setTimeout('ScrollText(1)', TS_pause);
} else
timer = setTimeout('ScrollText(0)', TS_speed);

// Change text
if (isReadForNextText) {
// For IE only
TextScroll.innerHTML = TS_message[TS_curMsg];
isReadForNextText = 0;
}

// Change the color of the text
if (document.all) {
// IE
TS.paddingTop = TS_ypos;
TS.color = TS_color;
} else if (document.layers) {
// Netscape
TS.top = TS_ypos + TS_yposOrg;

// Clip the text
var calc = (TS.top-TS_yposOrg) + TS.document.height - 20
if (calc > TS_ymax) {
TS.clip.bottom=(TS.document.height) - (calc-TS_ymax);
} else {
TS.clip.bottom=TS.document.height;
}

// Display the text
text = '<SPAN CLASS="TextScrollStyle">' +
'<FONT COLOR='+TS_colorFG+'>' +
TS_message[TS_curMsg] +
'</FONT></SPAN>';
TS.backgroundColor = TS_colorBG;
TS.backgroundColor = 'black';
if (currentstate==1){
TS.document.write(text);
TS.document.close();
}
}
if (TS_ypos < TS_fadestep || (TS_ymax - TS_ypos) < TS_fadestep) {
TS_color += TS_opColor;
}

// Check to see if in the middle, if so, change colour direction
if (TS_ypos == half_TS_ymax) TS_opColor *= -1;

// Prepare for next text please
if (isChangeText) {
TS_color = TS_colorBG;
TS_opColor *= -1;

if (TS_ystep > 0) {
TS_ypos = 0;
} else {
TS_ypos = TS_ymax;
}

if (++TS_curMsg > TS_message.length-1) {
TS_curMsg = 0;
}

// Change text
if (document.all) {
// IE
TextScroll.innerHTML = " ";
TS.paddingTop = TS_ypos;
isReadForNextText = 1;
} else if (document.layers) {
TS.document.write('');
TS.document.close();
TS.top = TS_ypos + TS_yposOrg;
}
}
}

function startani(){
if (document.layers)
document.TextScroll.visibility="show"
timer = setTimeout('ScrollText()', 1000)
}


function ScrollTextDisplay()
{
var navName=navigator.appName;
var navVer=parseInt(navigator.appVersion)
var fNetscape = 0;

if (! ((navName=="Netscape" && navVer>=4) || (navName=="Microsoft Internet Explorer" && navVer>=4)) ) {
return;
}
if (navName=="Microsoft Internet Explorer") {
TS_speed = 20 + TS_speed;
} else if (navName=="Netscape") {
fNetscape=1;
}

document.write('<ILAYER NAME="TextScroll" CLASS="TextScrollStyle" WIDTH="'+TS_scrollwidth+'" HEIGHT=' + (TS_ymax+20) + ' BGCOLOR=' + RGB2STR(TS_colorBG) + ' VISIBILITY="hide">');
document.write('<LAYER NAME="Content" WIDTH="'+TS_scrollwidth+'">');
document.write('<SPAN ID="TextScroll" CLASS="TextScrollStyle">');
if (fNetscape) document.write('<FONT COLOR='+TS_colorFG+'>');
document.write(TS_message[0]);
if (fNetscape) document.write('</FONT>');
document.write('</SPAN>');
document.write('</LAYER>');
document.write('</ILAYER>');

if (TS_ystep > 0) {
TS_ypos = 0;
} else {
TS_ypos = TS_ymax;
}

if (document.all) {
// IE
TS = TextScroll.style;
} else if (document.layers) {
// Netscape
TS = document.TextScroll.document.Content;
TS_yposOrg = TS.top;
}
TS.height = TS_ymax+20;
TS.color = TS_color;
TS.visibility = "visible";
TS.backgroundColor = TS_colorBG;

window.onload=startani
window.onunload=UnloadMe;
}

ScrollTextDisplay()


//1) Configure messages:
var TS_message = new Array();
TS_message[0] = '<div align="left">TEXTE DYNAMIQUE</div>';
TS_message[1] = '<div align="left">Sympa comme texte</div>';
TS_message[2] = '<div align="left"> Visitez le site<A HREF="http://www.commentfaiton.com">Comment fait-on?</A></div>';

//2) Configure fader width and colors:
var TS_scrollwidth=400 //configure fader width
var TS_colorFG = 0x000000; // Text color
var TS_colorBG = 0xFFFFFF; //bgColor

// uncomment any value you wanted to change
//var TS_ymax = 50;
// How many pixel to move
//var TS_ystep = 1;
// 1 or -1 only (Scroll direction)
//var TS_speed = 2;
// The smaller the value the faster
//var TS_pause = 100;
// Pause time(milisecond) between messages
var TS_fadestep= 20;
// Steps to fade in and out

if (document.all)

document.write('<style>#containerarea{width:'+TS_scrollwidth+'}</style>')
</script>

3.

Dans la balise <body> veuillez insérer le script suivant :

<DIV id="containerarea"> </DIV>

4.

Pour terminer enregistrez le tout avec Bloc Notes et ouvrez avec IE. Vous remarquez que votre texte a été dynamisé. C'est terminé.

Astuces et mises en garde

Astuce(s) :

Pour modifier le texte allez dans la balise <body>.

Sur le même thème

damneya

Comment ajouter des métadonnées sur iWeb ?

Pour attirer des visiteurs sur un site internet, il est important d’ajouter à son site des métadonnées et des mots-clés qui seront recherchés dans les moteurs de recherche. Pour ajouter des métadonnées sur iWeb sans éditer le code HTLM brut, pre

kat5

Comment utiliser le logiciel Dreamweaver ?

Dreamweaver est un logiciel permettant de concevoir un site Internet. Et comme tout logiciel, il est simple d'utilisation, mais certaines bases sont nécessaires. Alors à vos claviers, à votre souris, nous allons partir à la découverte de ce logiciel

damneya

Comment créer un blog ?

Un blog ou plus exactement un weblog est un site personnel que vous pouvez créer pour vous exprimer sur vos points de vues. Quelles étapes faut-il suivre pour créer un bon blog?

Chercher un article sur Comment fait-on