Un bouton animé

DEMONSTRATION

5 animations différentes aux choix.
ATTENTION: Avec Netscape le texte est toujours en noir et l'animation se fait sur un bouton html gris, avec Internet explorer, le bouton n'existe pas mais on peut parametrer la couleur du texte.

Code source de ce script en 3 parties

Entre <HEAD> et <HEAD>
top

<!-- Des explications sur ces paramètres existe dans la partie informations-->
<style type="text/css">
  .stHeadliner {font-family: arial, monospace;
                font-size: small;
                font-weight: bold;
                font-style: italic;
                color: white;
                text-transform: capitalize;
                text-align: center;
                width: 92%;
                height: auto;
                border-style: none;
                background: url(bg_ani_blop.gif);
                cursor: hand;}
</style>
 
Dans la balise <BODY> :
top

<body onLoad="StartHeadliner()" onUnload="StopHeadliner()">
 
Dans le corp du document (entre <body> et </body>):
top

<script language="JavaScript">
<!-- 
//Merci de ne pas effacer ces lignes
//D'autres script,applet,images sur webgraf.Com 
//Mathieu Gros, webmaster@webgraf.Com

// ************************************************************
//  Voici quelque variable que vous pouvez modifier 
// ************************************************************

// delais en milliseconde d'écriture lors d'un affichage de gauche a droite 
typeWriterWait=120

// temp en milliseconde lors d'un clignotement où le texte reste affiché
blinkTextWait=1000

// temp en milliseconde lors d'un clignotement où il n y a rien d'affiché
blinkSpacesWait=300

// nombre de clignotement
blinkMax=3

// delais en milliseconde d'écriture lors d'un affichage du centre vers les cotés
expandWait=100

// delais en milliseconde de défilement lors d'un scrolling de droite à gauche 
scrollWait=90

// nombre de caractères max pour le scrolling
scrollWidth=42

// séléction des phrases aléatoirement: true= oui  false= non
randomLines=false

// ************************************************************
// écrivez les lignes de textes 
// ************************************************************

// nombre de lignes que vous utilisez (mettez en autant que vous voulez)
lineMax=5
lines=new Array(lineMax)

// écrire les lignes commme ceci : 
//   ("texte", "url ou mailto", "destination" , choix de l'animation, temp d'attente à la fin de l'animation)
lines[1]=new Line("vive Netscape", "http://www.netscape.com", "", Blink, 500)
lines[2]=new Line("cliquez maintenant pour voir mes GIFs !", "http://www.webgraf.com", "_blank", Scroll, 1000)
lines[3]=new Line("Ne pas cliquer sur le lien suivant", "", "", Static, 2500)
lines[4]=new Line("LE SITE microsoft ......", "http://www.microsoft.com", "new_window", Expand, 1500)
lines[5]=new Line("un e-mail : cliquez ici !!", "mailto:webmaster@webgraf.com", "", TypeWriter, 1500)

// d'autres variables (ne pas toucher)
lineText=""
timerID=null
timerRunning=false
spaces=""
charNo=0
charMax=0
charMiddle=0
lineNo=0
lineWait=0

// ************************************************************
// Les fonctions ( ne pas toucher )
// ************************************************************

function Line(text, url, frame, type, wait) {
	this.text=text
	this.url=url
	this.frame=frame
	this.Display=type
	this.wait=wait
}
function StringFill(c, n) {
	var s=""
	while (--n >= 0) {
		s+=c
	}
	return s
}
function getNewRandomInteger(oldnumber, max)
{
	var n=Math.floor(Math.random() * (max - 1) + 1)
	if (n >= oldnumber) {
		n++
	}
	return n
}
function getRandomInteger(max)
{
	var n=Math.floor(Math.random() * max + 1)
	return n
}
function GotoUrl(url, frame) {
	if (frame != '') {
		if (frame == 'self') self.location.href=url
		else if (frame == 'parent') parent.location.href=url
		else if (frame == 'top') top.location.href=url
		else {
			s=eval(top.frames[frame])
			if (s != null) top.eval(frame).location.href=url
			else window.open(url, frame, "toolbar=yes,status=yes,scrollbars=yes")
		}
	}
	else window.location.href=url
}
function Static() {
	document.formDisplay.buttonFace.value=this.text
	timerID=setTimeout("ShowNextLine()", this.wait)
}
function TypeWriter() {
	lineText=this.text
	lineWait=this.wait
	charMax=lineText.length
	spaces=StringFill(" ", charMax)
	TextTypeWriter()
}
function TextTypeWriter() {
	if (charNo <= charMax) {
		document.formDisplay.buttonFace.value=lineText.substring(0, charNo)+spaces.substring(0, charMax-charNo)
		charNo++
		timerID=setTimeout("TextTypeWriter()", typeWriterWait)
	}
	else {
		charNo=0
		timerID=setTimeout("ShowNextLine()", lineWait)
	}
}
function Blink() {
	lineText=this.text
	charMax=lineText.length
	spaces=StringFill(" ", charMax)
	lineWait=this.wait
	TextBlink()
}
function TextBlink() {
	if (charNo <= blinkMax * 2) {
		if ((charNo % 2) == 1) {
			document.formDisplay.buttonFace.value=lineText
			blinkWait=blinkTextWait
		}
		else {
			document.formDisplay.buttonFace.value=spaces
			blinkWait=blinkSpacesWait
		}
		charNo++
		timerID=setTimeout("TextBlink()", blinkWait)
	}
	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()", 2000)
	timerRunning=true
}
function StopHeadliner() {
	if (timerRunning) { 
		clearTimeout(timerID)
		timerRunning=false
	}
}
function ShowNextLine() {
	if (randomLines) lineNo=getNewRandomInteger(lineNo, lineMax)
	else (lineNo < lineMax) ? lineNo++ : lineNo=1
	lines[lineNo].Display()
}
function LineClick(lineNo) {
	document.formDisplay.buttonFace.blur()
	if (lineNo > 0) GotoUrl(lines[lineNo].url, lines[lineNo].frame)
}

// ne changer que le texte du bouton: value="  texte ici  "
//la taille du bouton est en fonction de ce texte.
with (document) {
	write('<center><form name="formDisplay"><input class="stHeadliner" type="button"')
	write('name="buttonFace" value="-différents liens animés-"')
	write('onClick="LineClick(lineNo)"></input></form></center>')
}

// fin -->
</script>
 
INFORMATIONS COMPLEMENTAIRES
top

Explication des paramètres principaux entre <HEAD et >/HEAD> Comment intégrer ce script dans votre page: Vous pouvez télécharger cette page au format zip :télécharger.








Un problème ou une critique : e-mail
Des ressources utiles et gratuites pour vos pages Web :
webgraf.com