Etape 1 : Ajouter dans le <HEAD> :
<style> .stHeadliner {font-family: arial; font-size: 10pt; font-weight: bold; font-style: italic; background: blue; color: white} </style>
On définit ici la couleur (background) et le format du texte (color, family, size...) du bouton en feuilles de style.
Etape 2: Ajouter toujours dans le <HEAD> :
<script LANGUAGE="Javascript"> <!-- // The Headliner +++ Jan Pijnacker // Délai en millisecondes pour l'effet grow growWait=90 // Délai en millisecondes pour l'effet expand expandWait=120 // Délai en millisecondes pour l'effet défilement (scroll) scrollWait=100 // Nombre de caractères pour la zone de défilement (scroll) scrollWidth=30 // Nombre de lignes (utilisez autant de lignes que vous souhaitez) lineMax=4 lines=new Array(lineMax) // Définir les lignes (texte, url, effet, temps d'attente) lines[1]=new Line("Bonjour !", "#", Expand, 2000) lines[2]=new Line("Cliquez ici !", "#", Scroll, 1000) lines[3]=new Line("Pour envoyer votre message ...", "#", Grow, 2500) lines[4]=new Line("-- Merci ! --", "mailto:Vanlancker.Luc@ccim.be", Static, 4000) ///////////////// Ne plus rien modifier ////////////// lineText="" timerID=null timerRunning=false spaces="" charNo=0 charMax=0 charMiddle=0 lineNo=0 lineWait=0 // Define line object function Line(text, url, type, wait) { this.text=text this.url=url this.Display=type this.wait=wait } // Fill a string with n chars c function StringFill(c, n) { s="" while (--n >= 0) { s+=c } return s } function Static() { document.formDisplay.buttonFace.value=this.text timerID=setTimeout("ShowNextLine()", this.wait) } function Grow() { lineText=this.text lineWait=this.wait charMax=lineText.length TextGrow() } function TextGrow() { if (charNo <= charMax) { document.formDisplay.buttonFace.value=lineText.substring(0, charNo) charNo++ timerID=setTimeout("TextGrow()", growWait) } else { charNo=0 timerID=setTimeout("ShowNextLine()", lineWait) } } function Expand() { lineText=this.text charMax=lineText.length charMiddle=Math.round(charMax / 2) lineWait=this.wait TextExpand() } function TextExpand() { if (charNo <= charMiddle) { document.formDisplay.buttonFace.value=lineText.substring(charMiddle - charNo, charMiddle + charNo) charNo++ timerID=setTimeout("TextExpand()", expandWait) } else { charNo=0 timerID=setTimeout("ShowNextLine()", lineWait) } } function Scroll() { spaces=StringFill(" ", scrollWidth) lineText=spaces+this.text charMax=lineText.length lineText+=spaces lineWait=this.wait TextScroll() } function TextScroll() { if (charNo <= charMax) { document.formDisplay.buttonFace.value=lineText.substring(charNo, scrollWidth+charNo) charNo++ timerID=setTimeout("TextScroll()", scrollWait) } else { charNo=0 timerID=setTimeout("ShowNextLine()", lineWait) } } function StartHeadliner() { StopHeadliner() timerID=setTimeout("ShowNextLine()", 1000) timerRunning=true } function StopHeadliner() { if (timerRunning) { clearTimeout(timerID) timerRunning=false } } function ShowNextLine() { (lineNo < lineMax) ? lineNo++ : lineNo=1 lines[lineNo].Display() } function GotoUrl(url){ top.location.href=url } // --> </script>
On peut configurer toute une série de variables, dont le texte, au début du script.
Etape 3: Ajouter dans la balise <BODY> :
<body onLoad="StartHeadliner()" onUnload="StopHeadliner()">
Etape 4: Ajoutez dans le body à l'endroit du bouton.
<form name="formDisplay"> <center><input class="stHeadLiner" type="button" name="buttonFace" value="Bonjour !" onClick="GotoUrl(lines[lineNo].url)"></center> </form>