Bonjour,
Je cherche à faire défiler horizontalement des images selon le passage de la souris. J'ai trouvé sur internet un script Javascript que j'ai retravaillé afin de l'adapter complètement à mes besoins (appelle autant d'images qu'il y a d'activités en cours dans une badd Mysql et permet d'obtenir des renseignements sur ces activités en cliquant sur les images).
Le script obtenu fonctionne parfaitement si il est placé tel quel dans la page. Par contre, si je souhaite intégrer ce script dans un tableau il ne fonctionne plus. Comment ça se fait ? il n'est pas possible d'intégrer du javascript ou une balise span dans un tableau html ?
Voici le code :
<table border="0" width="1000" height="500">
<tr>
<td align="center" valign="middle">
*******Ne marche que si je commence à partir des lignes ci-dessous (donc sans tableau)
<span id="nul"></span>
<script type="text/javascript">
//||||||||||
//Variables|
//||||||||||
var timer,zero,w,lf,el;
var tab=new Array();
var pos=0;
var val=0;
var oui=true;
//||||||||||||||||||||||||
//Variables param?trables|
//||||||||||||||||||||||||
var M=300;// marge de gauche de la bo?te ? images;
var W=800;// largeur de la bo?te ? images
// (forc?ment sup?rieure ? la somme des largeurs des images);
var H=300;// hauteur de la bo?te ? images;
var delai=Math.round(W/4);// le d?lai initial est d'un quart
// de la largeur de la bo?te;
//|||||||||||||||||||||
//Cr?ation de la bo?te|
//|||||||||||||||||||||
var c=document.createElement('span');
c.id="c";
c.style.marginLeft=M+"px";
c.style.width=W+"px";
c.style.height=H+"px";
c.style.display="none";
c.style.position="relative";
c.style.overflow="hidden";
var dec=M+W/2;// position horizontale au centre de la bo?te;
//||||||||||||||||||||
//Cr?ation des images|
//||||||||||||||||||||
<?
require("identif.php4" );
mysql_connect($host, $user, $pass) or die("Impossible de se connecter à la base de données !" );
mysql_select_db($database) or die("Impossible de selectionner la base !" );
$req = mysql_query("SELECT * from experiences WHERE encours='1' ORDER BY date_deb_exp,theme_exp,cat_exp,nom_exp" );
$nb=mysql_num_rows($req);
for ($i=0 ; $i<$nb; $i++)
{
$id_exp=mysql_result($req,$i,"id_exp" );
?>
tab[<? echo $i ?>]=new Image();
tab[<? echo $i ?>].src="<? echo 'images/exp'.$id_exp.'.jpg' ?>";
tab[<? echo $i ?>].width="200";
tab[<? echo $i ?>].height="200";
tab[<? echo $i ?>].border="0";
tab[<? echo $i ?>].style.display="none";
tab[<? echo $i ?>].style.position="absolute";
c.appendChild(tab[<? echo $i ?>]);
function popupexp<? echo $id_exp ?>()
{
window.open("pages/detexp.php4?id_exp=<? echo $id_exp ?>","popup","resizable=no,scrollbars=yes,location=no,width=700,height=600,top=100,left=400" );
}
<?
}
?>
document.body.replaceChild(c,document.getElementById('nul'));
//|||||||||||||||||||||||
//D?placement des images|
//|||||||||||||||||||||||
function go(){
for(i in tab){
lf=parseInt(tab[i].style.left);
w=tab[i].width;
tab[i].style.left=lf+val+"px";
if(lf>pos-w){
tab[i].style.left=lf-pos+"px"};
if(lf<W-pos){
tab[i].style.left=lf+pos+"px"};
}
timer=setTimeout("go()",delai)
}
//||||||||||||||||
//Vitesse et sens|
//||||||||||||||||
function speed(e){
el= (!e) ? event.clientX : e.pageX;
if(el>=dec){
delai=W/2+2-(el-dec);val=2}// val=d?placement
else{
delai=W/2-1-(dec-el);val=-2};// val=d?placement
}
//||||||||||||||||||||||||
//Gestionnaire de "speed"|
//||||||||||||||||||||||||
c.onmousemove=speed;
//|||||||||||||||||||||||||||||||||||||||||||||||||
//Pause / relance du script / activation des liens|
//|||||||||||||||||||||||||||||||||||||||||||||||||
c.onclick=function(){
if(oui){clearTimeout(timer);oui=false;
for(i in tab){
tab[i].style.cursor="pointer"};
}
else{go();oui=true;
for(i in tab){
tab[i].style.cursor="default"};
};
}
//||||||||||||||||||||
//Lancement des liens|
//||||||||||||||||||||
<?
for($i=0 ; $i<$nb ; $i++)
{
$id_exp=mysql_result($req,$i,"id_exp" );
?>
tab[<? echo $i ?>].onclick=function(){
if(this.style.cursor=="pointer" ){
popupexp<? echo $id_exp ?>()
}
};
<?
}
?>
//|||||||||||||||||||||||||||||||||||||||||||||||||
//Positionnement des images et lancement du script|
//|||||||||||||||||||||||||||||||||||||||||||||||||
onload=function(){
c.style.display="block";
for(i in tab){
tab[i].style.left=pos+"px";
tab[i].style.top=(H-tab[i].height)/2+"px";
tab[i].style.display="inline";
pos+=tab[i].width+50;
}
go();
}
</script>
******** Ne marche plus si je rajoute les lignes suivantes :
</td>
</tr>
</table>
J'ai malheureusement vraiment besoin que ce script fonctionne à l'intérieur d'un tableau dans la mesure où cette page contenant le script sera appelée dans une cellule de tableau d'une autre page par une fonction php include.
Merci beaucoup de votre aide,
Romain
