Les titres défilants

Tous les évènements qui accrochent particulièrement se doivent ... de bouger ! En effet, un texte immobile, perdu dans l'immensité d'une page remplie de texte, passe aussi inaperçu que la foule dans la ville ou le brin d'herbe dans une prairie ... et risque par conséquent de rater la cible qu'il avait choisi : le visiteur !

Empruntons donc un de ces artifices dont la ville et ses lumières clignotantes a le secret : le journal lumineux. Sans toutefois en faire un journal complet (je vous propose sur une autre page un technique plus économique), gardons l'essentiel de l'effet que cet évènement produit : attirer le regard.

Voyons tout d'abord "la bête" :

Oui, je sais, c'est ma publicité que vous voyez là ... ; après tout, c'est bien fait pour cela, non ? De plus, j'espère qu'elle obtiendra l'effet escompté !

Vous en voulez autant sur votre page ? Alors, accrochez-vous, voici le script :

<SCRIPT LANGUAGE=JavaScript>
var largeur="100%"
var hauteur=26
var couleur='none'
var messages=new Array()
messages[0]="<font face=verdana size=5 color=blue><b><i>Bienvenue dans l'espace Docanski !</i></b></font>"
messages[1]="<font face=arial size=4 color=red><b>Vous y découvrirez la Rance maritime et les côtes de l'Armorique ...</b></font>"
messages[2]="<font face=arial size=4 color=red><b>vous y apprendrez à reconnaître les principaux champignons</b></font>"
messages[3]="<font face=arial size=4 color=red><b>... et vous vous lancerez peut-être ... dans la création d'un site Web ...</b></font>"
if (messages.length>1)
i=2
else
i=0
function debut(){
if (document.all){
Bouge3(un2)
deux2.style.top=hauteur
}
else if (document.layers){
Bouge1(document.main.document.first)
document.main.document.second.top=hauteur+7
document.main.document.second.visibility='show'
}
}
function Bouge1(whichlayer){
tlayer=eval(whichlayer)
if (tlayer.top>0&&tlayer.top<=7){
tlayer.top=0
setTimeout("Bouge1(tlayer)",3000)
setTimeout("Bouge2(document.main.document.second)",3000)
return
}
>if (tlayer.top>=tlayer.document.height*-1){
tlayer.top-=7
setTimeout("Bouge1(tlayer)",91)
}
else{
tlayer.top=hauteur
tlayer.document.write(messages[i])
tlayer.document.close()
if(i==messages.length-1)
i=0
elsei++}}
function Bouge2(whichlayer){
tlayer2=eval(whichlayer)
if (tlayer2.top>0&&tlayer2.top<=7){
tlayer2.top=0
setTimeout("Bouge2(tlayer2)",3000)
setTimeout("Bouge1(document.main.document.first)",3000)
return
}
if (tlayer2.top>=tlayer2.document.height*-1){
tlayer2.top-=7
setTimeout("Bouge2(tlayer2)",91)
}
else{
tlayer2.top=hauteur
tlayer2.document.write(messages[i])
tlayer2.document.close()
if (i==messages.length-1)
i=0
else
i++
}
}
function Bouge3(whichdiv){
tdiv=eval(whichdiv)
if (tdiv.style.pixelTop>0&&tdiv.style.pixelTop<=7){
tdiv.style.pixelTop=0
setTimeout("Bouge3(tdiv)",3000)
setTimeout("Bouge4(deux2)",3000)
return
}
if (tdiv.style.pixelTop>=tdiv.offsetHeight*-1){
tdiv.style.pixelTop-=7
setTimeout("Bouge3(tdiv)",91)
}
else{
tdiv.style.pixelTop=hauteur
tdiv.innerHTML=messages[i]
if (i==messages.length-1)
i=0
else
i++
}
}
function Bouge4(whichdiv){
tdiv2=eval(whichdiv)
if (tdiv2.style.pixelTop>0&&tdiv2.style.pixelTop<=7){
tdiv2.style.pixelTop=0
setTimeout("Bouge4(tdiv2)",3000)
setTimeout("Bouge3(un2)",3000)
return
}
if (tdiv2.style.pixelTop>=tdiv2.offsetHeight*-1){
tdiv2.style.pixelTop-=7
setTimeout("Bouge4(deux2)",91)
}
else{
tdiv2.style.pixelTop=hauteur
>tdiv2.innerHTML=messages[i]
if (i==messages.length-1)
>i=0
else
i++
}
}
window.onload=debut</SCRIPT>
<SCRIPT LANGUAGE=JavaScript><ILAYER id=main bgColor="&{couleur};"
height="&{hauteur};" width="&{largeur};"><LAYER
id=first width="&{largeur};" top="1" left="0">if (document.layers)
document.write(messages[0])</LAYER><LAYER id=second width="&{largeur};" top="0" left="0"
visibility="hide">if (document.layers)
document.write(messages[1])</LAYER></ILAYER></SCRIPT>
<SCRIPT LANGUAGE=JavaScript>if (document.all){
document.writeln('<span id="even2" style="position:relative;width:'+largeur+';height:'+hauteur+';overflow:hiden;background-color:'+couleur+'">')
document.writeln('<div style="position:absolute;width:'+largeur+';height:'+hauteur+';clip:rect(0 '+largeur+' '+hauteur+' 0);left:0;top:0">')
document.writeln('<div id="un2" style="position:absolute;width:'+largeur+';left:0;top:1;">')
document.write(messages[0])
document.writeln('</div>')
document.writeln('<div id="deux2" style="position:absolute;width:'+largeur+';left:0;top:0">')
document.write(messages[1])
document.writeln('</div>')
document.writeln('</div>')
document.writeln('</span>')
}</SCRIPT>

Long comme un jour sans pain, ce script rebutera sans doute certains d'entre vous. Il s'agit toutefois d'une impression car, en réalité, il trouve sa longueur dans la répétition de définitions de calques (il s'agit en effet encore ici de cette technique) au nombre de 4 : autant que de lignes qui seront affichées. Et, par la force des choses, les commandes d'affichage, dans la dernière partie du script, se verront appliquer 4 fois également ...

Je ne m'étendrai pas, cette fois encore, sur la façon de définir les différentes fonctions et les boucles de variables : je pense que vous êtes plus pressés de mettre ce gadget en état de fonctionner sur votre page que de suivre un exposé complet. Je ne vais toutefois pas vous abandonner là car quelques précisions s'imposent :

les noms attribués aux variables sont clairs : en rouge, la taille de la fenêtre de texte peut être modifiée.

en bleu : taille, fontes et couleurs de texte sont déterminées comme dans un document Html.

dans la partie italique, vous installerez chacune des phrases qui devra défiler.

en vert, les différentes variables de vitesse et temporisation des affichages : soyez vigilant, évitez un oubli !

Si vous pouvez modifier les dimensions de la fenêtre, il reste toutefois une taille limitée aux textes !

Rien ne vous empêche d'installer la fenêtre dans un tableau : elle sera d'autant plus visible ...

L'ensemble des scripts constituant cet évènement sera placé à l'endroit où vous désirez le voir apparaître ... et donc, dans tous les cas, entre les balises <BODY>.

... et si vous vous sentez l'âme d'un développeur, essayez donc de réaliser des calques supplémentaires accompagnés de leurs boucles afin d'augmenter le nombre de lignes à afficher ... : augmentez le nombre de fonctions, le nombre de documents à afficher, enveloppez le tout dans la boucle d'affichage et ... cela fonctionnera peut-être (si vous avez tout compris, évidemment !) ...

Bon amusement !