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 21 ième cours, nous allons utiliser 3 tuiles , 3 images assorties aux tuiles, une tuile de décoration et une musique.

Cliquez ici pour visualiser ma page

Télécharger le matériel ici

Matériel :

- 3 tuiles de la même largeur qui vont scroller à la verticale.


-3 images miniatures assorties aux tuiles

- 1 tuile de décoration ou un glitter

- 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 "Cours19".
Ranger le matériel utilisé dans ce dossier.

Voici mon dossier Cours 21 et son contenu.

                 

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

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

3 - Nommer la page.

Entre les deux balises <title> et </title>, écrire le titre de votre page .
4 - La scrollbar, les bordures , la couleur de fond et  la boite de texte

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

environ sur la ligne 4
<style type="text/css">
body{
border: solid 2px #DEDEDE;
background-color: #000000;
scrollbar-base-color: #000000;
scrollbar-track-color: #000000;
scrollbar-highlight-color: #DEDEDE;
scrollbar-shadow-color: #DEDEDE;
scrollbar-arrow-color: #DEDEDE;
}
.offscrn{
left:-1800px;
top:-1800px;
position:absolute;
}
.message{
border:double 15px #000000;
font-family: Verdana;
font-size: 12pt;
font-weight:bold;
color: #DEDEDE;
background-color:#000000;
}

</style>




Comme cela.



** Explications **
border: solid 2px #DEDEDE;
background-color: #000000;
scrollbar-base-color: #000000;
scrollbar-track-color: #000000;
scrollbar-highlight-color: #DEDEDE;
scrollbar-shadow-color: #DEDEDE;
scrollbar-arrow-color: #DEDEDE;		 Ici on definit, la couleur de la scrollbar  et les bordures autour de la page et la couleur de fond de la page.
.message{
border:double 15px #000000;
font-family: Verdana;
font-size: 12pt;
font-weight:bold;
color: #DEDEDE;
background-color:#000000;		 Ici on définit la boite de texte : Police, sa taille et la couleur.

La bordure de la boite de texte et sa couleur ( attention  : pour que la page soit plus jolie,  j' ai fait en sorte que la bordure et la couleur de fond soit invisible, donc de la meme couleur que la page )



5- Insertion du contenu de la page.
Nous allons cette fois ci, tout insérer en même temps.

Copier ces  lignes
<!-- images de la bordure de droite, avec la largeur en pixel -->
<!-- les images doivent toutes avoir la meme largeur -->
<img src="tuile1.jpg" width="250" id="bkg" class="offscrn">
<img src="tuile2.jpg" width="250" id="bkg2" class="offscrn">
<img src="tuile3.jpg" width="250" id="bkg3" class="offscrn">

<!-- Bordure scintillante -->
<img src="tuiledeco.jpg" id="glitter" class="offscrn">

<!-- container pour le scroll - ne rien changer -->
<div id="container" class="offscrn" style="width: 10px; height: 10px; border-left: 0px #DEDEDE ridge; border-right: 0px #DEDEDE ridge; z-index:1;">
</div>

<!-- container de la tuile scintillante -->
<div id="cg" class="offscrn" style="width:10px; height:10px; z-index:-1; border-right:0px ridge #DEDEDE; border-left:0px ridge #DEDEDE;">
</div>

<!-- zone de texte  -->
<div id="txt" class="message" style="overflow:auto; padding:15px; text-align:center; position: absolute; left: 5%; top: 5%; height: 90%; width: 90%; visibility: hidden; z-index:1;">
<center>
<!-- petites images et leurs dimmensions -->
<img src="image1.jpg" width="80" height="80" id="pic1">
<img src="image2.jpg" width="80" height="80" id="pic2">
<img src="image3.jpg" width="80" height="80" id="pic3">
<br><br>
</center>
 Ecrire le texte ici </div>

<div id="tg" class="offscrn" style="width:10px; height:10px; z-index:-1; border:0px ridge #DEDEDE;">
</div>

Puis coller les sous la première balise BODY, notée   <body>, environ sur la ligne 32 comme ceci :





Explications



<!-- images de la bordure de droite, avec la largeur en pixel -->
<!-- les images doivent toutes avoir la meme largeur -->
<img src="tuile1.jpg" width="250" id="bkg" class="offscrn">
<img src="tuile2.jpg" width="250" id="bkg2" class="offscrn">
<img src="tuile3.jpg" width="250" id="bkg3" class="offscrn">
  Ici, on place les tuiles qui scrollent, en notant bien leur largeur.
*Attention de bien avoir la même largeur *
<!-- Bordure scintillante -->
<img src="tuiledeco.jpg" id="glitter" class="offscrn">
 Ici on place la tuile scintillante ou le glitter
<!-- container pour le scroll - ne rien changer -->
<div id="container" class="offscrn" style="width: 10px; height: 10px; border-left: 0px #DEDEDE ridge; border-right: 0px #DEDEDE ridge; z-index:1;">
</div>
<!-- container de la tuile scintillante -->
<div id="cg" class="offscrn" style="width:10px; height:10px; z-index:-1; border-right:0px ridge #DEDEDE; border-left:0px ridge #DEDEDE;">
</div>		 Les containers dans lesquels sont insérées les tuiles
<!-- zone de texte  -->
<div id="txt" class="message" style="overflow:auto; padding:15px; text-align:center; position: absolute; left: 5%; top: 5%; height: 90%; width: 90%; visibility: hidden; z-index:1;">
<center>

 La zone de texte
<!-- petites images et leurs dimmensions -->
<img src="image1.jpg" width="80" height="80" id="pic1">
<img src="image2.jpg" width="80" height="80" id="pic2">
<img src="image3.jpg" width="80" height="80" id="pic3">		  Les petites vignettres assortie aux tuiles



Pour votre version, modifier juste les nom des tuiles et les dimmensions

7- Insertion du script
A la suite de ceci, nous allons placer le script, toujours entre les 2 balises BODY.

Copier et coller le script à la suite de ce que vous venez de placer ( environ ligne 62 )
<script language="VBScript">
'------------------------------------------
'please leave all these lines in
'Script (19) gemaakt door Jetty
'www.molehofje.com
'Tekst tussen deze lijnen aub laten staan
'------------------------------------------
Option Explicit
SetLocale("en-gb")

Dim docw, doch, c, d, pw, b, spacer, gb, tb, gw, flag

'-------User Settings---------
REM border width of container div
b=0

REM border width of container glitter div
gb=0

REM border width of text glitter div
tb=0

REM glitter width
gw=6

REM space around text
spacer=40

c=0
d=0
pw=bkg.width

sub window_onload()
docw=document.body.clientWidth
doch=document.body.clientHeight
container.style.backgroundImage="URL("&bkg3.src&")"
cg.style.backgroundImage="url("&glitter.src&")"
tg.style.backgroundImage="url("&glitter.src&")"
container.style.borderRightWidth=b&"px"
container.style.borderLeftWidth=b&"px"
cg.style.borderLeftWidth=gb&"px"
cg.style.borderRightWidth=gb&"px"
tg.style.borderWidth=tb&"px"
cg.style.top=0
cg.style.left=docw-(gb*2+gw*2+b*2+pw+spacer)
cg.style.height=doch
cg.style.width=pw+b*2+gw*2+gb*2
container.style.left=docw-(gb+gw+pw+b*2+spacer)
container.style.top=0
container.style.height=doch
container.style.width=pw+b*2
if docw<=(pw+b*2+gw*4+gb*2+spacer*3+tb*2) or doch<=(spacer*3+tb*2+gw*2) then
   tg.style.visibility="hidden"
   txt.style.visibility="hidden"
else
tg.style.top=spacer
tg.style.height=doch-spacer*2
tg.style.left=spacer
tg.style.width=docw-(b*2+gw*2+gb*2+pw+spacer*3)
tg.style.visibility="visible"
txt.style.top=spacer+tb+gw
txt.style.height=doch-(spacer*2+tb*2+gw*2)
txt.style.left=spacer+tb+gw
txt.style.width=docw-(pw+b*2+gw*4+gb*2+spacer*3+tb*2)
txt.style.visibility="visible"
end if
end sub

sub pic1_onmousedown()
container.style.backgroundImage="URL("&bkg.src&")"
flag=1 'scroll up
end sub

sub pic2_onmousedown()
container.style.backgroundImage="URL("&bkg2.src&")"
flag=0 'scroll down
end sub

sub pic3_onmousedown()
container.style.backgroundImage="URL("&bkg3.src&")"
flag=1 'scroll up
end sub

window.setInterval "scrollit", 64

sub scrollit ()
c=c+1
cg.style.backgroundPosition=c&" "&c
tg.style.backgroundPosition=-c&" "&-c
if flag=0 then container.style.backgroundPosition=d&" "&c else container.style.backgroundPosition=d&" "&-c
end sub

sub window_onresize()
window_onload
end sub

</script>


Comme ceci:
sub pic1_onmousedown()
container.style.backgroundImage="URL("&bkg.src&")"
flag=1 'scroll up
end sub

sub pic2_onmousedown()
container.style.backgroundImage="URL("&bkg2.src&")"
flag=0 'scroll down
end sub

sub pic3_onmousedown()
container.style.backgroundImage="URL("&bkg3.src&")"
flag=1 'scroll up
end sub		 Cette partie du script permet en cliquant sur une des vignettes de modifier la tuile qui scrolle


9- Insertion de la musique.
Après les deux balises du titre notées <title> et </title>, copier et coller ce code.
<bgsound src="music.mid" balance="0" volume="0" loop="-1">


Modifier "music.mid" par le nom de votre musique.


13 - Votre page est terminée.

Vous pouvez visualiser votre page.

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