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 !