DHTML

Défillement de texte vertical

Fil d’info déroulant avec pause en DHTML - Compatible Netscape 6, IE4+ et NS4.x

Une exclusivité des Trucsweb, du moins pour l’instant. Le fil d’info permet de dérouler un nombre x de massages les uns à la suite des autres dans une boîte paramétrable. Le script est très simple à utiliser. La grandeur de la boîte mais aussi la couleur de fond ou une image de fond peuvent êtres ajustés. Le nombre de messages est illimité.

Les paramètres :

• fillargeur : largeur de la boîte
• filhauteur : hauteur de la boîte
• filbgcolor : couleur de fond
• filimage : image de fond

Les messages, un simple tableau (array).

• messages[0]="Texte brut"
• messages[1]="Ou même HTML <a href=..."
• messages[2]="Ajouter des messages à volonté"
• messages[...]="simplement ajuster le numéro"
• messages[100...]="Message #100"

  ATTENTION, l’apostrophe ( ’ ) provoque une erreur en Javascript. Ajouter devant les apostrophes une barre oblique ( \’ ).

C’est tout ! Noter que ce script peut facilement être dynamique en utilisant un " embed script " comme le ASP, PHP, JSP qui génère tout simplement les messages.

Code complet

<script type="text/javascript" language="javascript">
// ---------------------------------------------
// Fil d’info avec pause compatible Netscape 6
// © 1997/2001 Django (Oznog) Blais
// http://www.trucsweb.com
// Ajouter ce code à l’endroit où le fil
// d’info devra être affiché dans le BODY
// ---------------------------------------------

// Ajuster les paramètres
// - Largeur
// - Hauteur
// - Couleur de fond
// - Image de fond
var fillargeur=450
var filhauteur=35
var filbgcolor=’C0C0C0’
var filimage=’’

// Ajuster les messages
// Vous pouvez en ajouter ou en enlever.
// Attention de remplacer le caractère (’) par (\’)
var messages=new Array()
messages[0]="Texte 1..."
messages[1]="Texte 2..."
messages[2]="Texte 3..."
messages[3]="Texte 4..."
messages[4]="Texte 5..."
messages[5]="Texte 6..."
messages[6]="Texte 7..."
messages[7]="Texte 8..."
messages[8]="Texte 9..."
messages[9]="Texte 10..."

// ---------------------------------------------
// /// NE RIEN MIDIFIER APRÈS CETTE LIGNE /// //

var div1T=1
var div2T=0
var i=0
var ns4=document.layers
var ie4=document.all
var ns6=document.getElementById&&!document.all

function Scroll(nObjet){
var divns6 = document.getElementsByTagName("div")
divComplet = (ns6) ? divns6[nObjet] : eval(nObjet);
div1W = divComplet.offsetHeight
if (div1T>0&&div1T<=5){
div1T=0
divComplet.style.top=div1T
setTimeout("Scroll(%27filinfo%27)",3000)
return
}
if (div1T>=div1W*-1){
div1T-=5
divComplet.style.top=div1T
setTimeout("Scroll(%27filinfo%27)",100)
}
else {
div1T=1
divComplet.style.top=div1T
divComplet.innerHTML=messages[i]
if (i==messages.length-1)
i=0
else
i++
Scroll(%27filinfo%27)
}
}

function ScrollNS4(nObjet){
// Ajustement Netscape 4.x récupérée de
// Pausing updown message scroller
// © Dynamic Drive (www.dynamicdrive.com)
tlayer=eval(nObjet)
if (tlayer.top>0&&tlayer.top<=5){
tlayer.top=0
setTimeout("ScrollNS4(tlayer)",3000)
return
}
if (tlayer.top>=tlayer.document.height*-1){
tlayer.top-=5
setTimeout("ScrollNS4(tlayer)",100)
}
else{
tlayer.top=1
tlayer.document.write(messages[i])
tlayer.document.close()
if (i==messages.length-1)
i=0
else
i++
ScrollNS4(nObjet)
}
}

function debutscroll(){
if (ie4||ns6){
Scroll(’filinfo’)
}
else if (ns4){
document.maitre.visibility=%27show%27
ScrollNS4(document.maitre.document.filinfo2)
}
}

window.onload=debutscroll

</script>
<script type="text/javascript" language="javascript">
document.writeln(%27<ILAYER ID="maitre" WIDTH=%27+fillargeur+%27 HEIGHT=%27+filhauteur+%27 BGCOLOR=%27+filbgcolor+%27 BACKGROUND=%27+filimage+%27 VISIBILITY=hide>%27)
document.writeln(%27<LAYER ID="filinfo2" LEFT=0 TOP=1 WIDTH=%27+fillargeur+%27>’)
if (document.layers)
document.write(messages[messages.length-1])
document.writeln(%27</LAYER>%27)
document.writeln(%27</ILAYER>%27)
if (ns6||ie4){
document.writeln(%27<div id="maitre2"
style="position:relative;width:%27+ fillargeur+ %27;height:%27+filhauteur+%27;overflow:hiden;background-color:%27+ filbgcolor+%27
;background-image:url(%27+filimage+%27)">%27)
document.writeln(%27<div style="position:absolute;width:%27+
fillargeur+%27;height:%27+ filhauteur+%27;clip:rect(0 %27+fillargeur+%27 %27+filhauteur+%27 0);left:0;top:0">%27)
document.writeln(%27<div id="filinfo" style="position:absolute;width:%27+
fillargeur+%27;left:0;top:1;">%27)
document.write(messages[messages.length-1])
document.writeln(%27</div>%27)
document.writeln(%27</div>%27)
document.writeln(%27</div>%27)
}
</script>