Forum |  HardWare.fr | News | Articles | PC | S'identifier | S'inscrire | Shop Recherche
2279 connectés 

  FORUM HardWare.fr
  Programmation
  HTML/CSS

  Javascript dans tableau Html

 



 Mot :   Pseudo :  
 
Bas de page
Auteur Sujet :

Javascript dans tableau Html

n°2132797
Romso75
Posté le 25-03-2012 à 19:19:35  profilanswer
 

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

mood
Publicité
Posté le 25-03-2012 à 19:19:35  profilanswer
 

n°2134066
Romso75
Posté le 30-03-2012 à 22:05:23  profilanswer
 

Personne pour m'aider ?
Merci
Romain


Aller à :
Ajouter une réponse
  FORUM HardWare.fr
  Programmation
  HTML/CSS

  Javascript dans tableau Html

 

Sujets relatifs
couleur de cellule tableau automatique fichier odt phptableau de chaine de caractère : enregistrement
Scrollbar d'un tableau un peu complexecomment lire tableau html en javascript ?
tableau html au milieu d'une fct javascript[HTML/Javascript/CSS] [resolu] spoiler une partie de tableau
[HTML/CSS/Javascript] Probleme background avec les lignes d'un tableau[javascript/html/php]Problème Tableau html / Back IE
[Javascript/HTML] : ligne de tableau en surbrillance sur mouse over ?[Javascript] tri d'un tableau HTML contenant des checkboxs
Plus de sujets relatifs à : Javascript dans tableau Html


Copyright © 1997-2018 Hardware.fr SARL (Signaler un contenu illicite / Données personnelles) / Groupe LDLC / Shop HFR