Comment faire des lettres magnétiques en Javascript ?

 

par meltech1 |

     
Comment faire des lettres magnétiques en Javascript ?

Vous vous souvenez quand vous étiez petit vous jouiez avec des lettres magnétiques multicolores que l'on colle sur un tableau magnétique. C'était un alphabet pour enfant très ludique. Ici nous allons programmer un texte magnétique, c'est-à-dire qui se colle à votre site Internet et en même temps multicolore. Voici comment faire.

Quelles sont les fournitures nécessaires ?

  • Internet Explorer
  • Logiciel Bloc Notes

Étapes de réalisation

1.

Commencez par ouvrir votre site Internet avec Bloc Notes pour en obtenir le code source. C'est dans ce programme qu'il y a les différentes balises qui contiennent son programme. Veuillez trouver la balise <body>.

2.

Dans la balise <body> veuillez insérer le script suivant :
<SCRIPT>
// TEXTE MAGNETIQUE
var text=new Array()
var textsplashcolors=new Array()
//PLACER ICI LE TEXTE DU TABLEAU
text[0]="Bienvenue à Comment fait-on."
text[1]="Voici le tableau magique ..."
text[2]="Les lettres magnétiques."
text[3]="sont lisibles ..."
text[4]="Par tous!."

textsplashcolors[0]="#FFFF00"
textsplashcolors[1]="#FF0000"
textsplashcolors[2]="#00FF00"
textsplashcolors[3]="#00FFFF"
textsplashcolors[4]="#FF00FF"
textsplashcolors[5]="#FFAA00"
textsplashcolors[6]="#0088FF"
var textfont="Arial"
var textfontsize=18
var textfontsizeHTML=4
var textpause=3
var textweight="bold"
var textweightA="<b>"
var textweightB="</b>"
var textitalic="normal"
var textitalicA=""
var textitalicB=""
var textalignabsolute="topleft"
var letterwidth=new Array()
var messagewidth=0
var messageheight=0
var i_colors=0
var letterspace=Math.floor(textfontsize/1.3)
var timer
var i_text=0
var textsplitted
var i_textpath=0
var endpause=1
var endpausemilli=endpause*10
var maxtextlength=0
var i_endposition=0
var windowwidth=0
var windowheight=0
var windowwidthfactor=1
var windowheightfactor=1
var i_span=0
var startposmax_x=0
var startposmax_y=0
textpause*=1000
var x_step=new Array()
var y_step=new Array()
var x_finalpos=new Array()
var y_finalpos=0
var max_loop=20
var i_loop=0

var ns4=document.layers?1:0
var ns6=document.getElementById&&!document.all?1:0
var ie=document.all?1:0

for (i=0;i<=text.length-1;i++) {
if (text[i].length>=maxtextlength) {maxtextlength=text[i].length}
}
for (i=0;i<=text.length-1;i++) {
text[i]=text[i]+" "
}

var xpos=new Array()
for (i=0;i<=maxtextlength;i++) {
xpos[i]=5000
}

var ypos=new Array()
for (i=0;i<=maxtextlength;i++) {
ypos[i]=5000
}

function randomizer(range) {
return Math.floor(range*Math.random())
}

function getpagesize() {
if (ie) {
windowheight=parseInt(document.body.clientHeight)
windowwidth=parseInt(document.body.clientWidth)
}
if (ns4 || ns6) {
windowheight=parseInt(window.innerHeight)
windowwidth=parseInt(window.innerWidth)
}
startposmax_x=windowwidth-2*parseInt(textfontsize)
startposmax_y=windowheight-2*parseInt(textfontsize)

changecontent()
}

function changecontent() {
messagewidth=0
var textsa=text[i_text]
textsplitted=textsa.split("")
if (ie) {
for (i=0;i<=textsplitted.length-1;i++) {
var thisspan=eval("document.all.span"+i)
thisspan.innerHTML="<span style='font-family:"+textfont+";font-size:"+textfontsize+";font-style:"+textitalic+";font-weight:"+textweight+";color:"+textsplashcolors[i_colors]+";text-align:center'>"+textsplitted[i]+"</span>"
i_colors++
if (i_colors>textsplashcolors.length-1) {i_colors=0}
letterwidth[i]=Math.round(thisspan.offsetWidth*1.2)

if (letterwidth[i]==0) {letterwidth[i]=parseInt(textfontsize)}
messagewidth+=letterwidth[i]
messageheight=Math.round(document.all.span0.offsetHeight)
}
}
if (ns6) {
for (i=0;i<=textsplitted.length-1;i++) {
var thisspan=eval(document.getElementById('span'+i))
thisspan.innerHTML="<span style='font-family:"+textfont+";font-size:"+textfontsize+";font-style:"+textitalic+";font-weight:"+textweight+";color:"+textsplashcolors[i_colors]+"'>"+textsplitted[i]+"</span>"
i_colors++
if (i_colors>textsplashcolors.length-1) {i_colors=0}
letterwidth[i]=Math.round(parseInt(thisspan.offsetWidth)*1.2)
if (letterwidth[i]==0) {letterwidth[i]=textfontsize}
messagewidth+=letterwidth[i]
messageheight=Math.round(document.getElementById('span0').offsetHeight)
}

}
if (ns4) {
for (i=0; i<textsplitted.length-1; i++) {
var thisspan=eval("document.span"+i+".document")
thisspan.write("<p><font size="+textfontsizeHTML+" color="+textsplashcolors[i_colors]+" face="+textfont+">"+textitalicA+textweightA+textsplitted[i]+textweightB+textitalicB+"</font></p>")
thisspan.close()
letterwidth[i]=Math.round(thisspan.width*1.2)
if (letterwidth[i]==0) {letterwidth[i]=textfontsize}
messagewidth+=letterwidth[i]
messageheight=Math.round(document.span0.document.height)
thisspan.clear()
i_colors++
if (i_colors>textsplashcolors.length-1) {i_colors=0}
}
for (i=0; i<textsplitted.length-1; i++) {
var thisspan=eval("document.span"+i)
thisspan.visibility="show"
}
}
i_text++
if (i_text>=text.length) {i_text=0}
getfinalpos()
}

function getfinalpos() {
if (ie || ns6) {var padding_x=100}; if (ns4) {var padding_x=40};
if (ie || ns6) {var padding_y=80}; if (ns4) {var padding_y=40};
if (textalignabsolute=="middlecenter") {
x_finalpos[0]=(windowwidth-messagewidth)/2
y_finalpos=(windowheight-messageheight)/2
}
else if (textalignabsolute=="topleft") {
x_finalpos[0]=5
y_finalpos=0
}
else if (textalignabsolute=="topcenter") {
x_finalpos[0]=(windowwidth-messagewidth)/2
y_finalpos=0
}
else if (textalignabsolute=="topright") {
x_finalpos[0]=windowwidth-messagewidth
y_finalpos=0
}
else if (textalignabsolute=="bottomleft") {
x_finalpos[0]=5
y_finalpos=windowheight-messageheight
}
else if (textalignabsolute=="bottomcenter") {
x_finalpos[0]=(windowwidth-messagewidth)/2
y_finalpos=windowheight-messageheight
}
else if (textalignabsolute=="bottomright") {
x_finalpos[0]=windowwidth-messagewidth
y_finalpos=windowheight-messageheight
}
for (i=1;i<textsplitted.length-1;i++) {
x_finalpos[i]=x_finalpos[i-1]+letterwidth[i-1]
}
gotostartpos()
}

function gotostartpos() {
if (ie) {
for (i=0;i<textsplitted.length-1;i++) {
var thisspan=eval("document.all.span"+i+".style")
thisspan.posLeft=randomizer(startposmax_x)
thisspan.posTop=randomizer(startposmax_y)
}
}
if (ns4) {
for (i=0;i<textsplitted.length-1;i++) {
var thisspan=eval("document.span"+i)
thisspan.left=randomizer(startposmax_x)
thisspan.top=randomizer(startposmax_y)
}
}
if (ns6) {
for (i=0;i<textsplitted.length-1;i++) {
var thisspan=eval("document.getElementById('span'+i).style")
thisspan.left=randomizer(startposmax_x)
thisspan.top=randomizer(startposmax_y)
}
}
gotostandstillpos()
}

function gotostandstillpos() {
if (ie) {
if (i_loop<=max_loop-1) {
for (i=0;i<textsplitted.length-1;i++) {
var thisspan=eval("document.all.span"+i+".style")
x_step[i]=(x_finalpos[i]-thisspan.posLeft)/(max_loop-i_loop)
y_step[i]=(y_finalpos-thisspan.posTop)/(max_loop-i_loop)
thisspan.posLeft+=x_step[i]
thisspan.posTop+=y_step[i]
}
i_loop++
var timer=setTimeout("gotostandstillpos()",20)
}
else {
i_loop=0
clearTimeout(timer)
timer=setTimeout("gotoendpos()",textpause)
}
}
if (ns4) {
if (i_loop<=max_loop-1) {
for (i=0;i<textsplitted.length-1;i++) {
var thisspan=eval("document.span"+i)
x_step[i]=(x_finalpos[i]-thisspan.left)/(max_loop-i_loop)
y_step[i]=(y_finalpos-thisspan.top)/(max_loop-i_loop)
thisspan.left+=x_step[i]
thisspan.top+=y_step[i]
}
i_loop++
var timer=setTimeout("gotostandstillpos()",20)
}
else {
i_loop=0
clearTimeout(timer)
timer=setTimeout("gotoendpos()",textpause)
}
}
if (ns6) {
if (i_loop<=max_loop-1) {
for (i=0;i<textsplitted.length-1;i++) {
var thisspan=eval("document.getElementById('span'+i).style")
x_step[i]=(x_finalpos[i]-parseInt(thisspan.left))/(max_loop-i_loop)
y_step[i]=(y_finalpos-parseInt(thisspan.top))/(max_loop-i_loop)
thisspan.left=parseInt(thisspan.left)+x_step[i]
thisspan.top=parseInt(thisspan.top)+y_step[i]
}
i_loop++
var timer=setTimeout("gotostandstillpos()",20)
}
else {
i_loop=0
clearTimeout(timer)
timer=setTimeout("gotoendpos()",textpause)
}
}
}

function gotoendpos() {
if (ie) {
if (i_loop<=textsplitted.length-1) {
var thisspan=eval("document.all.span"+i_loop+".style")
thisspan.posLeft=-1000
i_loop++
var timer=setTimeout("gotoendpos()",10)
}
else {
clearTimeout(timer)
i_loop=0
var timer=setTimeout("changecontent()",400)
}
}
if (ns4) {
if (i_loop<=textsplitted.length-1) {
var thisspan=eval("document.span"+i_loop)
thisspan.left=-1000
i_loop++
var timer=setTimeout("gotoendpos()",10)
}
else {
clearTimeout(timer)
i_loop=0
changecontent()
}
}

if (ns6) {
if (i_loop<=textsplitted.length-1) {
var thisspan=eval("document.getElementById('span'+i_loop).style")
thisspan.left=-1000
i_loop++
var timer=setTimeout("gotoendpos()",10)
}
else {
clearTimeout(timer)
i_loop=0
changecontent()
}
}
}

if (ie) {
for (i=0;i<=maxtextlength;i++) {
document.write("<span id='span"+i+"' style='position:absolute'>")

document.write("</span>")
}
window.onload=getpagesize
}
if (ns6) {
for (i=0;i<=maxtextlength;i++) {
document.write("<span id='span"+i+"' style='position:absolute'>")
document.write(textsplitted)
document.write("</span>")
}
window.onload=getpagesize
}
if (ns4) {
for (i=0;i<=maxtextlength;i++) {
document.write("<layer name='span"+i+"' visibility=hide>")
document.write(textsplitted)
document.write("</layer>")
}
window.onload=getpagesize
}
</script>

3.

Pour terminer enregistrez le tout avec Bloc Notes et ouvrez avec IE. Vous remarquez que votre site Internet devient un tableau pour enfant où les lettres magnétiques viennent se coller toutes seules sur le site Internet.

Astuces et mises en garde

Astuce(s) :

Pour modifier le texte du tableau allez dans la balise <body>.

Sur le même thème

damneya

Comment ajouter des métadonnées sur iWeb ?

Pour attirer des visiteurs sur un site internet, il est important d’ajouter à son site des métadonnées et des mots-clés qui seront recherchés dans les moteurs de recherche. Pour ajouter des métadonnées sur iWeb sans éditer le code HTLM brut, pre

kat5

Comment utiliser le logiciel Dreamweaver ?

Dreamweaver est un logiciel permettant de concevoir un site Internet. Et comme tout logiciel, il est simple d'utilisation, mais certaines bases sont nécessaires. Alors à vos claviers, à votre souris, nous allons partir à la découverte de ce logiciel

damneya

Comment créer un blog ?

Un blog ou plus exactement un weblog est un site personnel que vous pouvez créer pour vous exprimer sur vos points de vues. Quelles étapes faut-il suivre pour créer un bon blog?

Chercher un article sur Comment fait-on