CCG 4
|
|
Bien, maintenant voilà quelques petites explications à
partir du code source. Ce script est tiré des modèles qu'Edgar V. Poirier met gentiment à la disposition de tous sur son site. Je me suis juste permis de rajouter quelques commentaires en français, pour
faciliter le boulot à ceux qui comme moi ont beaucoup de problèmes avec la
langue anglaise.
J'espère que vous aimerez ce petit jeu :o) J'ai mis les commentaires que j'ai ajoutés en vert et les données à changer en rouge.
Normalement il n'y a pas de problèmes pour refaire un post
à partir de ce script.
Si toutefois vous avez des questions il ne faut pas hésiter :o))) Amusez-vous bien
A+... Gilles
****************************************************************************
<!-- CCG n° 4 - 12 juillet 2001 - image et texte avec transition + wav (script d'Edgar V.Poirier) --> <HTML>
<HEAD>
<!-- Un grand Merci à Edgar V. Poirier
pour avoir mis ce script,
et plein d'autres aussi, à notre disposition :o))) --> <!-- Commentaires en français de la
Maison Borniol ;o)
(qui vous propose 15% d'réduction sur suicides collectifs...) --> <!-- Définition des couleurs des bordures
et de la police : -->
<STYLE type=text/css>
BODY { BACKGROUND-COLOR: #000000; COLOR: #ffff00; BORDER-BOTTOM: #ff0000 10px inset; BORDER-LEFT: #ff0000 10px outset; BORDER-RIGHT: #ff0000 10px inset; BORDER-TOP: #ff0000 10px outset; MARGIN-LEFT: 10px; MARGIN-RIGHT: 10px; PADDING-BOTTOM: 0px; PADDING-LEFT: 0px; PADDING-RIGHT: 0px; PADDING-TOP: 0px; FONT-FAMILY: Comic Sans MS; FONT-WEIGHT: normal; FONT-STYLE: italic; } </STYLE> </HEAD>
<BODY>
<!-- Commençons par la zik
(src="chemin/zik.mid")
J'ai mis le volume à -200 pour mieux entendre le boing :o) Mais tout dépend des sons que vous utiliserez... --> <BGSOUND balance=0 loop=infinite volume="-200"
src="G:\son\midis classés\titres\If You're Happy And You Know It.mid"> <!-- Ici vous insérez la superbe image
que vous voulez nous montrer (src="chemin/image").
Ne pas oublier d'indiquer sa Hauteur (HEIGHT) et sa Largeur (WIDTH). --> <!-- Image to display - Width and Height are required
-->
<IMG id=pic title="Click to toggle image size."
style="Z-INDEX: -1; LEFT: -1800px; WIDTH: 326px; POSITION: absolute; TOP: -1800px; HEIGHT: 394px" src="F:\imagerie\vrac\images\humoristique\cowboy cochon.jpg"> <!-- Ici on insère le fond de page
(src="chemin/fond").
Ne pas oublier d'indiquer sa Hauteur (HEIGHT) et sa Largeur (WIDTH). --> <!-- Fake background tile -->
<IMG id=bkg style="LEFT: -1800px; WIDTH: 75px;
POSITION: absolute; TOP: -1800px; HEIGHT: 75px" src="F:\imagerie\vrac\images\fonds\metal01.jpg"> <!-- Ici c'est la partie texte.
Dans le commentaire ci-dessous vous trouverez les divers choix possibles de transition. --> <!--
Enter the text in the Edit window of OE by double-clicking to display the box first. Reveal Transition filter choices are: 0 = Box In 12 = Random Dissolve 1 = Box Out 13 = Split Vertical In 2 = Circle In 14 = Split Vertical Out 3 = Circle Out 15 = Split Horizontal In 4 = Wipe Up 16 = Split Horizontal Out 5 = Wipe Down 17 = Strip Left-Down 6 = Wipe Right 18 = Strip Left-Up 7 = Wipe Left 19 = Strip Right-Down 8 = Vertical Blinds 20 = Strip Right-Up 9 = Horizontal Blinds 21 = Random Horizontal Bars 10 = Checkerboard Across 22 = Ramdom Vertical Bars 11 = Checkerboard Down 23 = Random (Only when first displayed) Transition Duration is in seconds. --> <!-- Affectez une valeur à transition
(voir choix au-dessus)
et une autre à duration (durée de la transition). N'exagérez pas pour la durée, sinon les lecteurs de votre message fuirons... ;o))) --> <DIV id=textbox style="PADDING-RIGHT: 5px; DISPLAY:
none; PADDING-LEFT: 5px;
FILTER: RevealTrans(transition=3,duration=8); LEFT: 10px; PADDING-BOTTOM: 5px; OVERFLOW: auto; WIDTH: 400px; PADDING-TOP: 5px; POSITION: absolute; TOP: 10px; HEIGHT: 300px"> <!-- Maintenant le texte proprement dit :
vous allez donc pouvoir
faire un peu de gymnastique avec vos petits doigts engourdis ;o)))--> Bonjour à toutes et tous
:o)
<P>Voici donc le Collé C'est Gagné n° 4. <P>Nous approchons de la plus grande période de congés annuels, donc j'ai choisi un truc très simple, car il faut rester en forme pour la suite des vacances :o). <P>C'est très facile vous allez voir, et ça donne un effet rigolo :o) <P>A+... Gilles </DIV> <!-- Insertion d'un OBJECT, pour faire
jouer le boing.wav à la demande : -->
<!-- MoviePlayer for the WAV file so we can play the
sound on-demand -->
<OBJECT id=yup style="LEFT: -1800px; POSITION: absolute; TOP: -1800px" classid=clsid:05589FA1-C356-11CE-BF01-00AA0055595A> <PARAM NAME="Appearance" VALUE="0"> <PARAM NAME="AutoStart" VALUE="0"> <PARAM NAME="AllowChangeDisplayMode" VALUE="-1"> <PARAM NAME="AllowHideDisplay" VALUE="0"> <PARAM NAME="AllowHideControls" VALUE="-1"> <PARAM NAME="AutoRewind" VALUE="-1"> <PARAM NAME="Balance" VALUE="30"> <PARAM NAME="CurrentPosition" VALUE="0"> <PARAM NAME="DisplayBackColor" VALUE="0"> <PARAM NAME="DisplayForeColor" VALUE="16777215"> <PARAM NAME="DisplayMode" VALUE="0"> <PARAM NAME="Enabled" VALUE="-1"> <PARAM NAME="EnableContextMenu" VALUE="-1"> <PARAM NAME="EnablePositionControls" VALUE="-1"> <PARAM NAME="EnableSelectionControls" VALUE="0"> <PARAM NAME="EnableTracker" VALUE="-1"> <!-- Ici le chemin du son wav :
(VALUE="chemin/votre.wav) -->
<PARAM NAME="Filename" VALUE="C:\OE55_blanks\boing.wav">
<PARAM NAME="FullScreenMode" VALUE="0">
<PARAM NAME="MovieWindowSize" VALUE="0"> <PARAM NAME="PlayCount" VALUE="1"> <PARAM NAME="Rate" VALUE="1"> <PARAM NAME="SelectionStart" VALUE="-1"> <PARAM NAME="SelectionEnd" VALUE="-1"> <PARAM NAME="ShowControls" VALUE="0"> <PARAM NAME="ShowDisplay" VALUE="0"> <PARAM NAME="ShowPositionControls" VALUE="0"> <PARAM NAME="ShowTracker" VALUE="0"> <PARAM NAME="Volume" VALUE="0"> </OBJECT> <!-- Et maintenant, certainement le plus
gros travail qu'Edgar a fourni
pour notre plus grand plaisir : le SCRIPT :o))) --> <!-- Mis à part les 3 premières valeurs,
je n'ai rien expliqué pour les
bidouilles dans le script. Ceux qui toucheront aux autres valeurs devront expliquer... héhé... Avis aux amateurs ;o))) --> <SCRIPT language=VBScript>
REM Edgar V. Poirier REM Revised August, 2000 Dim w, wW, wH, bH, sH, myTimer, picRatio, pL, pT, pH, pW, pW0, maxW, R, A, x, y, picPosition, sizeFlag, borderThickness, picStep Set w=document.body
REM ***** ici vous indiquez la taille de la police ***** REM *** Set the font size here - This overrides the Style
***
baseFont=12 REM ***** ici vous indiquez à nouveau la largeur de la bordure défini dans le style ***** REM Enter the border thickness here
REM As used in the style (0 if no border) borderThickness=10 REM ***** ici on détermine si l'image est à doite ("R") ou à gauche ("L") ***** REM *** Set final position of image ***
REM *** Enter "R" or "L" *** picPosition="L" REM *** Enter image growth increment here ***
picStep=8 REM Initialize stuff
sub setUp() wH=w.clientHeight wW=w.clientWidth REM Hide the text in case it is showing. textbox.style.display="none" frame.style.width=w.offsetWidth frame.style.height=wH REM Default Maximum Image size. maxW=(wW*.4) if maxW*picRatio>(wH-borderThickness*2) then maxW=((wH-borderThickness*2)/picRatio) REM Set the final horizontal placement if picPosition="L" then x=borderThickness else x=(wW-maxW-borderThickness) end if REM Initialize a few things y=0 A=0 REM Start with a small image pW=4 pH=pW*picRatio R=maxW-pW pT=0 pL=0 sizeFlag=0 pic.style.left=pL pic.style.top=pT REM Let's go growIt end sub REM Grow the image in a spiral
sub growIt() ClearTimeOut(myTimer) REM Is the image full size? if pW<int(maxW-picStep) then REM No. REM Grow the image pW=pW+picStep R=maxW-pW REM Set the rotation speed here - larger number=faster A=A+.09 pT=R*SIN(A)+y pL=R*COS(A)+x pH=pW*picRatio pic.style.width=pW pic.style.height=pH pic.style.left=pL pic.style.top=pT REM Repeat until done. myTimer=SetTimeOut("growIt",2) else REM Adjust the horizontal position if picPosition="R" and pL<int(w.clientWidth-pW) then pL=int(w.clientWidth-pW) if picPosition="L" and pL<>0 then pL=0 pic.style.left=pL REM Yes so make sure the text is ready if picPosition="L" then textbox.style.left=pW+borderThickness else textbox.style.left=borderThickness end if textbox.style.width=wW-(pW+borderThickness)+.0001 textbox.style.height=wH textbox.style.top=0 REM Play the sound yup.Run() REM then display the text. textbox.filters(0).Apply() textbox.style.display="" textbox.filters(0).Play() setframe end if end sub sub setframe()
frame.style.width=wW if textbox.scrollHeight>wH then frame.style.height=textbox.scrollHeight elseif pic.offsetHeight>wH then frame.style.height=pH+borderThickness*2 elseif pic.offsetHeight<wH then frame.style.height=wH end if end sub sub pic_onMouseDown()
if sizeFlag=0 then sizeFlag=1 pW=pW0 else sizeFlag=0 pW=maxW end if pH=pW*picRatio pic.style.width=pW pic.style.height=pH if picPosition="L" then pic.style.left=0 textbox.style.left=pW+borderThickness else pic.style.left=wW-pW textbox.style.left=0 end if pic.style.top=pT textbox.style.width=wW-(pW+borderThickness*2) setframe end sub REM Start here.
sub window_onLoad() REM Hide the scrollbar w.scroll="no" REM Get users screen resolution wx=window.screen.width REM and adjust font size to match. This will have the same size font REM appear no matter what the viewer's screen resolution is Res=Int(SQR(wx)-25) REM Set the font size w.style.fontSize = baseFont+Res pw0=pic.style.posWidth REM Remember the image ratio so we can resize it later. picRatio=pic.style.posHeight/pic.style.posWidth REM Create the background. data=data&"<DIV id=frame style='position:absolute;top:0;left:0;width:800;height:600" data=data&";z-index:-9;overflow:hidden'>" np=((wx/bkg.style.pixelWidth)+3)*((wx/bkg.style.pixelHeight)+3) fw=((wx/bkg.style.pixelWidth)+2)*bkg.style.pixelWidth data=data&"<span id=mainbgk style='position:absolute;top:0;left:0;width:"&fw&"'>" for i=1 to np data=data&"<img src='"&bkg.src&"'>" next data=data&"</span></DIV>" w.insertAdjacentHTML "afterBegin", data setUp end sub REM If window is resized then this will run.
sub window_onresize() setUp end sub </SCRIPT>
</BODY>
</HTML> **************************************************************************** |
|