Se connecter avec
S'enregistrer | Connectez-vous

Taille de caractères avec Javascript

Dernière réponse : dans Programmation

Bonjour,

Je suis complètement novice en language de programmation, aussi j'utilise des scripts prêt à l'emploi pour mon blog sur canalblog.

Malheureusement je n'arrive pas à augmenter la taille de ma police pour le script suivant, que dois je faire ???
Merci d'avance pour votre aide. 
  1. <h2>
    

  2. <script type="text/javascript" language="JavaScript1.2">// <![CDATA[
    

  3. //Neon Lights Text II by G.P.F. (gpf@beta-cc.de)
    

  4. //visit <a href="http://www.beta-cc.de" target="_blank">http://www.beta-cc.de</a>
    

  5. //Visit <a href="http://www.dynamicdrive.com" target="_blank">http://www.dynamicdrive.com</a> for this script
    

  6. var message="Bienvenue dans mon Jardin !"
    

  7. var neonbasecolor="lightcoral"
    

  8. var neontextcolor="red"
    

  9. var neontextcolor2="#FFFFA8"
    

  10. var flashspeed=100 // speed of flashing in milliseconds
    

  11. var flashingletters=3 // number of letters flashing in neontextcolor
    

  12. var flashingletters2=1 // number of letters flashing in neontextcolor2 (0 to disable)
    

  13. var flashpause=0 // the pause between flash-cycles in milliseconds
    

  14. ///No need to edit below this line/////
    

  15. var n=0
    

  16. if (document.all||document.getElementById){
    

  17. document.write('<font color="'+neonbasecolor+'">')
    

  18. for (m=0;m<message.length;m++)
    

  19. document.write('<span id="neonlight'+m+'">'+message.charAt(m)+'</span>')
    

  20. document.write('</font>')
    

  21. }
    

  22. else
    

  23. document.write(message)
    

  24. function crossref(number){
    

  25. var crossobj=document.all? eval("document.all.neonlight"+number) : document.getElementById("neonlight"+number)
    

  26. return crossobj
    

  27. }
    

  28. function neon(){
    

  29. //Change all letters to base color
    

  30. if (n==0){
    

  31. for (m=0;m<message.length;m++)
    

  32. crossref(m).style.color=neonbasecolor
    

  33. }
    

  34. //cycle through and change individual letters to neon color
    

  35. crossref(n).style.color=neontextcolor
    

  36. if (n>flashingletters-1) crossref(n-flashingletters).style.color=neontextcolor2
    

  37. if (n>(flashingletters+flashingletters2)-1) crossref(n-flashingletters-flashingletters2).style.color=neonbasecolor
    

  38. if (n<message.length-1)
    

  39. n++
    

  40. else{
    

  41. n=0
    

  42. clearInterval(flashing)
    

  43. setTimeout("beginneon()",flashpause)
    

  44. return
    

  45. }
    

  46. }
    

  47. function beginneon(){
    

  48. if (document.all||document.getElementById)
    

  49. flashing=setInterval("neon()",flashspeed)
    

  50. }
    

  51. beginneon()
    

  52. // ]]></script>

Autres pages sur : taille caracteres javascript

Lassé par la pub ? Créez un compte
Expert Programmation

:ange:  Pardon Grand Maître ( ;)  )... mais c'est vrai que le rouge n'apparaîssant pas dans les balise [code], j'ai opté pour
par facilité... Promis juré ! Je ne recommencerai pas... (jusqu'à la prochaine fois ?).

LudoTools a dit :
Bonjour,

En ligne 17, ajoute le texte en rouge
Citation :
document.write('<font color="'+neonbasecolor+'" size="14pt">')

Si tu veux une taille de texte plus grande, augmante le chiffre et vice-versa...



Bonjour,

Merci beaucoup de ton aide, j'ai modifié ma ligne texte comme tu me l'a conseillé, cela fonctionne malheureusement j'ai un petit souci : quelque soit taille indiquée, les caractères ne changent plus, ils restent trop gros !!
C'est comme si j'avais ou tout ou rien...Je ne comprends pas ??

Aurais tu une solution ??
Merci mille fois.

LudoTools a dit :
:??:  Aurais-tu une feuille de style (CSS) qui définie la taille de la police de ton site ?... je ne vois que ça qui gênerait.



Non je ne pense pas avoir cette feuille de style : à vrai dire je ne sais même pas ce que signifie "CSS"...

Merci beaucoup pour ton aide mais je vais encore chercher !
Malgré mon ignorance, je suis têtue et persévérante, je ne laisserai pas tomber tant que je n'aurai pas trouvé la solution !!

Au fait y a-t-il une différence entre "size' et "font size" ?

A bientôt.
Expert Programmation

size est un des attributs de la balise <FONT>... en HTML.

:ange:  et à ce sujet, je t'ai écrit des c0nn3ries... ce n'est pas size="14pt" qu'il aurait fallu écrire (ça c'est bon dans une feuille de style) mais size=x avec x=1,2,3,4,5,6 ou 7, sachant que la taille dite normale est 3...
Tu peux aussi écrire size=+1 (augmente la taille de 1, passe de 3 à 4) pour plus grand,
ou bien size=-1 (diminue la taille de 1, passe de 3 à 2) pour plus petit...

Désolé de t'avoir laissé patauger si longtemps...


PS : CSS = Cascading Style Sheet (Feuille de Style en Cascade)

LudoTools a dit :
size est un des attributs de la balise <FONT>... en HTML.

:ange:  et à ce sujet, je t'ai écrit des c0nn3ries... ce n'est pas size="14pt" qu'il aurait fallu écrire (ça c'est bon dans une feuille de style) mais size=x avec x=1,2,3,4,5,6 ou 7, sachant que la taille dite normale est 3...
Tu peux aussi écrire size=+1 (augmente la taille de 1, passe de 3 à 4) pour plus grand,
ou bien size=-1 (diminue la taille de 1, passe de 3 à 2) pour plus petit...

Désolé de t'avoir laissé patauger si longtemps...


PS : CSS = Cascading Style Sheet (Feuille de Style en Cascade)



Génial !!! Cela fonctionne ! T'es vraiment super sympa de m'avoir aidé !!!
Il ne me reste plus qu' à trouver une solution pour centrer mon texte, aurais tu aussi une solution ?

Merci merci
Expert Programmation

:)  content pour toi...

Si tu veux centrer le texte, il ne faut pas qu'il y ait quoi que ce soit à droite et à gauche de ton "titre néon"...
En ligne 19, il y a :
  1. document.write('<span id="neonlight'+m+'">'+message.charAt(m)+'</span>')


Un <span> est une zone de texte... juste une portion de texte, qui accepte des "objets" (texte ou images) a ses côtés. Ce n'est pas une balise "bloc", mais une balise "en ligne".
Donc il faut que tu "transformes" cette zone en "bloc"...

Deux soluces :
1/ tu remplaces le terme <span id... par <div id..., sans oublier les balises de fermeture : </span> devient </div>.
Pour centrer, il suffit d'ajouter style="margin:10px auto;text-align:center" entre <div et id="neonlight"....
Cela mettra un espace de 10 pixels en haut et en bas du bloc DIV, et laissera le navigateur calculer l'espace à gauche et à droite pour centrer le bloc dans la page.

2/ moins "conventionnel" mais tout aussi acceptable, tu "forces" la balise SPAN à devenir une zone de type bloc :
<span style="display:block;margin:10px auto;text-align:center" id="neonlight'+...

N'oublies pas de jetter un oeil au lien sur le CSS...
A+, Bonne mise en page...

LudoTools a dit :
:)  content pour toi...

Si tu veux centrer le texte, il ne faut pas qu'il y ait quoi que ce soit à droite et à gauche de ton "titre néon"...
En ligne 19, il y a :
  1. document.write('<span id="neonlight'+m+'">'+message.charAt(m)+'</span>')


Un <span> est une zone de texte... juste une portion de texte, qui accepte des "objets" (texte ou images) a ses côtés. Ce n'est pas une balise "bloc", mais une balise "en ligne".
Donc il faut que tu "transformes" cette zone en "bloc"...

Deux soluces :
1/ tu remplaces le terme <span id... par <div id..., sans oublier les balises de fermeture : </span> devient </div>.
Pour centrer, il suffit d'ajouter style="margin:10px auto;text-align:center" entre <div et id="neonlight"....
Cela mettra un espace de 10 pixels en haut et en bas du bloc DIV, et laissera le navigateur calculer l'espace à gauche et à droite pour centrer le bloc dans la page.

2/ moins "conventionnel" mais tout aussi acceptable, tu "forces" la balise SPAN à devenir une zone de type bloc :
<span style="display:block;margin:10px auto;text-align:center" id="neonlight'+...

N'oublies pas de jetter un oeil au lien sur le CSS...
A+, Bonne mise en page...




Salut Ludo Tools,

J'ai testé tes 2 solutions : cela me donne à chaque fois un texte en vertical au lieu d'un centrage.... Bizarre non ?!!
Si tu as encore une astuce, fais moi signe.

Je me suis tout de même débrouillée pour un résultat satisfaisant, mais va falloir que je potasse dur en HTML : j'ai encore bien du boulot avant de tout assimiler !!!.....

Merci beaucoup
A+

La Beline

LudoTools a dit :
Peux-tu me copier ton script tel qu'il est maintenant ?... et aussi la partie html ou le script "écrit" ton "néon"...
(le tout entre les balise 
  1.  
)


Voici mon script :

  1. <h2>
    

  2. <script type="text/javascript" language="JavaScript1.2">// <![CDATA[
    

  3. //Neon Lights Text II by G.P.F. (gpf@beta-cc.de)
    

  4. //visit <a href="http://www.beta-cc.de" target="_blank">http://www.beta-cc.de</a>
    

  5. //Visit <a href="http://www.dynamicdrive.com" target="_blank">http://www.dynamicdrive.com</a> for this script
    

  6. var message="Bienvenue dans mon Jardin, bonne visite..."
    

  7. var neonbasecolor="darksalmon"
    

  8. var neontextcolor="red"
    

  9. var neontextcolor2="#FFFFA8"
    

  10. var flashspeed=100	// speed of flashing in milliseconds
    

  11. var flashingletters=3	// number of letters flashing in neontextcolor
    

  12. var flashingletters2=1	// number of letters flashing in neontextcolor2 (0 to disable)
    

  13. var flashpause=0	// the pause between flash-cycles in milliseconds
    

  14. ///No need to edit below this line/////
    

  15. var n=0
    

  16. if (document.all||document.getElementById){
    

  17. document.write('<font color="'+neonbasecolor+'" size=+2>')
    

  18. for (m=0;m<message.length;m++)
    

  19. document.write('<span id="neonlight'+m+'">'+message.charAt(m)+'</span>')
    

  20. document.write('</font>')
    

  21. }
    

  22. else
    

  23. document.write(message)
    

  24. function crossref(number){
    

  25. var crossobj=document.all? eval("document.all.neonlight"+number) : document.getElementById("neonlight"+number)
    

  26. return crossobj
    

  27. }
    

  28. function neon(){
    

  29. //Change all letters to base color
    

  30. if (n==0){
    

  31. for (m=0;m<message.length;m++)
    

  32. crossref(m).style.color=neonbasecolor
    

  33. }
    

  34. //cycle through and change individual letters to neon color
    

  35. crossref(n).style.color=neontextcolor
    

  36. if (n>flashingletters-1) crossref(n-flashingletters).style.color=neontextcolor2
    

  37. if (n>(flashingletters+flashingletters2)-1) crossref(n-flashingletters-flashingletters2).style.color=neonbasecolor
    

  38. if (n<message.length-1)
    

  39. n++
    

  40. else{
    

  41. n=0
    

  42. clearInterval(flashing)
    

  43. setTimeout("beginneon()",flashpause)
    

  44. return
    

  45. }
    

  46. }
    

  47. function beginneon(){
    

  48. if (document.all||document.getElementById)
    

  49. flashing=setInterval("neon()",flashspeed)
    

  50. }
    

  51. beginneon()
    

  52. // ]]></script>
    

  53. </h2>
Expert Programmation

hum... entre les balises <H2>, c'est normal que tu ne puisses pas centrer ton texte... par défaut, une balise H a un texte aligné à gauche.
Donc c'est là, à la place de <H2> et </H2> qu'il te faut mettre le "bloc centré"...
A la place de <H2> en ligne 1, tu mets <div style="width:100%;text-align:center;margin:10px auto;">
et à la place de </H2> en ligne 53, tu mets </div>
Expert Programmation

Salut,

Et pourquoi ne pas appliquer ce style à <h2> directement ?
<h2> est une balise "block" comme une autre.

Ainsi la hiérarchie des titres serait conservée. C'est bien le fond qui doit primer sur la forme.

LudoTools a dit :
Tout à fait mon cher Thierry.... :sol: 

Toutefois, ne sachant pas si la beline avait tenté ainsi de modifier la taille des caractères (son but initial), j'ai opté pour une DIV...



Bonsoir Ludo,

J'ai suivi tes conseils, mon texte est bien centré !
Par contre (histoire de te contrarier un peu) la taille des marges ne bouge pas, elles restent les mêmes que j'indique 10px ou 30 px : rien ne change !

Pour la remarque de Zeb, je suis un petit peu ou :lol:  :pt1cable:  :pt1cable:  :pt1cable:  :pt1cable:  beaucoup bouchée....Mais je n'ai pas tout compris : dois je laisser <h2> ?

Encore mille merci de me consacrer ton temps.

A+

La beline
Expert Programmation

Comme le faisait remarquer (très justement) Zeb, la balise <H2> est une balise de type bloc, elle est utilisée dans la hierarchie des titres habituellement (du plus gros titre, H1, au plus petit, H6).

Perso, je supprimerai la balise H, pour mettre une DIV... après tout, ton effet néon est un peu comme un bandeau-image, un objet flash... mais n'est pas un titre d'une des rubriques de ton site... non ?

Quant à l'espacement, 10 ou 30 px, c'est une marge entre le haut de la DIV et ce qui est au-dessus (ainsi qu'entre le bas de la DIV et ce qui est en dessous). Cela n'influencera pas la marge intérieure de la DIV (ça, c'est le "padding"), donc, quand tu mets 30px, si ton néon est positionné en début de page, tu devrai le voir légèrement plus bas, par rapport au haut de la page que si tu indiques 10px... mais bon, 20 pixels de différence, c'est léger. En tout cas, cela ne change pas sa hauteur (liée à la taille de la police d'écriture).

LudoTools a dit :
Comme le faisait remarquer (très justement) Zeb, la balise <H2> est une balise de type bloc, elle est utilisée dans la hierarchie des titres habituellement (du plus gros titre, H1, au plus petit, H6).

Perso, je supprimerai la balise H, pour mettre une DIV... après tout, ton effet néon est un peu comme un bandeau-image, un objet flash... mais n'est pas un titre d'une des rubriques de ton site... non ?

Quant à l'espacement, 10 ou 30 px, c'est une marge entre le haut de la DIV et ce qui est au-dessus (ainsi qu'entre le bas de la DIV et ce qui est en dessous). Cela n'influencera pas la marge intérieure de la DIV (ça, c'est le "padding"), donc, quand tu mets 30px, si ton néon est positionné en début de page, tu devrai le voir légèrement plus bas, par rapport au haut de la page que si tu indiques 10px... mais bon, 20 pixels de différence, c'est léger. En tout cas, cela ne change pas sa hauteur (liée à la taille de la police d'écriture).



:hello:  Hello,

Merci pour toutes ces précisions Ludo.
Je pensais que le centrage d'un texte dépendait des marges de gauche et de droite...
Je ne comprends pas trop comment faire pour scinder le "Bienvenue dans mon Jardin" du "Bonne visite".
En effet je souhaiterai que "Bonne visite" soit centrer sous "Bienvenue dans mon Jardin"en laissant une ligne entre les 2 blocs de texte.

Or dans le cas présent seul le mot "visite" vient se centrer sous "Bienvenue dans mon Jardin, Bonne" et il manque une interligne..

Décidément, c'est pas évident tout ça !

Expert Programmation

Citation :
comment faire pour scinder le "Bienvenue dans mon Jardin" du "Bonne visite".
?
Hé bien tout simplement en scindant la phrase !-)
Quelle balise permet de faire un retour à la ligne ?... la balise <BR /> bien sûr !
Résultat : "Bienvenue dans mon Jardin<BR />Bonne visite"...

Je sais... tu vas te précipiter pour me dire "merci" :non:  et puis après avoir essayé, tu vas être déçu :pfff:  ...

Ben oui, ça ne marchera pas... lisons le code en ligne 19 :
  1. document.write('<span id="neonlight'+m+'">'+message.charAt(m)+'</span>')

message.charAt(m) c'est quoi ça ?...

message, c'est la variable dans laquelle il y a ta phrase (une variable chaîne de caractères).
charAt(), c'est une fonction javascript qui va lire un caractère dans une chaîne à une position donnée.
Ici, la position est indiqué par la variable m - incrémentée en ligne 18 par la boucle for (m=0;m<message.length;m++) qui dit (en clair) : pour m=0 ; jusqu'à m inférieur à longueur.message ; exécuter le code entre parenthèse puis faire m = m+1 .

Donc, si tu mets une balise <BR /> dans ta "phrase", elle va être interprétée caractère par caractère et non pas en tant que balise HTML... :cry: 

Bon d'accord ! mais y a-t-il une solution ? :heink: 

:sol:  o , u , i... oui, sinon je ne m'embêterai pas à écrire tout ça...

Puisque dans ton code "néon" la phrase n'est pas interpretée mais décortiquée, on aurait pu pensermettre un "piège" qui insèrera une balise <BR /> là où tu le veux (bien grand mot pour petite chose)...
:(  ça march'pô !...

Alors ?... ben yapuka ifokon !
il n'y a plus qu'à trouver la bonne largeur en pixel pour scinder la phrase...
il faut qu'on teste... et on trouve aproximativement : <div style="width:390px; text-align:center; margin:10px auto;">

Bien sûr, si tu changes la taille des caractères, la largeur changera ! En plus, ce n'est pas dit que cela se présente bien sur tout les navigateurs... 390 pixels c'est bon sous FireFox3.3.16, avec un size=+3 ! à toi de faire des tests :hello: 
Expert Programmation

.... :heink: 

Et un truc du genre :
  1. var flag_balise = 0;
  2. for (m=0;m<message.length;m++) {
  3.   if (message.charAt(m) == '<') flag_balise++;
  4.   if (message.charAt(m) == '>') flag_balise--;
  5.   if (flag_balise == 0) document.write('<span id="neonlight'+m">');
  6.   document.write(message.charAt(m));
  7.   if (flag_balise == 0) document.write('</span>');
  8. }


Non testé. En plus, je ne suis pas sûr de la syntaxe. Lulu, tu peux faire des commentaires et des critiques, steuplé ?
Expert Programmation

Et un truc du genre :
[code=html a dit :
  1. var flag_balise = 0;
  2. for (m=0;m<message.length;m++) {
  3.   if (message.charAt(m) == '<') flag_balise++;
  4.   if (message.charAt(m) == '>') flag_balise--;
  5. 	if (flag_balise == 0) document.write('<span id="neonlight'+m+'">');
  6. 	document.write(message.charAt(m));
  7. 	if (flag_balise == 0) document.write('</span>');
  8. }

Non testé. En plus, je ne suis pas sûr de la syntaxe. Lulu, tu peux faire des commentaires et des critiques, steuplé ?
]Et un truc du genre :
  1. var flag_balise = 0;
  2. for (m=0;m<message.length;m++) {
  3.   if (message.charAt(m) == '<') flag_balise++;
  4.   if (message.charAt(m) == '>') flag_balise--;
  5. 	if (flag_balise == 0) document.write('<span id="neonlight'+m+'">');
  6. 	document.write(message.charAt(m));
  7. 	if (flag_balise == 0) document.write('</span>');
  8. }

Non testé. En plus, je ne suis pas sûr de la syntaxe. Lulu, tu peux faire des commentaires et des critiques, steuplé ?
[/code]
:p  Ben c'était ma première approche...
Un petit essai avec '<br />'... la balise est décomposée en '<' 'b' 'r' ' ' '/' '>'... donc, pas glop...
Puis j'ai voulu ruser avec un astérisque et un if... == '*'
  1. for (m=0;m<message.length;m++) {
  2.   if (message.charAt(m) == '*') {
  3.     document.write('<br />');
  4.   } else {
  5.     document.write('<span id="neonlight'+m">+message.charAt(m))+'</span>');
  6.   }

résultat ?... pas glop non plus :heink: 

En fait, le script décortique la "phrase" à plusieurs endroits... et cycle certaines fonctions suivant le nombre de caractères de la phrase... donc dès qu'il y a un retour à la ligne ou un code quelconque, ben le script ne comprend plus rien et, soit affiche la phrase sans effet, soit n'affiche rien, boucle sur une erreur JS, etc... tout serait à reprendre :pt1cable:  (j'ai la flemme ;-)



Expert Programmation

:pfff:  pas compris ?... oh que si ! :ouch: 
Je me suis même fait la réflexion (tout seul comme un grand ;-) que d'ajouter un flag était judicieux... mais, désolé pour toi, ça ne marche pô...
edit : par acquis de conscience, je viens de tester pour être sûr

Spoiler
Pour ce qui est de regarder, j'ai bien vu que tu proposai une simple-quote en trop à... document.write('message.charAt(m)); :sol: 


Non... le "blème" est que plus loin dans le script, function crossref(number), function neon() font appel à nouveau à la chaîne de caractère et à sa longueur pour isoler, changer de couleur les caractères un par un... donc, partout, il faudrait (re-)tester : si c'est la balise on saute sinon on exécute...

Le script n'est pas mal du tout... mais pour une chaîne de caractères sans code html... d'où ma solution de "facilité" (je te l'accorde) de fixer la largeur de la DIV afin qu'un retour à la ligne se fasse seul...
Expert Programmation

Ah ? Le code n'est pas factorisé et on se retrouve avec dix fois la même chose à un ptit rien de différence.... C'est programmé avec les pieds, quoi !

Tout ça pour un effet néon ... plop, plop, plop ...

[mode modérateur de mauvaise foi = ON]
Où ça une quote en trop ? [:patch]
Expert Programmation

:D  hihihi... tout à fait.

Allez, comme ch'ui pô un méchant (?!!! aucun rapport !), voilà un ch'ti bout de code qui fait joli, simple, et accepte les balises <BR /> !
  1. <html>
    

  2. <head>
    

  3. 	<title>Neon...</title>
    

  4.  
  5. <SCRIPT language=JavaScript type=text/javascript>
    

  6. var message="Ici votre texte !...";
    

  7. var coul1="black"; //couleur de base
    

  8. var coul2="gold"; // couleur qui "flashe"
    

  9. var police="Verdana"; // Police d'écriture
    

  10. var taille=48; // Taille de la Police
    

  11. var gras=1; // Texte en gras ? 1=oui, 0=non
    

  12. var postop=100; // position absolue depuis le haut
    

  13. var posleft=350; // position absolue depuis la gauche... pour centrer ? :-))
    

  14.  
  15. // si possible ne rien (ou pas grand chose) modifier ci-après...
    

  16. var x=0,i=message.length;
    

  17. for (z=0; z<3; z++){
    

  18.   document.write('<div id="txt'+z+'" style="position:absolute;top:'+postop+'px;left:'+posleft+'px;color:');
    

  19.   document.write((z==1)?coul1:coul2);
    

  20.   document.write(';z-index:'+z+';font: normal normal ');
    

  21.   document.write((gras==1)?'bold ':'normal ');
    

  22.   document.write(taille+'px/1.2em '+police+', sans-serif;">'+message+'</div>');
    

  23. }
    

  24.  
  25. function chgcoul() {
    

  26. 	if(x<=message.length) {
    

  27.     document.getElementById("txt1").innerHTML=message.substring(x,0);
    

  28. 	  document.getElementById("txt0").innerHTML=message;
    

  29. 	  x+=1;
    

  30. 	} else {
    

  31. 	  if(i>=0) {
    

  32. 	    document.getElementById('txt2').innerHTML=message.substring(i,0);
    

  33. 			i-=1;
    

  34. 		} else {
    

  35. 	    x=0;
    

  36. 		  i=message.length;
    

  37. 	  }
    

  38. 	}
    

  39.   setTimeout("chgcoul();",35);
    

  40. }
    

  41. </SCRIPT>
    

  42. </head>
    

  43. <BODY onload="chgcoul();">
    

  44. </body>
    

  45. </html>

Faire un copier/coller avec notepad (par ex.) puis nomer le fichier neon.html et... click-click dessus :sol: 

LudoTools a dit :
:D  hihihi... tout à fait.

Allez, comme ch'ui pô un méchant (?!!! aucun rapport !), voilà un ch'ti bout de code qui fait joli, simple, et accepte les balises <BR /> !
  1. <html>
    

  2. <head>
    

  3. 	<title>Neon...</title>
    

  4.  
  5. <SCRIPT language=JavaScript type=text/javascript>
    

  6. var message="Ici votre texte !...";
    

  7. var coul1="black"; //couleur de base
    

  8. var coul2="gold"; // couleur qui "flashe"
    

  9. var police="Verdana"; // Police d'écriture
    

  10. var taille=48; // Taille de la Police
    

  11. var gras=1; // Texte en gras ? 1=oui, 0=non
    

  12. var postop=100; // position absolue depuis le haut
    

  13. var posleft=350; // position absolue depuis la gauche... pour centrer ? :-))
    

  14.  
  15. // si possible ne rien (ou pas grand chose) modifier ci-après...
    

  16. var x=0,i=message.length;
    

  17. for (z=0; z<3; z++){
    

  18.   document.write('<div id="txt'+z+'" style="position:absolute;top:'+postop+'px;left:'+posleft+'px;color:');
    

  19.   document.write((z==1)?coul1:coul2);
    

  20.   document.write(';z-index:'+z+';font: normal normal ');
    

  21.   document.write((gras==1)?'bold ':'normal ');
    

  22.   document.write(taille+'px/1.2em '+police+', sans-serif;">'+message+'</div>');
    

  23. }
    

  24.  
  25. function chgcoul() {
    

  26. 	if(x<=message.length) {
    

  27.     document.getElementById("txt1").innerHTML=message.substring(x,0);
    

  28. 	  document.getElementById("txt0").innerHTML=message;
    

  29. 	  x+=1;
    

  30. 	} else {
    

  31. 	  if(i>=0) {
    

  32. 	    document.getElementById('txt2').innerHTML=message.substring(i,0);
    

  33. 			i-=1;
    

  34. 		} else {
    

  35. 	    x=0;
    

  36. 		  i=message.length;
    

  37. 	  }
    

  38. 	}
    

  39.   setTimeout("chgcoul();",35);
    

  40. }
    

  41. </SCRIPT>
    

  42. </head>
    

  43. <BODY onload="chgcoul();">
    

  44. </body>
    

  45. </html>

Faire un copier/coller avec notepad (par ex.) puis nomer le fichier neon.html et... click-click dessus :sol: 



Ouh là là!!!
Je n'aurai jamais pensé que ma question génère autant de discussions.....
J'ai tout lu..........Mais suis trop fatiguée pour faire les essais qui s'imposent ce soir :sleep: 
Promis je vois ça à tête reposée ce week end ! Je suis raplapla, il me faut toute ma lucidité pour décrypter les messages, n'oublions pas que je suis novice !
Merci mille fois de ton aide Ludo et merci aussi à Zeb :wahoo: 

A bientôt

Hello Ludo

Merci pour tous tes conseils !
Pour le centrage j'ai fais des essais mais cela n'est pas satisfaisant. Je me suis tout de même débrouillée pour mon "titre néon" et suis contente du résultat.

Par contre, j'ai testé ton code en faisant un "copier coller", cela ne donne absolument RIEN !! Suis je trop bète ??!! :fou: 
Faut il effacer les numéros devant chaque ligne ?....Comprends pas ?


Sinon j'ai encore du travail à te proposer concernant la TAILLE des caractères, voici ci-dessous un nouveau code :
Je souhaiterai augmenter la taille de la police mais aussi en changer la couleur, est ce possible ?

Encore des millions de "merci" pour tout le temps que tu me consacres !!! Comment fais tu d'ailleurs ? Tu amènes ton ordi au boulot ? :lol: 

A bientôt j'espère 

  1. [cpp]<p style="text-align: center;"> </p>
    

  2. <p style="text-align: center;"> </p>
    

  3. <script type="text/javascript" language="JavaScript">// <![CDATA[
    

  4. //PLF-<a href="http://www.jejavascript.net/" target="_blank">http://www.jejavascript.net/</a>
    

  5. var position=0;
    

  6. var msg="Vous visitez le Jardin de la Beline...Bonne promenade !.. ";
    

  7. var msg=" "+msg;
    

  8. var longue=msg.length;
    

  9. var fois=(70/msg.length)+1;
    

  10. for(i=0;i<=fois;i++) msg+=msg;
    

  11. function textdefil() {
    

  12. document.form1.deftext.value=msg.substring(position,position+70);
    

  13. position++;
    

  14. if(position == longue) position=0;
    

  15. setTimeout("textdefil()",100);
    

  16. }
    

  17. window.onload = textdefil;
    

  18. // ]]></script>
    

  19. <form name="form1">
    

  20. <div align="center"><input type="text" name="deftext" size="70" /></div>
    

  21. </form>
[/cpp]
Expert Programmation

Citation :
Suis je trop bète ??!! ... Faut il effacer les numéros devant chaque ligne ?....Comprends pas ?

Ben si tu comprends !... Mais t'es une vraie beline... :bounce:  tu fonces d'abord et réfléchis après ;-)) :D 

As-tu remarqué que lorsque tu poste du code, les balises CODE du forum ajoutent des numéros de ligne... ben faut les enlever !

Pour ta deuxième question, c'est faisable... ligne 20 tu as un input, il suffit de lui appliquer le style que tu souhaite (en CSS) : <input type="text" style="... tu suis ? :) 

Citation :
Comment fais tu d'ailleurs ? Tu amènes ton ordi au boulot
:non:  mais j'ai l'avantage d'être "jeune" retraité :sol: 

LudoTools a dit :
Citation :
Suis je trop bète ??!! ... Faut il effacer les numéros devant chaque ligne ?....Comprends pas ?

Ben si tu comprends !... Mais t'es une vraie beline... :bounce:  tu fonces d'abord et réfléchis après ;-)) :D 

As-tu remarqué que lorsque tu poste du code, les balises CODE du forum ajoutent des numéros de ligne... ben faut les enlever !

Pour ta deuxième question, c'est faisable... ligne 20 tu as un input, il suffit de lui appliquer le style que tu souhaite (en CSS) : <input type="text" style="... tu suis ? :) 

Citation :
Comment fais tu d'ailleurs ? Tu amènes ton ordi au boulot
:non:  mais j'ai l'avantage d'être "jeune" retraité :sol: 




Bonsoir jeune retraité !

Lorsque je fais un "copier coller" dans mon wordpad, voilà ce que j'obtiens :
{\rtf1\ansi\ansicpg1252\deff0\deflang1036{\fonttbl{\f0\fswiss\fcharset0 Arial;}} {\*\generator Msftedit 5.41.21.2508;}\viewkind4\uc1\pard\f0\fs20 \par }

Par contre lorsque je fais un copier coller sur mon blog : un titre apparaît bien mais je ne vois aucun effet particulier !!! Est ce normal docteur Tools ??


Pour ma ligne 20, la beline que je suis a du mal à suivre :sweat:  Rien ne fonctionne !! Je te promets que je fais mon possible pourtant !

A bientôt
La beline en attente de sa retraite d'ici QUELQUES ANNEES...
:hello: 
Expert Programmation

De passage vite fait sur le site... :sol: 

Citation :
Lorsque je fais un "copier coller" dans mon wordpad, voilà ce que j'obtiens :
{\rtf1\ansi\ansicpg1252\deff0\deflang1036{\fonttbl{\f0\fswiss\fcharset0 Arial;}} {\*\generator Msftedit 5.41.21.2508;}\viewkind4\uc1\pard\f0\fs20 \par }

??? là tu ne fais pas un simple copier/coller... les premiers caractères indiquent que tu as édité le fichier (rtf = Rich Text Format)... alors laisse tomber WordPad pour écrire du HTML/CSS/JS/etc... c'est un petit traitement de texte, pas un éditeur fait pour ça...
Prends Notepad ("le bloc-note", au pire) le copier/coller sera plus facile... ou bien si l'anglais t'es familier, NoteTab Light...

Pour le <input> il faut définir le style que tu veux lui appliquer... cherche "CSS INPUT" dans ton moteur préféré... tu devrais avoir pas mal de résultats indiquant comment changer la taille, les bordures, la police, ... bref, le style des inputs (champs d'entrée de texte).

apluch'

LudoTools a dit :
De passage vite fait sur le site... :sol: 

Citation :
Lorsque je fais un "copier coller" dans mon wordpad, voilà ce que j'obtiens :
{\rtf1\ansi\ansicpg1252\deff0\deflang1036{\fonttbl{\f0\fswiss\fcharset0 Arial;}} {\*\generator Msftedit 5.41.21.2508;}\viewkind4\uc1\pard\f0\fs20 \par }

??? là tu ne fais pas un simple copier/coller... les premiers caractères indiquent que tu as édité le fichier (rtf = Rich Text Format)... alors laisse tomber WordPad pour écrire du HTML/CSS/JS/etc... c'est un petit traitement de texte, pas un éditeur fait pour ça...
Prends Notepad ("le bloc-note", au pire) le copier/coller sera plus facile... ou bien si l'anglais t'es familier, NoteTab Light...

Pour le <input> il faut définir le style que tu veux lui appliquer... cherche "CSS INPUT" dans ton moteur préféré... tu devrais avoir pas mal de résultats indiquant comment changer la taille, les bordures, la police, ... bref, le style des inputs (champs d'entrée de texte).

apluch'



Hello Docteur Tools,

Je viens de télécharger notepad++ sur le net. J'ai fait un copier coller de ton programme ci-dessous. De la couleur vient agrémenter le texte. Je l'enregistre en fichier html mais ensuite je ne comprends pas comment obtenir le résultat attendu ?

  1. <html>
    

  2.     <head>
    

  3.         <title>Neon...</title>
    

  4.     <SCRIPT language=JavaScript type=text/javascript>
    

  5.     var message="Ici votre texte !...";
    

  6.     var coul1="black"; //couleur de base
    

  7.     var coul2="gold"; // couleur qui "flashe"
    

  8.     var police="Verdana"; // Police d'écriture
    

  9.     var taille=48; // Taille de la Police
    

  10.     var gras=1; // Texte en gras ? 1=oui, 0=non
    

  11.     var postop=100; // position absolue depuis le haut
    

  12.     var posleft=350; // position absolue depuis la gauche... pour centrer ? :-))
    

  13.     // si possible ne rien (ou pas grand chose) modifier ci-après...
    

  14.     var x=0,i=message.length;
    

  15.     for (z=0; z<3; z++){
    

  16.       document.write('<div id="txt'+z+'" style="position:absolute;top:'+postop+'px;left:'+posleft+'px;color:');
    

  17.       document.write((z==1)?coul1:coul2);
    

  18.       document.write(';z-index:'+z+';font: normal normal ');
    

  19.       document.write((gras==1)?'bold ':'normal ');
    

  20.       document.write(taille+'px/1.2em '+police+', sans-serif;">'+message+'</div>');
    

  21.     }
    

  22.     function chgcoul() {
    

  23.         if(x<=message.length) {
    

  24.         document.getElementById("txt1" ).innerHTML=message.substring(x,0);
    

  25.           document.getElementById("txt0" ).innerHTML=message;
    

  26.           x+=1;
    

  27.         } else {
    

  28.           if(i>=0) {
    

  29.             document.getElementById('txt2').innerHTML=message.substring(i,0);
    

  30.                 i-=1;
    

  31.             } else {
    

  32.             x=0;
    

  33.               i=message.length;
    

  34.           }
    

  35.         }
    

  36.       setTimeout("chgcoul();",35);
    

  37.     }
    

  38.     </SCRIPT>
    

  39.     </head>
    

  40.     <BODY onload="chgcoul();">
    

  41.     </body>
    

  42.     </html>


Pouvez vous venir à mon aide ! Il m'a l'air compliqué ce notepad !!! Et moi je me sens de plus en plus nulle :cry: 

A bientôt j'espère !
:hello: 
Expert Programmation

Bon... si tu as fait un copier/coller et que tu as enregistré le fichier sous l'appellation toto.html, il ne te reste plus qu'à faire un double-clic sur le fichier toto.html pour qu'il s'ouvre dans ton navigateur... à condition de ne pas avoir copier/coller les numéros de ligne !!!

Si tu trouves NoteTab Light trop compliqué, cherche un éditeur de fichier texte simple en français... ;) 

A+ (très certainement ;)  )

Coucou Docteur,


Enfin ça roule !!! :p  Très très bien cet effet Néon, tellement bien que je l'ai sauvegardé dans mon notepad.

Si tu as d'autres petits programmes intéressants comme ça, je suis preneuse...

Maintenenant je vais essayer d'y voir plus clair avec le "CSS INPUT" . Affaire à suivre...

Merci Ludo

A+

LudoTools a dit :
:sol:  Content pour toi...

N’hésites pas si tu as encore des soucis... mais peut être que l'on passera par des MP avant de donner une solution dans le forum...

Allez... à pluch'! :hello: 



Ok Doc !!
Encore merci pour tout.

A pluch pluch [:-xtreme-:18]
Lassé par la pub ? Créez un compte

Créer un nouveau sujet