|
• Des SCRIPTS gratuits, expliqués et personnalisables. |
Cliquez sur "download" pour télécharger le kit nécessaire.
Compatible IE et NS (v4.75 et v6). Vous pouvez utilisez d'autres caractères de votre choix. Dans notre exemple, les caractères sont des majuscules non accentuées. Dans ce script, un premier message s'affiche, remplacé à la demande pas un second texte lors de l'appui sur le bouton. On peut même en positionner un second pour modifier la vitesse de défilement ! Le script donne même le choix entre deux tailles de caractères... Un click sur l'effet appelle l'URL de votre choix. Une bien jolie réalisation !
1/ Insérez entre HEAD et /HEAD :
ou entre BODY et BODY...
<SCRIPT LANGUAGE="JavaScript">
<!--
// LedScroll JavaScript (C)1997 Cyril Pannetier - La Petite Boutique Java & JavaScript -
// web : http://www.mygale.org/08/pannetie e-mail : pannetie@mygale.org
// Ce script est librement utilisable. Merci de ne pas effacer ces commentaires.
AvailableChars = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789âàçêèéïôù'@ !?.:/-,_~";
caracteres = new Array();
for ( var i = 0; i < 83; i++) {
filename = "KITWEBmessage28/c" + i + ".gif";
caracteres[i] = new Image();
caracteres[i].src = filename;
}
for ( var i = 100; i < 157; i++) {
filename = "KITWEBmessage28/c" + i + ".gif";
caracteres[i] = new Image();
caracteres[i].src = filename;
}
function LedScroll(Texte,LeLien,LedSize,Taille,Vitesse,Fonction) {
this.ScrollTexte = " " + Texte; // Texte de départ
this.Size = Taille; // Taille du scrolling en caractères
this.Font = LedSize;
this.scrollspeed = Vitesse; // Vitesse de défilement
this.fonction = Fonction + '.Scroll()'; // Nom de l'objet JavaScript
this.along = this.ScrollTexte.length; // Longueur du texte affiché
this.Lien = LeLien;
this.timeout = null;
this.basename = Fonction;
this.datas = new Array(this.along);
this.decalage = 0;
// Fonctions utilisées
this.Draw = DrawBoard;
this.Init = Initialise;
this.GoUrl = Go;
this.SetMessage = SetMsg;
this.SetSpeed = SetSpd;
this.SetLink = SetLnk;
this.Scroll = TheScroll;
this.Stop = StopAll;
//Lancement du scrolling
this.Draw();
this.Init();
this.Scroll();
}
function DrawBoard() {
document.write('<TABLE BORDER=0 CELLSPACING=0 CELLPADDING=0>');
document.write('<TR>');
if (this.Font == "small") {
this.decalage = 74;
for (var x = 0; x < this.Size; x++) {
document.write('<TD WIDTH=10 HEIGHT=17><A HREF="" TARGET="_self" onClick="this.href='+this.basename+'.GoUrl();"><IMG SRC="font/c147.gif" WIDTH=11 HEIGHT=17 BORDER=0 NAME="'+this.basename+x+'"></A></TD>');
}
}
else {
this.decalage = 0;
for (var x = 0; x < this.Size; x++) {
document.write('<TD WIDTH=12 HEIGHT=23><A HREF="" TARGET="_self" onClick="this.href='+this.basename+'.GoUrl();"><IMG SRC="font/c73.gif" WIDTH=13 HEIGHT=23 BORDER=0 NAME="'+this.basename+x+'"></A></TD>');
}
}
document.write('</TR>');
document.write('</TABLE>');
}
function Initialise() {
if (this.Font == "small") {
this.ScrollTexte = this.ScrollTexte.toUpperCase();
}
for (var x = 0; x < this.along; x++) {
this.datas[x] = caracteres[AvailableChars.indexOf(this.ScrollTexte.charAt(x)) + this.decalage];
}
}
// Fonction de scrolling
function TheScroll() {
var dummy = this.datas[0];
for (var x = 0; x < (this.along - 1); x++) {
this.datas[x] = this.datas[x + 1];
}
this.datas[this.along-1] = dummy;
for (var x = 0; x < this.Size; x++) {
document.images[this.basename+x].src = this.datas[x].src;
}
this.timeout = window.setTimeout(this.fonction,this.scrollspeed);
}
function Go() {
return this.Lien;
}
function SetMsg(NewMsg) {
NewMsg = " " + NewMsg;
this.along = NewMsg.length;
this.datas = new Array(this.along);
this.ScrollTexte = NewMsg;
this.Init();
}
function SetSpd(NewSpd) {
this.scrollspeed = NewSpd;
}
function SetLnk(NewLnk) {
this.Lien = NewLnk;
}
// Fonction Arret
function StopAll() {
clearTimeout(this.timeout);
this.timeout = null;
}
// -->
</SCRIPT>
2/ Insérez dans le corps de la page :
à l'emplacement où doit apparaître l'effet.
<SCRIPT LANGUAGE="JavaScript">
LeScroll = new LedScroll("KITWEB... est fait pour vous ! ! Scripts, Backgrounds, Cliparts, Sons, Polices, Conseils, Liens etc ","http://kitweb.free.fr/index.html","normal",20,200,"LeScroll");
document.write('<BR><BR><CENTER>');
TheScroll = new LedScroll("KITWEB... une foule de scripts francises, directement utilisables ","http://kitweb.free.fr/index.html","small",30,175,"TheScroll");
document.write('</CENTER>');
//-->
</SCRIPT>
La syntaxe est la suivante:
Initialisation de l'objet : nomobjet = new LedScroll("message","lien","font",taille,vitesse,"nomobjet");
Les paramètres :
* nomobjet : nom que vous donnez à votre objet.
* message : message que vous voulez faire défiler (entre guillemets).
* lien : lien ouvert quand l'utilisateur clique sur la zone.
* font : détermine la taille des caractères utilisés - Indiquez: small ou normal (entre guillemets).
* taille : taille du scrolling, en caractères.
* vitesse : vitesse de défilement du message (plus le nombre est grand, plus la vitesse est lente).
* nomobjet : nom que vous donnez à votre objet, identique au premier (entre guillemets).
3/ Insérez dans la balise BODY :
à l'emplacement où doit apparaître l'effet.
<BODY onUnload = 'LeScroll.Stop(); TheScroll.Stop();'>4/ Vous pouvez ajouter un ou plusieurs boutons :
<FORM>
<INPUT TYPE="Button" VALUE="Nouveau Message" onClick = 'TheScroll.SetMessage("KITWEB.FREE.FR"); TheScroll.SetLink("http://kitweb.free.fr/index.html");'><BR><BR>
<INPUT TYPE="Button" VALUE="Changer la vitesse" onClick = 'TheScroll.SetSpeed(50);'>
</FORM>
Les fonctions associées à l'objet :
* nomobjet.SetMessage("message") : Remplace le message actuel par celui passé en paramètre.
* nomobjet.SetSpeed(speed) : Modifie la vitesse de défilement actuelle par celle passée en paramètre.
* nomobjet.SetLink("lien") : Remplace le lien actuel par celui passé en paramètre.
* nomobjet.Stop() : Arrête le scrolling.