CCG 4
Complément d'explications
Voili, voilà :-))
 
J'espère que cela fonctionne aussi pour vous qui aviez des erreurs pour le CCG 4 que Gilles nous avait proposé...
 
Afin de faciliter le travail, si cela fonctionne bien chez vous comme chez moi... je remets les explications de Gilles et ai rajouté en bleu celles que Ralph a trouvées...
 
Il n'a pas pu venir vous le dire lui même car il continu à se battre avec son ordi... mais vous pouvez voir qu'il pense toujours à nous ;-)))
 
@micalement
Patricia
 
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...) -->
 
<!-- Transformations pour les sons, afin d'éviter un message d'erreur
pour la majorité d'entre nous, faites par Ralph ;-)) -->
 
<!-- 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">
 
<!-- Et ici on rajoute son son en .Wav qui posait problème dans le script pour certains d'entre nous... -->
 
<BGSOUND balance=0 src="Chemin de votre son en .wav" volume=0>
 
<!-- 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+... &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; Gilles

</DIV>
 
<!-- Là on retire ce qu'il y avait de prévu pour encapsuler le son wav pour éviter l'erreur... -->
 
<!-- 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 ici Ralph a retiré la ligne qui faisait appel au son encapsulé
 
  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>
****************************************************************************

Menu