comment créer des bannières en javascript, css et HTML
Ils existent plusieurs manières de réaliser des bannières dynamiques ( défilement de texte, glissement des lettres, style machine à écrire ). On peut aussi choisir l'endroit de l'affichage, soit dans une boîte, soit dans la barre d'état du navigateur etc... ; Pour finir l'on peut personnaliser nos bannières avec du code CSS ; Ci-dessous les 3 modes de défilement du texte :
Dans chacun de ces scripts, il y a 3 paramètres à changer. Ils sont en rouge. Il s'agit :
Du texte de la bannière
De la vitesse : banniere1(100)
De la longueur de la boîte : SIZE=40 ( Vous pouvez remplacer cette valeur par du code CSS pour être plus précis ) :
Code :
style="width: 1000px;"> ou style="width: 100%;">
etc... Il existe de nombreuses façons.
NB : Si vous utilisez l'apostrophe dans le texte de votre message, celle-ci doit-être précédée du symbole anti-slash \.
Bannière dans une boîte avec texte en défilement :
A mettre dans le header :
Code :
<SCRIPT LANGUAGE="JavaScript">
<!-- debut du script
var position1=0, ban1, delai1, message1;
function banniere1(delai) {
delai1 = delai;
if (position1 >= message1.length)
position1 = 0;
else if (position1 == 0) {
message1 = ' ' + message1;
while (message1.length < 128)
message1 += ' ' + message1;
}
document.bandeau1.Fbanniere1.value = message1.substring(position1,position1+message1.length);
position1++;
ban1 = setTimeout("banniere1(delai1)",delai);
}
// fin du script -->
</SCRIPT>
Définir le body :
Code :
<BODY onLoad="message1='Bannière avec texte dans une boîte style défilement'; banniere1(100);" onUnload="clearTimeout(ban1)">
A mettre dans le body :
Code :
<FORM NAME="bandeau1">
<INPUT TYPE="text" NAME="Fbanniere1" SIZE="40">
</FORM>
Bannière dans une boîte avec glissement du texte :
A mettre dans le header :
Code :
<SCRIPT LANGUAGE="JavaScript">
<!-- debut du script
var message2, message2b, chaine2 = "", chainePart2, delai2, ban2;
function banniere2(delai) {
delai2 = delai;
if (chaine2.length == 0) {
chaine2 = " ";
message2b = message2;
chainePart2 = "";
}
else if (chaine2.length == 1) {
while (message2b.substring(0, 1) == " ") {
chainePart2 = chainePart2 + chaine2;
chaine2 = message2b.substring(0, 1);
message2b = message2b.substring(1, message2b.length);
}
chainePart2 = chainePart2 + chaine2;
chaine2 = message2b.substring(0, 1);
message2b = message2b.substring(1, message2b.length);
for (var i = 0; i < 120; i++)
chaine2 = " " + chaine2;
}
else chaine2 = chaine2.substring(10, chaine2.length);
document.bandeau2.Fbanniere2.value = chainePart2 + chaine2;
ban2 = window.setTimeout('banniere2(delai2)',delai);
}
// fin du script -->
</SCRIPT>
Définir le body :
Code :
<BODY onLoad="message2='Bannière avec texte dans une boîte style glissement de lettre'; banniere2(10);" onUnload="clearTimeout(ban2)">
A mettre dans le body :
Code :
<FORM NAME="bandeau2">
<INPUT TYPE="text" NAME="Fbanniere2" SIZE="40">
</FORM>
Bannière dans une boîte style machine à écrire :
A mettre dans le header :
Code :
<SCRIPT LANGUAGE="JavaScript">
<!-- debut du script
var message3, message3b, chaine3 = "", chainePart3, delai3, ban3;
function banniere3(delai) {
delai3 = delai;
if (chaine3.length == 0) {
chaine3 = " ";
message3b = message3;
chainePart3 = "";
}
else if (chaine3.length == 1) {
while (message3b.substring(0, 1) == " ") {
chainePart3 = chainePart3 + chaine3;
chaine3 = message3b.substring(0, 1);
message3b = message3b.substring(1, message3b.length);
}
chainePart3 = chainePart3 + chaine3;
chaine3 = message3b.substring(0, 1);
message3b = message3b.substring(1, message3b.length);
}
else chaine3 = chaine3.substring(10, chaine3.length);
document.bandeau3.Fbanniere3.value = chainePart3 + chaine3;
ban3 = window.setTimeout('banniere3(delai3)',delai);
}
// fin du script -->
</SCRIPT>
Définir le body :
Code :
<BODY onLoad="message3='Bannière avec texte dans une boîte style machine à écrire'; banniere3(100);" onUnload="clearTimeout(ban3)">
A mettre dans le body :
Code :
<FORM NAME="bandeau3">
<INPUT TYPE="text" NAME="Fbanniere3" SIZE="40">
</FORM>
Les couleurs ne s'affichent pas dans les balises
Ils existent plusieurs manières de réaliser des bannières dynamiques ( défilement de texte, glissement des lettres, style machine à écrire ). On peut aussi choisir l'endroit de l'affichage, soit dans une boîte, soit dans la barre d'état du navigateur etc... ; Pour finir l'on peut personnaliser nos bannières avec du code CSS ; Ci-dessous les 3 modes de défilement du texte :
Dans chacun de ces scripts, il y a 3 paramètres à changer. Ils sont en rouge. Il s'agit :
Du texte de la bannière
De la vitesse : banniere1(100)
De la longueur de la boîte : SIZE=40 ( Vous pouvez remplacer cette valeur par du code CSS pour être plus précis ) :
Code :
style="width: 1000px;"> ou style="width: 100%;">
etc... Il existe de nombreuses façons.
NB : Si vous utilisez l'apostrophe dans le texte de votre message, celle-ci doit-être précédée du symbole anti-slash \.
Bannière dans une boîte avec texte en défilement :
A mettre dans le header :
Code :
<SCRIPT LANGUAGE="JavaScript">
<!-- debut du script
var position1=0, ban1, delai1, message1;
function banniere1(delai) {
delai1 = delai;
if (position1 >= message1.length)
position1 = 0;
else if (position1 == 0) {
message1 = ' ' + message1;
while (message1.length < 128)
message1 += ' ' + message1;
}
document.bandeau1.Fbanniere1.value = message1.substring(position1,position1+message1.length);
position1++;
ban1 = setTimeout("banniere1(delai1)",delai);
}
// fin du script -->
</SCRIPT>
Définir le body :
Code :
<BODY onLoad="message1='Bannière avec texte dans une boîte style défilement'; banniere1(100);" onUnload="clearTimeout(ban1)">
A mettre dans le body :
Code :
<FORM NAME="bandeau1">
<INPUT TYPE="text" NAME="Fbanniere1" SIZE="40">
</FORM>
Bannière dans une boîte avec glissement du texte :
A mettre dans le header :
Code :
<SCRIPT LANGUAGE="JavaScript">
<!-- debut du script
var message2, message2b, chaine2 = "", chainePart2, delai2, ban2;
function banniere2(delai) {
delai2 = delai;
if (chaine2.length == 0) {
chaine2 = " ";
message2b = message2;
chainePart2 = "";
}
else if (chaine2.length == 1) {
while (message2b.substring(0, 1) == " ") {
chainePart2 = chainePart2 + chaine2;
chaine2 = message2b.substring(0, 1);
message2b = message2b.substring(1, message2b.length);
}
chainePart2 = chainePart2 + chaine2;
chaine2 = message2b.substring(0, 1);
message2b = message2b.substring(1, message2b.length);
for (var i = 0; i < 120; i++)
chaine2 = " " + chaine2;
}
else chaine2 = chaine2.substring(10, chaine2.length);
document.bandeau2.Fbanniere2.value = chainePart2 + chaine2;
ban2 = window.setTimeout('banniere2(delai2)',delai);
}
// fin du script -->
</SCRIPT>
Définir le body :
Code :
<BODY onLoad="message2='Bannière avec texte dans une boîte style glissement de lettre'; banniere2(10);" onUnload="clearTimeout(ban2)">
A mettre dans le body :
Code :
<FORM NAME="bandeau2">
<INPUT TYPE="text" NAME="Fbanniere2" SIZE="40">
</FORM>
Bannière dans une boîte style machine à écrire :
A mettre dans le header :
Code :
<SCRIPT LANGUAGE="JavaScript">
<!-- debut du script
var message3, message3b, chaine3 = "", chainePart3, delai3, ban3;
function banniere3(delai) {
delai3 = delai;
if (chaine3.length == 0) {
chaine3 = " ";
message3b = message3;
chainePart3 = "";
}
else if (chaine3.length == 1) {
while (message3b.substring(0, 1) == " ") {
chainePart3 = chainePart3 + chaine3;
chaine3 = message3b.substring(0, 1);
message3b = message3b.substring(1, message3b.length);
}
chainePart3 = chainePart3 + chaine3;
chaine3 = message3b.substring(0, 1);
message3b = message3b.substring(1, message3b.length);
}
else chaine3 = chaine3.substring(10, chaine3.length);
document.bandeau3.Fbanniere3.value = chainePart3 + chaine3;
ban3 = window.setTimeout('banniere3(delai3)',delai);
}
// fin du script -->
</SCRIPT>
Définir le body :
Code :
<BODY onLoad="message3='Bannière avec texte dans une boîte style machine à écrire'; banniere3(100);" onUnload="clearTimeout(ban3)">
A mettre dans le body :
Code :
<FORM NAME="bandeau3">
<INPUT TYPE="text" NAME="Fbanniere3" SIZE="40">
</FORM>
Les couleurs ne s'affichent pas dans les balises
Code:
, bonne chance donc pour trouver les éléments cités en début de tutoriel, vous pourrez les trouver car ils sont entre des balises [color][/color].
Vous n'avez plus qu'à essayer les 3 Codes Sources et à voir lequel vous plaît le plus.
voila :)
