Trucsweb.com

Trucsweb.com

DHTML

Défillement de texte vertical

RDFFav

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.fil info défillement déroulant news message boîte box nouveautées nouveautés layer div paramétrable scroll Pausing updown message scroller pause setTimeout getElementsByTagName style.top innerHTML offsetHeight ilayer relativeFil d’info déroulant avec pause en DHTML - Compatible Netscape 6, IE4+ et NS4.x

  • · Niveau : INTERMÉDIAIRE
  • · Compatibilité : IE 4+, NS4.x et Netscape 6
  • · Voir l’exemple

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>

Django (Oznog) Blais
Dernière mise à jour :

Commentaires

    Ajouter un commentaire
    Votre adresse de courriel ne sera pas publiée. * L'astérisque indique les champs obligatoires.
    Votre évaluation du tutoriel

           Visites : 5758 - Pages vues : 23536
    X

    Trucsweb.com Connexion

    Connexion

    X

    Trucsweb.com Mot de passe perdu

    Connexion

    X

    Trucsweb.com Conditions générales

    Conditions

    Responsabilité

    La responsabilité des Trucsweb.com ne pourra être engagée en cas de faits indépendants de sa volonté. Les informations mises à disposition sur ce site le sont uniquement à titre purement informatif et ne sauraient constituer en aucun cas un conseil ou une recommandation de quelque nature que ce soit.

    Aucun contrôle n'est exercé sur les références et ressources externes, l'utilisateur reconnaît que les Trucsweb.com n'assume aucune responsabilité relative à la mise à disposition de ces ressources, et ne peut être tenue responsable quant à leur contenu.

    Droit applicable et juridiction compétente

    Les règles en matière de droit, applicables aux contenus et aux transmissions de données sur et autour du site, sont déterminées par la loi canadienne. En cas de litige, n'ayant pu faire l'objet d'un accord à l'amiable, seuls les tribunaux canadien sont compétents.

    X

    Trucsweb.com Trucsweb

    X

    Trucsweb.com Glossaire

    X

    Trucsweb.com Trucsweb

    X

    Trucsweb.com Trucsweb

    Conditions

    Aucun message!

    Merci.

    X
    Aucun message!
    X

    Trucsweb.com Créer un compte

    Créer un compte

    .
    @