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 douzième cours, nous allons faire un script pour un tag animé ou non.

Il est aussi réalisable avec un papier top redimmensionné.

Cliquer ici pour visualiser ma page

Matériel :

 - un tag

- 2 tuiles différentes assorties au tag

- 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 "Cours12".

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

Voici mon dossier Cours12 et son contenu.

      

2 - Ouvrir Script Edit.

Faire Fichier ===> Enregistrer sous

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


3 - Les bordures, la scrollbar,  et la police.

Pour commencer, nous allons definir les couleurs de la scrollbar, des bordures , et la police utilisée.

Copier ce code




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.
Border: #000000 5px ridge;
Scrollbar-track-color: #000000;
Scrollbar-base-color: #000000;
Scrollbar-shadow-color: #D7D8D8;
Scrollbar-highlight-color: #D7D8D8;
Scrollbar-arrow-color: #D7D8D8;		 Ici on définit la couleur de la  bordure, et de la scrollbar.
.mess {
width:450px;
height:200px;
overflow:auto;
font-family:papyrus;
font-size:12pt;
color:#000000;		 Ici on définit la police utilisée
.joop {
border: #000000 5px ridge;
}		 Ici on définit la couleur de la bordure
encadrant la tuile qui va scroller


4 - La couleur du fond de page..

Mettre en surbrillance la première balise BODY, notée <body>

Puis Copier et coller cette ligne à la place de la balise en surbrillance.
<body bgcolor=#D7D8D8>

Ce qui donne ceci




5 - Insertion des tuiles , du tag et de la zone de texte.

Copier et coller ce code sur la ligne 29 ( après la première balise BODY )
<!--on place la tuile immobile-->
<img src="tuile1.jpg" style="left-1800px; top:-1800px; position:absolute" id=rid>

<!--on place la tuile qui scrolle-->
<img src="tuile2.jpg" style="left-1800px; top:-1800px; position:absolute" id=son>

<table class=joop id=hud2 align=center cellspacing=50 bgcolor=#000000>
<tr><td align=center>
<table class=joop id=hud align=center cellspacing=40 width=700 bgcolor=#000000>
<tr><td align=center>

<!--le tag-->
<img src="Diamonds.gif" style="border: #000000 5px ridge">
</td></tr>
<tr><td align=center>
<div id=jet class=mess>Texte ICI</div>
</td></tr></table></td></tr></table>


Ce qui donne ceci



Pour votre version, modifier le nom des tuiles et du tag.

Changer aussi la couleur de la bordure encadrant le tag.


6 - Insertion du script.

Pour que les éléments de votre page apparaissent, il faut noter le script.

Copier et coller ce script à la suite de ce que vous avez déjà mis, et toujours entre les deux balises BODY.

Soit environ à la ligne 46 ( tout depend de la longueur de votre texte )

<script language=vbscript>

'------------------------------------------

'please leave all these lines in 

'Script gemaakt door JettyM 23-10-2004 

'www.molehofje.com 

'Tekst tussen deze lijnen aub laten staan 

'------------------------------------------
j=0
r=0
f=0

Dim j, r, f

Sub Window_onload()
hud.style.backgroundImage="URL("&rid.src&")"
hud2.style.backgroundImage="URL("&son.src&")"
document.body.style.backgroundImage="URL("&rid.src&")"
End Sub

Setinterval "scroll", 64

Sub scroll()
j=j
r=r+1
f=f-1
hud2.style.backgroundposition=f&" "&r
End Sub

</script>


Maintenant, vous pouvez visualiser votre page.

7 - Insertion de la musique.

Pour finir cette page, nous allons maintenant ajouter la musique.

Copier et coller cette ligne après les deux balises TITLE, notées <title> et </title> environ à la ligne 4.

<BGSOUND balance=0 src="music.mid" volume=0 loop=99>

Comme cela

8 - Le titre.

Entre les deux balises <title> et </title>, donner un nom à votre page.


Visionner votre page.

Vous avez terminé votre page de script.

Enregistrer votre travail une dernière fois.

Il ne reste plus qu'à héberger votre matériel et votre page.