Forum d'entraide PHPFrance

Bonjour !

J'aimerai faire un script mais je n'y arrive pas.. quelqun pourrait-il m'aider ?

Voilà ce à quoi il faudrait arriver :

Exemple de texte : a - b - c - d- e

Il faudrait que chaque lettre et caractère se mette en gras mais selon un ordre de temps bien précis :

1. "a" en gras (une unité de temps)

2. "a" + "-" en gras (seulement "-" en gras) (environ 1/4 d'unité de temps)

3. "a" + "-" + "b" en gras (seulement "b" en gras)(environ 1/4 d'unité de temps), puis cela reprend en 1.

3. à la fin du cycle, le dernier mot revient normal en même temps que le premier mot se met en gras (pas de pause).

Je sais que ce n'est pas des plus clair mais si vous pouvez m'aider ça m'arrangerait beaucoup.

Merci d'avance..

A priori, pour cela il te faut commencer par entourer tes lettres de <span> avec un id pour les identifier facilement avec un getElementById()

Il te faut ensuite faire une fonction qui changera le style de chaque span en le passant en gras (et enlevera celui du précédent). Tu peux pour cela utiliser une variable globale ou un tableau qui te permettra de savoir où tu en es dans ta chaine.

Il ne te restera alors qu'à utiliser un setTimeout() pour déclencher les événements à la suite les uns des autres

voilà pour les grandes lignes

Voilà ce qui a déjà été fait.. mais je sais qu'il y a des choses inutiles.. par contre, pour l'instant ca ne fait que se mettre en rouge l'un après l'autre.. et je n'arrive pas à faire comme j'ai décrit plus haut..

Désolée je suis une débutante..

---

function titleblink(element, classe, sens, normalsize, size, maxsize, delay)
{
	var nextelement;
	var conception = document.getElementById('conception');
	var fleche = document.getElementById('fleche');
	var developpement = document.getElementById('developpement');
	var fleche1 = document.getElementById('fleche1');
	var construction = document.getElementById('construction');
	var fleche2 = document.getElementById('fleche2');
	var dessins = document.getElementById('dessins');
	var fleche3 = document.getElementById('fleche3');
	var prototypes = document.getElementById('prototypes');

	nextelement = element;
	if (classe == 'off')
	{
		switch (element)
		{
			case 'conception':
				conception.style.color='#000';
				conception.style.fontSize=normalsize;
				conception.style.fontWeight='normal';
				conception.style.zIndex='1';
				nextelement = 'fleche';
				break;
				case 'fleche':
				fleche.style.color='#000';
				fleche.style.fontSize='14pt';
				fleche.style.fontWeight='normal';
				fleche.style.zIndex='1';
				nextelement = 'developpement';
				break;
			case 'developpement':
				developpement.style.color='#000';
				developpement.style.fontSize=normalsize;
				developpement.style.fontWeight='normal';
				developpement.style.zIndex='1';
				nextelement = 'fleche1';
				break;
				case 'fleche1':
				fleche1.style.color='#000';
				fleche1.style.fontSize='14pt';
				fleche1.style.fontWeight='normal';
				fleche1.style.zIndex='1';
				nextelement = 'construction';
				break;
			case 'construction':
				construction.style.color='#000';
				construction.style.fontSize=normalsize;
				construction.style.fontWeight='normal';
				construction.style.zIndex='1';
				nextelement = 'fleche2';
				break;
				case 'fleche2':
				fleche2.style.color='#000';
				fleche2.style.fontSize='14pt';
				fleche2.style.fontWeight='normal';
				fleche2.style.zIndex='1';
				nextelement = 'dessins';
				break;
			case 'dessins':
				dessins.style.color='#000';
				dessins.style.fontSize=normalsize;
				dessins.style.fontWeight='normal';
				dessins.style.zIndex='1';
				nextelement = 'fleche3';
				break;
				case 'fleche3':
				fleche3.style.color='#000';
				fleche3.style.fontSize='14pt';
				fleche3.style.fontWeight='normal';
				fleche3.style.zIndex='1';
				nextelement = 'prototypes';
				break;
			case 'prototypes':
				prototypes.style.color='#000';
				prototypes.style.fontSize=normalsize;
				prototypes.style.fontWeight='normal';
				prototypes.style.zIndex='1';
				nextelement = 'conception';
		}
		classe = 'on';
	}
	else
	{
		if (sens == 'up' && size < maxsize)
		{
			size += 1;
		}
		if (sens == 'down' && size > normalsize)
		{
			size -= 1;
		}
		switch (element)
		{
			case 'conception':
				conception.style.color='#f00';
				conception.style.fontSize=size;
				conception.style.fontWeight='';
				conception.style.zIndex='2';
				break;
			case 'fleche':
				fleche.style.color='#f00';
				fleche.style.fontSize='14pt';
				fleche.style.fontWeight='';
				fleche.style.zIndex='2';
				break;
			case 'developpement':
				developpement.style.color='#f00';
				developpement.style.fontSize=size;
				developpement.style.fontWeight='';
				developpement.style.zIndex='2';
				break;
				case 'fleche1':
				fleche1.style.color='#f00';
				fleche1.style.fontSize='14pt';
				fleche1.style.fontWeight='';
				fleche1.style.zIndex='2';
				break;
			case 'construction':
				construction.style.color='#f00';
				construction.style.fontSize=size;
				construction.style.fontWeight='';
				construction.style.zIndex='2';
				break;
				case 'fleche2':
				fleche2.style.color='#f00';
				fleche2.style.fontSize='14pt';
				fleche2.style.fontWeight='';
				fleche2.style.zIndex='2';
				break;
			case 'dessins':
				dessins.style.color='#f00';
				dessins.style.fontSize=size;
				dessins.style.fontWeight='';
				dessins.style.zIndex='2';
				break;
				case 'fleche3':
				fleche3.style.color='#f00';
				fleche3.style.fontSize='14pt';
				fleche3.style.fontWeight='';
				fleche3.style.zIndex='2';
				break;
			case 'prototypes':
				prototypes.style.color='#f00';
				prototypes.style.fontSize=size;
				prototypes.style.fontWeight='';
				prototypes.style.zIndex='2';
		}
	functionstring = "titleblink('"+nextelement+"','"+classe+"','"+sens+"',"+normalsize+","+size+","+maxsize+","+delay+");";
	setTimeout(functionstring,delay);

Je ferai attention la prochaine fois..

En attendant, si quelqun pourrait m'aider pour résoudre mon problème..

Merci !