Bonjour à toutes et à tous,
Bon maintenant, dekoi k'on cause ? :-))
Ah oui, j'allais oublié : la source du CCG n°9...
Hè, hé, y en a qu'on crût m'avoir. Au hasard, des noms : Martine, Laurence et Patricia ! :-))
Ben vi, au dernier moment, j'ai changer le script d'épaule. :-)) Je voulais en proposer un en premier et qui me plaisait bien...
Mais impossible, pour moi, de l'adapter avec une ouverture par pop-pup en plein écran.
Gérard Ferrandez actuellement à Nouve Iorque, s'était proposé
mais il a d'autres chats à fouetter :-))
Bon, s'il n'y a que çà, Gérard Ferrandez en a écrit beaucoup, des SCRIPTS.
Celui que je vous ais mitonner, toujours de Gérard mais modifié par Jerryboy, complété par EVP (?), ne date que du 09 juillet 2001 !
Encore LUI. C'est Richard qui m'a proposé, dans fr.testzone (hé, hé, les tests c'est pas pour les cochons... ) ce script de remplacement. Et il me plaît bien quand-même !
Alors, zou... trêve de bavardage, AU TRAVAIL ! :-))
L'analyse de la source
Tout ce qui apparaît en rouge (j'ai dis en rouge, pas en rose !),
peut être modifié voire supprimé...
Interdiction de toucher à ce qui apparaît en noir
ou le vert l'accompagnant !!!
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<title>CCG n°9 - Sous le ciel de Paris - Sur un script de Gérard Ferrandez, de Jerryboy et EVP</title>
<META http-equiv=Content-Type content="text/html; charset=iso-8859-1">
<meta name="Description" content="Sur un script de Gérard Ferrandez ">
Dans la définition des styles, NE SUPPRIMER PAS le
"BEHAVIOR" de v\.*
A partir de là, vous
faîtes ce que vous vous voulez. Non mais, nous sommes en république
!
<STYLE>
v\:* {BEHAVIOR: url(#default#VML)}
BODY {BORDER-RIGHT: 1px inset #ACA08A; MARGIN-TOP: 0px; MARGIN-LEFT: 0px; font-weight: normal; font-size: 24px; FONT-FAMILY: English111 Vivace BT; BACKGROUND-COLOR: #ACA08A; border-color: #ACA08A}
</STYLE></HEAD>
L'image suivante de "background" n'est pas obligatoire.
<BODY bgColor=#ACA08A background="C:\Mes Documents\AnalyseMime\Images\Monuments\paves1.jpg" scroll=no onload=strt()>
En dessous, la zizique...
<bgsound balance=0 src="C:\chemin de votre musique\musique.mid" volume=0>
Maintenant, la définition du "bouton" d'ouverture de votre Pop-up :
<BUTTON style="background: none scroll #ACA08A repeat 0% 0%; left: -5%; color: #990000; position: absolute; top: 0%; font: bold 12px; cursor: hand; width: 110%" onclick="doPop()" alt="Click to enter FS mode" align="center">Le texte de votre bouton d'ouverture</BUTTON>
<!-- This message displayed when not full-screen -->
Traduction : Votre texte, en l'absence du plein écran (pop-up)
<MARQUEE style="padding-right: 10px; padding-left: 10px; font-weight: bold; font-size: 28px; color: maroon; font-family: English111 Vivace BT; position: absolute; top: 30px; text-align: left; background: #ACA08A; height: 60%; width: 70%; left: 20px; border-right: 2px inset #ACA08A; border-top: 2px outset #ACA08A; border-left: 2px outset #ACA08A; border-bottom: 2px inset #ACA08A" scrollAmount="1" scrollDelay="40" direction="up" behavior="scroll" height="100%">votre baratin, euh votre prose, euh votre contribution philosophique au CCG n°9</MARQUEE>
<!-- This DIV contains the FS HTML -->
Traduction : à ne pas changer
<DIV id=src style="DISPLAY: none">
<STYLE id=PopupStyle>
v\:* {BEHAVIOR: url(#default#VML)}
IMG {Z-INDEX: -1; POSITION: absolute}
</STYLE>
<!-- This is the text input box. Double-click when in the Edit mode and enter your message here. DO NOT delete outside the text area. The blocks of text are not visible until triggered by an image change. -->
Traduction : Le texte immobile, en milieu de page, correspondant à l'image qui défile (texte différent, ou non, pour chaque image).
Il vous faut au moins 2 images, donc deux légendes.
<!--filter: dropshadow(offx=1, offy=1,color=#ffffff,enabled=1);-->
<DIV id="textbox" style="color: maroon; font-size: 32px; font-family: English111 Vivace BT; font-weight: bold; padding-right: 10px; display: none; padding-left: 10px; left: 10px; padding-bottom: 10px; overflow: auto; width: 400px; padding-top: 10px; position: absolute; top: 10px; height: 50%; background-color: #a09090" align="center">
<SPAN id=T1 style="DISPLAY: inline">légende de votre image 1</SPAN>
<SPAN id=T2 style="DISPLAY: none">légende de votre image 2</SPAN>
<SPAN id=T3 style="DISPLAY: none">légende de votre image 3</SPAN>
<SPAN id=T4 style="DISPLAY: none">légende de votre image 4</SPAN>
<SPAN id=T5 style="DISPLAY: none">etc...</SPAN>
</DIV><!-- Button to exit Full Screen -->
La définition du "bouton" de fermerture de votre Pop-up :
<BUTTON style="z-index: 100; background: #ACA08A; left: 72%; color: #990000; position: absolute; top: 0%; font: bold" onclick="parent.objPopup.hide()" alt="Click to leave FS mode" align="center">Le texte de votre bouton de fermeture</BUTTON> </DIV>
<DIV></DIV><!-- End of FS HTML -->
<!-- These are the slide images - Number them sequentially -->
Traduction : Les images qui vont défiler les unes après les autres
<IMG id=pic1 style="LEFT: -1800px; POSITION: absolute; TOP: -1800px"
src="C:\chemin de l'image1\image1.jpg">
<IMG id=pic2 style="LEFT: -1800px; POSITION: absolute; TOP: -1800px"
src="C:\chemin de l'image2\image2.gif">
<IMG id=pic3 style="LEFT: -1800px; POSITION: absolute; TOP: -1800px"
src="C:\chemin de l'image3\image3.jpg">
<IMG id=pic4 style="LEFT: -1800px; POSITION: absolute; TOP: -1800px"
src="C:\chemin de l'image4\image4.jpg">
<IMG id=pic5 style="LEFT: -1800px; POSITION: absolute; TOP: -1800px"
src="C:\chemin de l'image5\etc...">
<!-- border image -->
<!-- background tile for FS -->
J'avons pô vu beaucoup de changement en modifiant les valeurs de LEFT et de TOP.
Vous pouvez faire varier le nombre des images, en plus (aîe, le poids !)...
ou en moins :
Exemple :
Si vous supprimez l'image5 (id=pic5), alors n'oubliez pas de supprimer également la légende correspondante (id=T5)
Attention, le respect d'une numérotation continue est très important :
Images 1 à 3: pic1 à pic3 ET Légendes 1 à 3 : T1 à T3
N'oubliez de changer numPics=5 dans le script et de le faire passer à numPics=3
Remarque : Les images peuvent être en jpg, ...ou en gif (attention au poids !) même gif transparent et animé...
Traduction : L' image de votre fond
<IMG id=bkg style="LEFT: -1800px; POSITION: absolute; TOP: -1800px"
src="C:\chemin de l'image de fond\fond.jpg">
Hé, hé, le script : J'ai rien changé au script de Gérard Ferrandez et de Jerryboy... heu, presque rien (uniquemement quelques valeurs numériques). Ceusses qui changeront des paramètres, devront l'expliquer en long et en large. Non mais ! :-)))
<SCRIPT language=JavaScript>
// ---------------------------------------------------------
// Version OE5.5 Plein Ecran -
// auguste 2000 - Gerard Ferrandez
// modification 1 par Jerryboy
// Additional script by EVP
// Updated for FS July 9, 2001
// ---------------------------------------------------------
// This sets up the FS
nx=window.parent.screen.width
ny=window.parent.screen.height
objPopup=window.createPopup();
objPopupBody=objPopup.document.body;
//objPopupBody.background="URL(" & bkg.src & ")"
// Insert the background image
objPopupBody.style.backgroundImage="URL("+bkg.src+")"
objPopupBody.style.border="#ACA08A"
objPopupBody.style.backgroundColor="#ACA08A"
// The next line inserts the gradient background -
// remove it for faster/smoother scrolling
//objPopupBody.style.filter="progid:DXImageTransform.Microsoft.Gradient(startColorstr=#60//fff0f0,endColorstr=#60546227,GradientType=0)"
objPopupBody.innerHTML="<div style='display:none'>"+PopupStyle.innerHTML+"</div>"+src.innerHTML
//-----------------------------------------------
fs=objPopupBody.all
var ow, oh, x, y, dx, dy, ds, count
// *** Enter the number of images here ***
numPics=5
// *** Border size in pixels
Bord=1
// *** Enter the type of frame to use ***
// *** 1 = Heart ***
// *** 2 = Oval ***
// *** 3 = Rectangle ***
// *** 4 = RoundedRectangle ***
shapeType=4
// It all starts here
function strt() {
if (shapeType==1) {
data="<v:shapetype id='heart' coordsize='21600,21600' path='m10860,2187c10451,1746,9529,1018,9015,730,7865,152,6685,0,5415,0,4175,152,2995,575,1967,1305,1150,2187,575,3222,242,4220,0,5410,242,6560,575,7597l10860,21600,20995,7597c21480,6560,21600,5410,21480,4220,21115,3222,20420,2187,19632,1305,18575,575,17425,152,16275,0,15005,0,13735,152,12705,730,12176,1018,11254,1746,10860,2187xe'></v:shapetype>"
C'est là que vous indiquez (en rouge) la taille initiale, taille unique, des images :
data=data+"<v:shape id='pf' type='#heart' style='position:absolute; top:-300; left:-300; width: 547; height: 500; z-index: 20' strokecolor='#a00000' strokeweight='4pt' fillcolor=''>"
data=data+"<v:stroke filltype='tile' src='"+bkg.src+"'/>"
data=data+"<v:fill id=frm type='frame' src='"+pic1.src+"'></v:fill></v:shape>"
}else{
if (shapeType==2) {st="oval"}
if (shapeType==3) {st="rect"}
if (shapeType==4) {st="roundrect"}
data="<v:"+st+" id='pf' style='position:absolute; top:-300; left:-300; width: 90; height: 90; z-index: 20' strokecolor='#ACA08A' strokeweight='1px' fillcolor=''>"
data=data+"<v:stroke filltype='tile' src='"+bkg.src+"'/>"
data=data+"<v:fill id=frm type='frame' src='"+pic1.src+"'></v:fill></v:"+st+">"
}
objPopupBody.insertAdjacentHTML("afterBegin", data)
count=1
}
function doPop() {
objPopup.show(0,0,nx,ny)
setUp()
}
function setUp() {
// Initialize stuff
J'ai modifier les valeurs suivantes : oh, ow, dx, dy et ds. Faites plusieurs essais.
Ces valeurs permettent d'ajuster la taille finale de vos images que vous voulez voir. A mon avis, oh et ow d'une part, dx, dy et ds d'autre part, doivent garder la même valeur.
maxY=(ny/2)-(Bord*2)
oh=50
ow=50
x=2
y=2
dx=4
dy=4
ds=4
// Position the text box
fs("textbox").style.backgroundColor=""
fs("textbox").style.width=nx/2
fs("textbox").style.height=(ny/2)
fs("textbox").style.top=ny/4
fs("textbox").style.left=nx/4
fs("textbox").style.display=""
// Start the bounce
doIt()
}
function nextPic() {
tt="T"+count
fs(tt).style.display="none"
count++
if
(count>numPics)
{count=1}
tt="T"+count
fs(tt).style.display=""
ss="pic"+count
fs("frm").src=document.all(ss).src
}
// Bounce
routine
function doIt()
{
// Move the
oval and check its position
x=x+dx
if (dx>0 &&
x>=nx-ow-(Bord*2)) {
dx=-dx
}
if (oh<(ny))
{
// Modify the
object dimensions
if
(y<maxY)
{
oh=oh+ds
ow=ow+ds
y=y+dy
if (dy>0 &&
y>=ny-oh)
{dy=-dy}
if (dy<0 &&
y<0)
{dy=-dy}
}
}
// Position the
oval
fs("pf").style.height=oh
fs("pf").style.width=ow
fs("pf").style.top=y
fs("pf").style.left=x
if (dx<0 &&
x<-ny) {
dx=-dx
nextPic()
setUp()
}else{
// Repeat
setTimeout("doIt()",8)
}
}
</SCRIPT>
</BODY></HTML>
Voili, voilou, Max