par
Cyrano » 27 août 2005, 12:00
Bon, ok. Alors le problème de l'évènement dans la balise body, c'est que çe ne peut pas fonctionner sur la valeur de l'identifiant de la photo: la fonction ap() attend en paramètre la valeur du bouton "Start" ou "Stop". Si tu mets "Start", ça veut dire que le diaporama va démarrer au chargement de la page, sinon, autant ne rien mettre du tout. Mais si tu veux lancer automatiquement le diaporama, alors il faut mettre onload="ap('Start')" mais ça ne dit pas où le commencer.
Donc il faut savoir à quel endroit on démarre le diaporama. Ce que j'essayerais (sous réserve, à tester) ce serait d'envoyer un second paramètre, en l'occurence l'image en cours. Le code complet ressemblerait donc à ceci:
<html>
<head>
<title></title>
<script language="JavaScript" type="text/javascript">
/* DEBUT DU SCRIPT DIAPORAMA */
var current = 0;
function next()
{
// forward one image
if(document.formname.slide[current+1])
{
document.images.show.src = document.formname.slide[current+1].value;
document.formname.slide.selectedIndex = ++current;
}
else
{
first();
}
}
function previous()
{
// back on image
if((current-1) >= 0)
{
document.images.show.src = document.formname.slide[current-1].value;
document.formname.slide.selectedIndex= --current;
}
else
{
last();
}
}
function first()
{
// jump to first image
current=0;
document.images.show.src = document.formname.slide[0].value;
document.formname.slide.selectedIndex=0;
}
function last()
{
// this is jump to last image
current=(document.formname.slide.length-1);
document.images.show.src = document.formname.slide[current].value;
document.formname.slide.selectedIndex=current;
}
function ap(text, img)
{
// this controls the auto-play and/or auto-stop
document.formname.slidebutton.value=(text == "Stop") ? "Start" : "Stop";
rotate(img);
}
function change()
{
// this is for the pulldown menu
current=document.formname.slide.selectedIndex;
document.images.show.src = document.formname.slide[current].value;
}
function rotate(img)
{
if (document.formname.slidebutton.value == "Stop")
{
current =(img = "") ? ((current == document.formname.slide.length-1) ? 0 : current+1) : img;
document.images.show.src = document.formname.slide[current].value;
document.formname.slide.selectedIndex = current;
window.setTimeout("rotate()", 4000);
}
}
/* FIN DU SCRIPT DIAPORAMA */
</script>
</head>
<!-- ICI, il manque la balise </head>, le JavaScript ne peut pas être avant la balise body et après la balise </head> -->
<?
// connection à la base de données
mysql_connect("localhost","root","");
mysql_select_db("immobilier");
$req = mysql_query("SELECT * FROM annonces WHERE id='". $id ."'");
$i=0;
$id=mysql_result($req,$i,"id");
$Image1 = mysql_result($req,$i,"Image1");
$Image2 = mysql_result($req,$i,"Image2");
$Image3 = mysql_result($req,$i,"Image3");
?>
<!-- ICI dans la balise <body>, la valeur de l'évènement onLoad se base sur quoi pour envoyer une valeur ? sur l'id de la photo -->
<body onLoad="ap('Start', document.formname.slide[current].value);">
<form name="formname" action="">
<img src="images_upload/" name="show" border="4" width="467">
<select name="slide" onChange="change();" size="0" style="display: none">
<option value="images_upload/<?php echo($Image1); ?>"></option>
<option value="images_upload/<?php echo($Image2); ?>"></option>
<option value="images_upload/<?php echo($Image3); ?>"></option>
</select>
<table summary="">
<tr>
<td align="center" bgcolor="#BDC5FE">
<center>
<input type="button" onclick="first();" value="|<<" title="Jump to beginning" style="border:1">
<input type="button" onclick="previous();" value="<<" title="Last Picture" style="border:1 ">
<input type="button" name="slidebutton" onClick="ap(this.value, document.formname.slide[current].value);" value="Start" title="AutoPlay" style="width:75;border:1">
<input type="button" onclick="next();" value=">>" title="Next Picture" style="border:1">
<input type="button" onclick="last();" value=">>|" title="Jump to end" style="border:1">
</center>
</td>
</tr>
</table>
</form>
</body>
</html>
Teste ça et dis nous si ça fonctionne ou non, et si ça ne fonctionne pas, détaille autant que possible ce qui se passe.
Bon, ok. Alors le problème de l'évènement dans la balise body, c'est que çe ne peut pas fonctionner sur la valeur de l'identifiant de la photo: la fonction ap() attend en paramètre la valeur du bouton "Start" ou "Stop". Si tu mets "Start", ça veut dire que le diaporama va démarrer au chargement de la page, sinon, autant ne rien mettre du tout. Mais si tu veux lancer automatiquement le diaporama, alors il faut mettre onload="ap('Start')" mais ça ne dit pas où le commencer.
Donc il faut savoir à quel endroit on démarre le diaporama. Ce que j'essayerais (sous réserve, à tester) ce serait d'envoyer un second paramètre, en l'occurence l'image en cours. Le code complet ressemblerait donc à ceci:
[php]<html>
<head>
<title></title>
<script language="JavaScript" type="text/javascript">
/* DEBUT DU SCRIPT DIAPORAMA */
var current = 0;
function next()
{
// forward one image
if(document.formname.slide[current+1])
{
document.images.show.src = document.formname.slide[current+1].value;
document.formname.slide.selectedIndex = ++current;
}
else
{
first();
}
}
function previous()
{
// back on image
if((current-1) >= 0)
{
document.images.show.src = document.formname.slide[current-1].value;
document.formname.slide.selectedIndex= --current;
}
else
{
last();
}
}
function first()
{
// jump to first image
current=0;
document.images.show.src = document.formname.slide[0].value;
document.formname.slide.selectedIndex=0;
}
function last()
{
// this is jump to last image
current=(document.formname.slide.length-1);
document.images.show.src = document.formname.slide[current].value;
document.formname.slide.selectedIndex=current;
}
function ap(text, img)
{
// this controls the auto-play and/or auto-stop
document.formname.slidebutton.value=(text == "Stop") ? "Start" : "Stop";
rotate(img);
}
function change()
{
// this is for the pulldown menu
current=document.formname.slide.selectedIndex;
document.images.show.src = document.formname.slide[current].value;
}
function rotate(img)
{
if (document.formname.slidebutton.value == "Stop")
{
current =(img = "") ? ((current == document.formname.slide.length-1) ? 0 : current+1) : img;
document.images.show.src = document.formname.slide[current].value;
document.formname.slide.selectedIndex = current;
window.setTimeout("rotate()", 4000);
}
}
/* FIN DU SCRIPT DIAPORAMA */
</script>
</head>
<!-- ICI, il manque la balise </head>, le JavaScript ne peut pas être avant la balise body et après la balise </head> -->
<?
// connection à la base de données
mysql_connect("localhost","root","");
mysql_select_db("immobilier");
$req = mysql_query("SELECT * FROM annonces WHERE id='". $id ."'");
$i=0;
$id=mysql_result($req,$i,"id");
$Image1 = mysql_result($req,$i,"Image1");
$Image2 = mysql_result($req,$i,"Image2");
$Image3 = mysql_result($req,$i,"Image3");
?>
<!-- ICI dans la balise <body>, la valeur de l'évènement onLoad se base sur quoi pour envoyer une valeur ? sur l'id de la photo -->
<body onLoad="ap('Start', document.formname.slide[current].value);">
<form name="formname" action="">
<img src="images_upload/" name="show" border="4" width="467">
<select name="slide" onChange="change();" size="0" style="display: none">
<option value="images_upload/<?php echo($Image1); ?>"></option>
<option value="images_upload/<?php echo($Image2); ?>"></option>
<option value="images_upload/<?php echo($Image3); ?>"></option>
</select>
<table summary="">
<tr>
<td align="center" bgcolor="#BDC5FE">
<center>
<input type="button" onclick="first();" value="|<<" title="Jump to beginning" style="border:1">
<input type="button" onclick="previous();" value="<<" title="Last Picture" style="border:1 ">
<input type="button" name="slidebutton" onClick="ap(this.value, document.formname.slide[current].value);" value="Start" title="AutoPlay" style="width:75;border:1">
<input type="button" onclick="next();" value=">>" title="Next Picture" style="border:1">
<input type="button" onclick="last();" value=">>|" title="Jump to end" style="border:1">
</center>
</td>
</tr>
</table>
</form>
</body>
</html>[/php]
Teste ça et dis nous si ça fonctionne ou non, et si ça ne fonctionne pas, détaille autant que possible ce qui se passe.