Recommandations :

  Quand vous allez ranger votre matériel, pensez à nommer vos tuiles,

papiers ou musique en les renommant si besoin de façon à éviter les accents et les espaces.

 Faites aussi attention si vous mettez des majuscules, elles devront aussi être dans la source de votre page



Pour ce quatorzième cours, nous allons faire un script pour un tag ( animé ou non ).


Cliquer ici pour visualiser ma page

Le tutoriel de mon tag est ici

Matériel :

 - un tag
- une bordure assortie au tag d'une largeur de 80 à 120 pixels de large

- un petit gif

- une musique en format midi

Télécharger le materiel ici



On commence.


Cette flèche pour marquer votre ligne

Clic gauche pour la déplacer



1 - Créer un nouveau dossier et le nommer "Cours14".

Ranger le matériel nécéssaire dedans.

Voici mon dossier Cours14 et son contenu.

        

2 - Ouvrir Script Edit.

Faire Fichier ===> Enregistrer sous

Et enregistrer la page vierge dans votre dossier Cours14 en n'oubliant pas de la nommer.




3 - La couleur de fond de page, la scrollbar, la boite de texte et la police.
Nous allons créer un dégradé comme couleur de fond de page, puis nous allons définir les couleurs de la scrollbar, la boite de texte et la police utilisée.

Copier ce code
<style type="text/css">
body{
filter: progid:DXImageTransform.Microsoft.Gradient(startColorstr=#A8B8C7,endColorstr=#D6E6F5,gradientType=1 ,enabled=true);
background-color: #D6E6F5;
border: ridge 2px #A8B8C7;
scrollbar-base-color: #A8B8C7;
scrollbar-track-color: #A8B8C7;
scrollbar-shadow-color: #D6E6F5;
scrollbar-arrow-color: #ffffff;
scrollbar-highlight-color: #D6E6F5;
}
.offscrn{
left:-1800px;
top:-1800px;
position:absolute;
}
.mess{
border: inset 3px #A8B8C7;
filter: progid:DXImageTransform.Microsoft.Iris progid:DXImageTransform.Microsoft.Gradient(startColorstr=#A8B8C7,endColorstr=#D6E6F5,gradientType=1);
overflow:auto;
padding:10px;
position: absolute;
left: 5%; top: 5%;
height: 90%; width: 90%;
visibility:hidden;
font-family: Pristina;
font-size: 18pt;
color: #000000;
text-align:center;
}
</style>


Puis le coller entre les deux balises HEAD, notées <head> et </head>

J' ai collé le code sur la ligne 4.



Quelques explications afin que vous sachiez quoi modifier.
body{
filter: progid:DXImageTransform.Microsoft.Gradient
(startColorstr=#A8B8C7,endColorstr=#D6E6F5,gradientType=1 ,enabled=true);
background-color: #D6E6F5;		 Ici, on choisit la couleur de la page, mais surtout le dégradé de la page.
Couleur foncée à droite et plus claire à gauche.
border: ridge 2px #A8B8C7;
scrollbar-base-color: #A8B8C7;
scrollbar-track-color: #A8B8C7;
scrollbar-shadow-color: #D6E6F5;
scrollbar-arrow-color: #ffffff;
scrollbar-highlight-color: #D6E6F5;		 La bordure autour de la page et les couleur de la scrollbar
.mess{
border: inset 3px #A8B8C7;
filter: progid:DXImageTransform.Microsoft.Iris progid:DXImageTransform.Microsoft.Gradient
(startColorstr=#A8B8C7,endColorstr=#D6E6F5,gradientType=1);
overflow:auto;
padding:10px;
position: absolute;
left: 5%; top: 5%;
height: 90%; width: 90%;
visibility:hidden;
font-family: Pristina;
font-size: 18pt;
color: #000000;
text-align:center;
}		 La boite de texte :
_ sa bordure
_son degradé
_ la police utilisée ( taille, couleur, etc ..)


4 - Insertion de la bordure qui scrolle.
Copier et coller ce code sous la première balise BODY notée <body>, soit sur la ligne  38
.
<!-- la bordure qui scrolle-->
<img class="offscrn" id="bkg" width="108"
src="bordure.jpg">

Ce qui donne ceci



Changer si besoin le nom de la bordure par le nom de votre bordure, en n'oubliant  pas de noter sa largeur.

5 - Insertion du tag..
Copier et coller ce code sous l'insertion de la bordure, soit environ sur la ligne 41 .
<div id="container" class="offscrn"></div>

<!-- Image -->
<img class="offscrn" id="pic" width="587" height="452" style="visibility: hidden"
src="fetes.gif">


Ce qui donne ceci


Si besoin, changer le nom du tag ( attention au jpg ou gif ), et sa dimmension.


6 - Insertion de votre message..

Sous l'insertion de la bordure et du tag, nous allons rajouter notre message entre les balises <div> et </div>

Copier et coller ce code, sur la ligne 46 ( apres l'insertion du tag )
<div id="txt" class="mess">Message ici
</div>

Comme cela


Ecrire votre texte.

7 - Insertion du gif.

Pour cette page, nous utilisons un seul gif , mais qui sera en double sur la page.

Toujours à la suite, copier et coller ce code, envion sur la ligne 48 ( après votre message )
<!--le gif-->
<img class="offscrn" id=pic1
src="etoile.gif" width="31" height="29">
<img class="offscrn" id=pic2
src="etoile.gif" width="31" height="29">
 
Changer si besoin le nom du gif et sa dimmension.

Comme cela


A ce stade, vous ne verrez rien sur votre page.

8- Insertion du script.

Ce script joue sur l' apparition du tag et sur le mouvement des gifs.

Copier et coller le script à la suite, soite vers la ligne 53

 

<SCRIPT language=VBScript>
'---------------------------
'Script written by Annem@rie
'http://www.annemaries.nl/
'januari 2005
'please leave these lines in
'---------------------------
Option Explicit
SetLocale("en-gb")

Dim doch,docw,picW,picH,bW,spw,sph,a,n,e
Dim cc1h,cc1w,R1,A1,ppic1h,ppic1w,th1,cc2h,cc2w,R2,A2,ppic2h,ppic2w,th2

pic.style.filter="progid:DXImageTransform.Microsoft.Iris"


REM tussen-ruimtes
spw=10
sph=60

a=0
n=0
e=0

picW=pic.width
picH=pic.height
bW=bkg.width

sub window_Onload()
On Error Resume Next
doch=document.body.clientheight
docw=document.body.clientwidth
cc2w=docw\2+335
cc2h=75
cc1w=docw\2+335
cc1h=75
R2=50
A2=2
R1=50
A1=2
th2=SetTimeOut("circle2", 7500)
th1=SetTimeOut("circle1", 7500)
pic.style.left=(docw-picW)/2+bw/2+spw/2
pic.style.top=1.5*sph
txt.style.left=(docw-picW)/2+bw/2+spw/2
txt.style.top=3*sph+pich
txt.style.width=picw
txt.style.height=250
txt.style.visibility="hidden"
container.style.backgroundImage="URL("&bkg.src&")"
container.style.left=spw
container.style.top=-1
container.style.height=4.5*sph+pich+250
container.style.width=bW
SetTimeOut  "kom", 10
end sub

Sub kom()
ClearTimeout
pic.filters(0).Apply()
pic.filters(0).irisStyle="star"
pic.filters(0).motion="in"
pic.style.visibility="visible"
pic.filters(0).Play(6.200)
txt.filters(0).Apply()
txt.filters(0).irisStyle="star"
txt.filters(0).motion="in"
txt.style.visibility="visible"
txt.filters(0).Play(6.200)
End Sub

Sub circle2()
ClearTimeOut(th2)
A2=A2-0.06
ppic2w=R2*cos(A2)+cc2w
ppic2h=R2*sin(A2)+cc2h
pic2.style.Top=ppic2h
pic2.style.Left=ppic2w
th2=SetTimeOut ("circle2", 30)
End Sub
Sub circle1()
ClearTimeOut(th1)
A1=A1+0.06
ppic1w=R1*cos(A1)+cc1w
ppic1h=R1*sin(A1)+cc1h
pic1.style.Top=ppic1h
pic1.style.Left=ppic1w
th1=SetTimeOut ("circle1", 30)
End Sub

window.setinterval "scrollit", 64

sub scrollit()
a=a+1
n=n-1
e=e
container.style.backgroundPosition=e&" "&a
end sub

Sub window_Onresize()
window.location.reload()
end sub

</script>

Comme cela


Maintenant vous pouvez visualiser votre page.

9- Avant de finir, nous allons ajouter la musique.

Copier et coller ce code après les 2 balises TITLE notées <title> et </title>; soit sur la ligne 4.

 

<bgsound src="music.mid" balance="0" volume="0" loop="infinite">

Changer si besoin le nom de votre musique.

Votre page est terminée.

Enregistrer la une dernière fois, puis heberger la avec le matériel.

J' espère que ce cours vous a plus et surtout que vous vous êtes bien amusez.