|
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
 |
Cette
flèche pour marquer votre ligne
Clic
gauche pour la déplacer
|
Pour ce troisième cours, nous allons utiliser un papier
simple, une belle musique et un petit gif.
Matériel
: - un beau papier simple
- une belle musique
-un petit gif
* le tutoriel du papier que j' ai utilisé est ici
* comme les scripts utilisés sont assez longs, afin qu'ils
soient plus faciles à copier, je vous les joins sous forme
de bloc-note dans les dossier du matériel.
1 -
Créer un nouveau dossier et ranger le matériel dedans.
Voici mon dossier Cours 3 et son contenu.
2- Ouvrir Script - Edit.
Faire Fichier ===> enregistrer sous.
Repérer votre dossier Cours 3 et enregistrer cette page avec votre
matériel, en n'oubliant pas de la nommer.
3- Insertion du papier en fond de page.
Mettre en surbrillance ( en bleu) la première
balise body, notée ainsi <body>.
Coller cette ligne par dessus la surbrillance de la balise body ( ligne
6)
| <body
background="NomDeVotrePapier.jpg"> |
Vous avez ceci
Changer NomDeVotrePapier par le nom de votre papier.
Pour mon exemple : NomDeVotrePapier.jpg ====> Papier.jpg
Cliquer sur " aperçu" en bas de Script -Edit et vous devez
voir votre papier.
4- Insertion de la musique.
Copier cette ligne.
| <bgsound
src="musique.mid" loop="infinite"> |
Et coller la après les deux balises <title> et
</title>
Changer musique par le nom de votre musique.
Pour mon exemple musique.mid===> berceuse.mid
5- Insertion de la scrollbar assortie au papier.
<style>
BODY{
scrollbar-base-color:#XXXXXX;
scrollbar-track-color:#XXXXXX;
scrollbar-shadow-color:#XXXXXX;
scrollbar-arrow-color:#XXXXXX;
background-color:
#XXXXXX
}
</style> |
Copier et coller ce code après la 1 ère balise
Head, notée ainsi <head> (ligne 2)
Ne pas oublier de changer les #XXXXXX par les codes des couleurs
assorties à votre papier, comme nous l' avons
déjà vu dans les cours
précédents.
6- Donner le titre de votre page.
Entre les deux balises <title> et </title>
, inscrire le titre de votre page.
Comme ceci
7- Script pour le papier.
Nous allons insérer un premier script pour faire
défiler le papier simple.
Voici le code à copier
<DIV
id=imageholder
style="Z-INDEX:
-1; LEFT: 0px; POSITION: absolute; TOP: 0px">
<SCRIPT
language=VBScript>
<!--
direction="down"
' change the direction of the scroll here: "up" or "left" or "down" or
"right"
sizew=1024
' enter the width of the scrolling image here
sizeh=350
' enter the height of the scrolling image here
nail=0
source=document.body.background
tall=((screen.height\sizeh)+1)*3
wide=(screen.width\sizew)+1
if
direction="up" then
max=tall
axis=sizeh
placement=0
reset=0
elseif
direction="left" then
max=wide
axis=sizew
placement=0
reset=0
elseif
direction="down" then
max=tall
axis=0
placement=-sizeh
reset=-sizeh
elseif
direction="right" then
max=wide
axis=0
placement=-sizew
reset=-sizew
end if
document.write
"<pre>"
for temp=0
to max
if
direction="up" then
document.write
"<img id=pics"&temp&"
src><br>"
elseif
direction="left" then
document.write
"<img id=pics"&temp&" src>"
elseif
direction="down" then
document.write
"<img id=pics"&temp&"
src><br>"
elseif
direction="right" then
document.write
"<img id=pics"&temp&" src>"
end if
document.all("pics"&temp).src=source
next
document.write
"</pre>"
document.body.background="
"
sub
scroll()
if nail=1
then
exit sub
end if
if
placement < axis then
setTimeout
"move", 1
else
placement=reset
setTimeout
"move", 1
end if
end sub
sub move()
if
direction="up" then
imageholder.style.top=-placement
elseif
direction="left" then
imageholder.style.left=-placement
elseif
direction="down" then
imageholder.style.top=placement
elseif
direction="right" then
imageholder.style.left=placement
end if
placement=placement+1
setTimeout
"scroll", 1
end sub
sub
imageholder_onclick()
if nail=0
then
nail=1
else
nail=0
end if
scroll()
end sub
scroll()
-->
</SCRIPT> |
Copier et coller sous la balise <body> comprenant votre
papier , soit vers la ligne 16, comme ceci
Ensuite , voici les changements à faire:
sizew=1024
' enter the width of the scrolling image here ====> ici mettre la largeur du
papier
sizeh=350
' enter the height of the scrolling image here
==> ici
mettre la hauteur du papier
( Note * à la ligne 20, vous avez ceci
direction="down"
:
ceci indique la direction de défilement de votre papier.
Pour
votre création, amusez vous à la changer: down : défilement vers le bas
up : défilement vers le haut )
8- Visualiser votre page .
Vous devez voir votre papier simple défiler vers le bas.
9- Insertion du gif et de son script.
Pour ce script, choisi un petit gif.
Copier et coller ce script à la suite du précédent script,
soit vers la ligne 106
<script
language="JavaScript">
<!--
Under Water Mouse Script by kurt.grigg@virgin.net
Image0=new
Image();
Image0.src="papillon.gif";
Amount=8;
Ymouse=-50;
Xmouse=-50;
Ypos=new
Array();
Xpos=new
Array();
Speed=new
Array();
rate=new
Array();
grow=new
Array();
Step=new
Array();
Cstep=new
Array();
nsSize=new
Array();
ns=(document.layers)?1:0;
WinHeight=(document.layers)?window.innerHeight:window.document.body.clientHeight;
(document.layers)?window.captureEvents(Event.MOUSEMOVE):0;
function
Mouse(evnt){
Ymouse=(document.layers)?evnt.pageY-20:event.y-20;
Xmouse=(document.layers)?evnt.pageX:event.x;
}
(document.layers)?window.onMouseMove=Mouse:document.onmousemove=Mouse;
for (i=0;
i < Amount; i++){
Ypos[i]=Math.random()*WinHeight-Ymouse;
Xpos[i]=Xmouse;
Speed[i]=Math.random()*10+1;
Cstep[i]=0;
Step[i]=Math.random()*0.1+0.05;
grow[i]=4;
nsSize[i]=Math.random()*15+5;
rate[i]=Math.random()*0.5+0.1;
}
if (ns){
for (i =
0; i < Amount; i++){
document.write("<LAYER
NAME='sn"+i+"' LEFT=0 TOP=0><img src="+Image0.src+"
name='N'
width="+nsSize[i]+"
height="+nsSize[i]+"></LAYER>");
}
}
else{
document.write('<div
style="position:absolute;top:0px;left:0px"><div
style="position:relative">');
for (i =
0; i < Amount; i++){
document.write('<img
id="si" src="'+Image0.src+'"
style="position:absolute;top:0px;left:0px;filter:alpha(opacity=90)">');
}
document.write('</div></div>');
}
function
MouseBubbles(){
var
hscrll=(document.layers)?window.pageYOffset:document.body.scrollTop;
var
wscrll=(document.layers)?window.pageXOffset:document.body.scrollLeft;
for (i=0;
i < Amount; i++){
sy =
Speed[i]*Math.sin(270*Math.PI/180);
sx =
Speed[i]*Math.cos(Cstep[i]*5);
Ypos[i]+=sy;
Xpos[i]+=sx;
if
(Ypos[i] < -40){
Ypos[i]=Ymouse;
Xpos[i]=Xmouse;
Speed[i]=
6+Math.random()*3;
grow[i]=4;
nsSize[i]=Math.random()*15+5;
}
if (ns){
document.layers['sn'+i].left=Xpos[i]+wscrll;
document.layers['sn'+i].top=Ypos[i]+hscrll;
}
else{
si[i].style.pixelLeft=Xpos[i]+wscrll;
si[i].style.pixelTop=Ypos[i]+hscrll;
si[i].style.width=grow[i];
si[i].style.height=grow[i];
}
grow[i]+=rate[i];
Cstep[i]+=Step[i];
if
(grow[i] > 24) grow[i]=30;
}
setTimeout('MouseBubbles()',40);
}
MouseBubbles();
//-->
</script> |
Comme vous le voyez, les deux scripts se suivent.
10 - Personnalisation du script en fonction du gif.
* au début du script, vous avez ceci
Image0=new
Image();
Image0.src="papillon.gif"; ===> Ici noter le
nom de votre gif
Amount=8;
===> Ici,
c'est le nombre de gifs qui vont voler
* à la fin du script, vous avez ceci
setTimeout('MouseBubbles()',40);
====> Cela
correspond à la vitesse du mouvement de vos gifs.
Pour votre réalisation personnelle, amusez vous à
changer ces données.
11- Visualiser la page.
Vous devez voir votre papier défiler vers le bas et les gifs
voler vers le haut.
Félicitation, vous avez terminé.
Enregistrer votre travail, puis héberger votre page avec le
matériel.
|
|
|
|
