messages en dansant - Tout pour le Javascript aux 1001 Astuces Nam@ni

Placer entre les tags <head>

// Mximum de letters de chaque message. Plus = plus lent 
var maXnamaniTxt=32

// Le trajet du message. Voici un exemple sur comment le définir :
// - Utiliser mon Générateur de trajectoire, http://www.namani.net
// - ou,
// - Faire une image vide (blanche) en gif, environs 800x600 pixels.
// - Dans une application qui gère les image-maps (comme CuteMAP):
// 1. Régler l'outil de traçage en "polygon".
// 2. Dessiner un trajet.
// 3. Copier les valeurs obtenues et les coller ci-dessous. 
// ATTENTION: Pas d'espaces entre les valeurs !!!
var path= new Array(548,316,581,296,598,257,577,215,559,202,503,193,464,203,446,222,448,255,468,274,500,280,526,267,541,237,537,209,526,187,499,161,462,146,412,133,368,129,326,132,293,142,272,159,250,184,239,204,234,213,226,230,201,253,186,259,165,265,136,268,110,270,83,267,58,260,36,243,26,229,22,210,24,191,29,174,39,163,56,154,76,150,96,149,110,148,135,152,165,156,196,165,208,172,231,181,254,192,280,203,305,210,339,210,366,206,389,195,405,182,419,167,428,148,442,116,448,80,443,41,401,8,347,0,300,11,280,30,256,50,230,58,198,61,169,56,141,50,113,45,87,36,70,29,52,24,28,18,7,15)

// Durée de pause entre 2 message
var arretNamani=2

// Choisir la police, sa taille et sa couleur.
var poLnamani="Times"
var taiLnamani=12
var couLnamani="lightgreen"

// L'espace (pixels) entre les lettres.
// augmenter si la police est plus grande.
var letRnamani=12

// Ne plus rien changer dessous
var namaniG=path[path.length-2]
var namaniH=path[path.length-1]
var timer
var finalxpos=namaniG
var i_mes=0
var txtNamani=""
var i_path=0
var arretNamanimilli=arretNamani*arretNamani+1000
var pathx= new Array()
if (document.layers) {
	if (taiLnamani>20) {taiLnamani=6}
	else if (taiLnamani>20) {taiLnamani=5}
	else if (taiLnamani>14) {taiLnamani=4} 
	else if (taiLnamani>10) {taiLnamani=3}
	else if (taiLnamani>8) {taiLnamani=2}
	else if (taiLnamani<=7) {taiLnamani=1}
}
var ii=0
for (i=0;i<=path.length-1;i=i+2) {
	pathx[ii]=path[i]
	ii++
}
ii=0
var pathy= new Array()
for (i=1;i<=path.length-1;i=i+2) {
	pathy[ii]=path[i]
	ii++
}
var xpos=new Array()
for (i=0;i<=maXnamaniTxt;i++) {
	xpos[i]=5000
}
var ypos=new Array()
for (i=0;i<=maXnamaniTxt;i++) {
	ypos[i]=5000
}
function vazNamani() {
	if (i_path<=pathx.length-1) {
		for (i=txtNamani.length-1; i>=1; i--) {
   			xpos[i]=xpos[i-1]
			ypos[i]=ypos[i-1]
    	}// http://www.namani.net 
		xpos[0]=pathx[i_path]
		ypos[0]=pathy[i_path]
		if (document.all) {
			for (i=0; i<txtNamani.length-1; i++) {
    			var thisspan = eval("document.all.span"+(i)+".style")
    			thisspan.posLeft=xpos[i]
				thisspan.posTop=ypos[i]
    		}
		}
		if (document.layers) {
			for (i=0; i<txtNamani.length-1; i++) {
    			var thisspan = eval("document.span"+i)
    			thisspan.left=xpos[i]
				thisspan.top=ypos[i]
    		}
		}
		i_path++
		timer=setTimeout("vazNamani()",20)
	}
	else {
		clearTimeout(timer)
		fiNamani()
	}
}
function fiNamani() {
		if (document.all) {
			for (i=0; i<txtNamani.length-1; i++) {
    			var thisspan = eval("document.all.span"+(i)+".style")
    			thisspan.posLeft=namaniG+finalxpos
				thisspan.posTop=namaniH
				finalxpos+=letRnamani
    		}// http://www.namani.net 
		}
		if (document.layers) {
			for (i=0; i<txtNamani.length-1; i++) {
    			var thisspan = eval("document.span"+i)
    			thisspan.left=namaniG+finalxpos
				thisspan.top=namaniH
				finalxpos+=letRnamani
    		}
		}
		timer=setTimeout("effacEnamani()",arretNamanimilli)
}
function effacEnamani() {
		finalxpos=namaniH
		i_path=0
		for (i=0;i<=maXnamaniTxt;i++) {
			xpos[i]=5000
		}
		if (document.all) {
			for (i=0;i<=maXnamaniTxt;i++) {
				var thisspan = eval("document.all.span"+i)
    			thisspan.innerHTML=" "
				var thisspan = eval("document.all.span"+(i)+".style")
    			thisspan.posLeft=xpos[i]=5000
			}
		}
		if (document.layers) {
			for (i=0;i<=maXnamaniTxt;i++) {
				var thisspan = eval("document.span"+i+".document")
    			thisspan.write("<p> </p>")
				thisspan.clear()
				thisspan = eval("document.span"+i)
    			thisspan.left=5000
			}
		}
		timer=setTimeout("vazYnamani()",2000)
}
function vazYnamani() {
		var messa=mes[i_mes]
		txtNamani=messa.split("")
		if (document.all) {
			for (i=0;i<=txtNamani.length-1;i++) {
				var thisspan = eval("document.all.span"+i)
    			thisspan.innerHTML="<p style='font-family:"+poLnamani+";font-size:"+taiLnamani+";color:"+couLnamani+"'>"+txtNamani[i]+"</p>"
			}
		}
		if (document.layers) {
			for (i=0; i<txtNamani.length-1; i++) {
    			var thisspan=eval("document.span"+i+".document")
    			thisspan.write("<p><font size="+taiLnamani+" color="+couLnamani+" face="+poLnamani+">"+txtNamani[i]+"</font></p>")
				thisspan.clear()
    		}
		}
		i_mes++ 
		if (i_mes>=mes.length) {i_mes=0}
		finalxpos=namaniH
		i_path=0
		timer=setTimeout("vazNamani()",1000)
}
// http://www.namani.net -->
</script>
<STYLE>
A {
	position:absolute; 
	top:250px; 
	left:8px; 
	color:FFFFFF;
	font-size:9pt;
	font-family:Verdana;
	font-weight:bold;
}

.spanstyle {
	position:absolute;
	visibility:visible;
	left:5000px;
}
</STYLE>