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.




On commence

Pour ce 20 ième cours, nous allons faire quelque chose d'un peu différent, en n'utilisant que des tuiles

Cliquez ici pour visualiser ma page

Télécharger le matériel ici

Matériel :

- 1 tuile pour le fond

-2 tuiles assorties avec motifs

- une musique en format midi




Cette flèche pour marquer votre ligne

Clic gauche pour la déplacer



1 - Créer un nouveau dossier et nommer le "Cours20".
Ranger le matériel utilisé dans ce dossier.

Voici mon dossier Cours 20 et son contenu.

                

2 - Ouvrir Script Edit.
Faire Fichier ===> Enregistrer sous

Enregistrer cette page vierge dans le dossier Cours 20 en n'oubliant pas de la nommer.

3 - Nommer la page.

Entre les deux balises <title> et </title>, écrire le titre de votre page comme cela.




4 - Les bordures,  la boite de texte, la scrollbar et les bordures intérieures

Copier ce code, puis coller le entre les deux balises HEAD, notée <head> et </head>,

environ sur la ligne 4
<STYLE>
BODY {
border:#CBB19E 6px ridge;
scrollbar-base-color: #CBB19E;
scrollbar-track-color: #CBB19E;
scrollbar-highlight-color: #B37B68;
scrollbar-shadow-color: #B37B68;
scrollbar-arrow-color: #B37B68;
}
.mess {
border:#CBB19E 8px groove;
FONT-FAMILY:Papyrus;
FONT-WEIGHT:bold;
FONT-SIZE:14pt;
COLOR:#000000;
background-color:#CBB19E;
filter: revealtrans alpha(opacity=75);
}
.bor1 {
border-right:#CBB19E 6px ridge;}
.bor2 {
border-bottom:#CBB19E 6px ridge;}
.bor3 {
border-left:#CBB19E 6px ridge;}
.bor4 {
border-top:#CBB19E 6px ridge;}

</STYLE>




Comme cela.



** Explications **
border:#CBB19E 6px ridge;
scrollbar-base-color: #CBB19E;
scrollbar-track-color: #CBB19E;
scrollbar-highlight-color: #B37B68;
scrollbar-shadow-color: #B37B68;
scrollbar-arrow-color: #B37B68;		 Ici on definit, la bordure autour de la page et, les couleurs de la scrollbar
.mess {
border:#CBB19E 8px groove;
FONT-FAMILY:Papyrus;
FONT-WEIGHT:bold;
FONT-SIZE:14pt;
COLOR:#000000;
background-color:#CBB19E;
filter: revealtrans alpha(opacity=75);
}		 Ici on définit la boite de message : la couleur de sa bordure, la police ( taille, couleur), et la couleur du fond de la boite de texte ( avec l'opacité baissée à 75 )
.bor1 {
border-right:#CBB19E 6px ridge;}
.bor2 {
border-bottom:#CBB19E 6px ridge;}
.bor3 {
border-left:#CBB19E 6px ridge;}
.bor4 {
border-top:#CBB19E 6px ridge;}		 Ici on définit les bordures intérieures entre les tuiles.



5- Insertion de la tuile et définition de la couleur du fond de page
Mettre la première balise BODY notée <BODY> en surbrillance ( bleu)



Copier puis coller cette ligne par dessus cette balise en surbrillance.
<BODY bgColor=#CBB19E scroll=no>
<!-- fond -->
<img src="tuile_fond.jpg" style="left:-1800px; top:-1800px; position:absolute;" id="bkg">

Vous obtenez ceci



Pour votre version, changer la couleur et le nom de la tuile.


6 - Insertion des tuiles qui scrollent .
Copier ce code.
<!-- les tuiles qui scrollent -->

<!-- la tuile horizontale - et sa hauteur -->
<img src="tuileH.jpg" height="171" style="left:-1800px; top:-1800px; position:absolute;" id="pic1">

<!-- la tuile verticale - et sa largeur -->
<img src="tuileV.jpg" width="206" style="left:-1800px; top:-1800px; position:absolute;" id="pic2">


Puis coller le sous l'insertion de la première  tuile ( ligne 37 environ ), entre les balises <body> et </body>

Comme cela



Pour votre version, changer le nom des tuiles ainsi que les dimmensions.

7- Insertion des containers et de la boite de texte.

Pour que les tuiles soient bien à leur place, nous allons insérer des containers ( souvent utilisés avec Scrippy ).

Nous allons aussi placer la boite de texte.

Copier et coller ce code à la suite, soit environ vers la ligne  44.
<!-- containers pour les tuiles qui scrolle -->
<div id="dv1" class="bor1" style="width:10px; height:10px; position:absolute; left:-1800px; top:-1800px; filter:revealtrans;"></div>
<div id="dv2" class="bor2" style="width:10px; height:10px; position:absolute; left:-1800px; top:-1800px; filter:revealtrans;z-index:2"></div>
<div id="dv3" class="bor3" style="width:10px; height:10px; position:absolute; left:-1800px; top:-1800px; filter:revealtrans;"></div>
<div id="dv4" class="bor4" style="width:10px; height:10px; position:absolute; left:-1800px; top:-1800px; filter:revealtrans;z-index:2"></div>

<!-- Boite de texte et le message -->
<div class="mess" id="txt" style="text-align:center; left:5%; top:5%; height:90%; width:90%; position:absolute; overflow:auto; visibility:hidden; padding:10px;" id=text>Votre message ici</div>

Comme cela.



Pour votre version, pensez à écrire votre message.

9- Insertion du script.
A la suite de tout ceci, nous insérons le script.
<script language="vbscript">
'------------------------------------------
'please leave all these lines in
'Script (19) gemaakt door Jetty
'www.molehofje.com
'Tekst tussen deze lijnen aub laten staan
'------------------------------------------
Dim doch, docw, b, j, ja, jo, je, m, pW, pH, space
j=0
ja=0
jo=0
je=0
m=0
pH=pic1.height
pW=pic2.width

REM breedte border
b=6

REM ruimte tussen tekstbox en scrollen
space=25

sub window_onload()
On Error Resume Next
doch=document.body.clientheight
docw=document.body.clientwidth
document.body.style.backgroundImage="url("&bkg.src&")"
dv1.style.backgroundImage="url("&bkg.src&")"
dv2.style.backgroundImage="url("&bkg.src&")"
dv3.style.backgroundImage="url("&bkg.src&")"
dv4.style.backgroundImage="url("&bkg.src&")"
dv1.style.borderRightWidth=b&"px"
dv2.style.borderBottomWidth=b&"px"
dv3.style.borderLeftWidth=b&"px"
dv4.style.borderTopWidth=b&"px"
dv1.style.left=0
dv1.style.top=0
dv1.style.width=pW+b
dv1.style.height=doch
dv2.style.left=0
dv2.style.top=0
dv2.style.width=docw
dv2.style.height=pH+b
dv3.style.left=docw-pW
dv3.style.top=0
dv3.style.width=pW+b
dv3.style.height=doch
dv4.style.left=0
dv4.style.top=doch-(pH+b)
dv4.style.width=docw
dv4.style.height=pH+b
txt.style.left=pW+b+space
txt.style.top=pH+b+space
txt.style.width=docw-(2*pW+2*b+2*space)
txt.style.height=doch-(2*pH+2*b+2*space)
window.setTimeout "start", 500
end sub

sub start()
dv1.filters(0).Apply()
dv1.filters(0).transition=7
dv1.style.backgroundImage="url("&pic2.src&")"
dv1.filters(0).Play(5)
setInterval "scrollA", 64
setTimeout "next1", 5000
end sub

sub next1()
dv2.filters(0).Apply()
dv2.filters(0).transition=4
dv2.style.backgroundImage="url("&pic1.src&")"
dv2.filters(0).Play(5)
setInterval "scrollB", 64
setTimeout "next2", 5000
end sub

sub next2()
dv3.filters(0).Apply()
dv3.filters(0).transition=6
dv3.style.backgroundImage="url("&pic2.src&")"
dv3.filters(0).Play(5)
setInterval "scrollC", 64
setTimeout "next3", 5000
end sub

sub next3()
dv4.filters(0).Apply()
dv4.filters(0).transition=5
dv4.style.backgroundImage="url("&pic1.src&")"
dv4.filters(0).Play(5)
setInterval "scrollD", 64
setTimeout "next4", 5000
end sub

sub next4()
txt.filters(0).Apply()
txt.filters(0).transition=2
txt.style.visibility="visible"
txt.filters(0).Play(3)
end sub

sub scrollA()
j=j+1
dv1.style.backgroundPosition=m&" "&-j
end sub

sub scrollB()
ja=ja+1
dv2.style.backgroundPosition=ja&" "&m
end sub

sub scrollC()
jo=jo+1
dv3.style.backgroundPosition=m&" "&jo
end sub

sub scrollD()
je=je+1
dv4.style.backgroundPosition=-je&" "&m
end sub

sub window_onresize()
On Error Resume Next
doch=document.body.clientheight
docw=document.body.clientwidth
dv1.style.left=0
dv1.style.top=0
dv1.style.width=pW
dv1.style.height=doch
dv2.style.left=0
dv2.style.top=0
dv2.style.width=docw
dv2.style.height=pH
dv3.style.left=docw-pW
dv3.style.top=0
dv3.style.width=pW
dv3.style.height=doch
dv4.style.left=0
dv4.style.top=doch-pH
dv4.style.width=docw
dv4.style.height=pH
txt.style.left=pW+b+space
txt.style.top=pH+b+space
txt.style.width=docw-(2*pW+2*b+2*space)
txt.style.height=doch-(2*pH+2*b+2*space)
end sub

</script>




13 - Insertion de la musique.

A la suite des balises TITLE pour le titre, copier et coller ce code pour insérer la musique.
<BGSOUND balance=0 src="music.mid" volume=0 loop=-1>

Pour votre version, modifier le nom de la musique.


 Votre page est terminée.

Enregistrez la une dernière fois, puis hébergez la avec le materiel.