[Résolu] Problème d'execution de script Javascript

El-PiouPiou1503 · le 12 juin 2007

Bonjour à toutes et bonjour à tous.

Je suis en train de faire un petit site perso en html, php et un peu de javascript.

J'ai sur une des pages de ce site une galerie de photo avec une sorte de "slideshow"

d'image (sorte de menu qui défille) où les images sont en miniature. J'ai également

deux boutons pour gérer le défilement vers la gauche ou la droite de ce slideshow.

Et lorsque l'on clique sur une image miniature, celle-ci s'affiche en plus grand sur la page, en dessous du slideshow.

j'ai donc 2 scripts :

- un pour faire défiller vers la gauche ou la droite

- et un pour l'affichage de l'image selectionnée en grand. (celui-ci marche parfaitement)

Mon souci est que lorsque je clique sur un des boutons pour faire défiller mes images (vers la gauche ou la droite),

le script associé s'exécute bien, mais il ne peut s'exécuter qu'une seul fois...j'ai beau recliquer encore et encore, rien ne se passe...

je ne comprend pas pourquoi...

Voici les code en javascript,php et html concernés :

Fonction pour afficher l'image en grand :

function displayPics()
{
var photos = document.getElementById('galerie_mini');
// On récupère l'élément ayant pour id galerie_mini
var liens = photos.getElementsByTagName('a');
// On récupère dans une variable tous les liens contenu dans galerie_mini
var big_photo = document.getElementById('big_pict');
// Ici c'est l'élément ayant pour id big_pict qui est récupéré, c'est notre photo en taille normale

var titre_photo = document.getElementById('photo').getElementsByTagName('dt')[0];
// Et enfin le titre de la photo de taille normale

// Une boucle parcourant l'ensemble des liens contenu dans galerie_mini
for (var i = 0; i < liens.length; ++i) {
	// Au clique sur ces liens 
	liens[i].onclick = function() {
		big_photo.src = this.href; // On change l'attribut src de l'image en le remplaçant par la valeur du lien
		big_photo.alt = this.title; // On change son titre
		titre_photo.firstChild.nodeValue = this.title; // On change le texte de titre de la photo
		return false; // Et pour finir on inhibe l'action réelle du lien
	};
}
}
window.onload = displayPics;

Fonctions pour le défillement des images :

function Slide(direct,id)
{
a=document.getElementById(id).style;
for (var i = 0; i < 2000; ++i)
	{
	if (direct=='gauche')
		{
		a.left=a.left-50;
		}
	if (direct=='droite')
		{
		a.left=a.left+50;
		}
	}
}

code source de la page web :

<html>
<head><title>PiouPiou</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link rel="stylesheet" media="screen" type="text/css" title="SLAP" href="style.css" />
<link REL="SHORTCUT ICON" HREF="./images/icone.ico">
<script type="text/javascript" src="script.js"></script>

</head>
<body>
<div class="haut"></div>
<div class="menu">
<ul id="lienMenu">
	<li><a href="index2.php">Accueil</a></li>
	<li><a href="textes.php">Textes et poèmes</a></li>
	<li><a href="photos.php">Photos</a></li>
	<li><a href="graphisme.php">Graphisme</a></li>
	<li><a href="livreOr.php">Livre d'or</a></li>
</ul>
</div>
<div class="hautCorp"></div>
<div class="corps">
<div class="frame">
<div id="galerie">
<a id="truc01" href="java script:Slide('gauche','images');"><input type="button" value="<"></a> <a id="truc02" href="java script:Slide('droite','images');"><input type="button" value=">"></a>
<? 
echo "<div id='galerie_mini'>
<span id='images' style='position: relative; top: 3'>
	<nobr>";



$tof=array("./photos/maCherieNoel.JPG","./photos/DSC02443.JPG","./photos/DSC02445.JPG","./photos/DSC02458.JPG",
"./photos/DSC02465.JPG","./photos/DSC_2052.JPG","./photos/DSC_2073.JPG","./photos/DSC_2074.JPG",
"./photos/DSC_2138.JPG","./photos/DSC_2141.JPG");


for ($i=0;$i<10;$i++)
	{
	$j=$i+1;
	$dim=getimagesize($tof[$i]);
	if ($dim[0]>$dim[1])
		{
		echo "<a href=$tof[$i] title='Photo $j'><img src=$tof[$i] alt='Photo $j' width='100' align='middle' /></a> ";
		}
	if ($dim[0]<$dim[1])
		{
		echo "<a href=$tof[$i] title='Photo $j'><img src=$tof[$i] alt='Photo $j' height='100' align='middle' /></a> ";
		}
	}
echo "</marquee>";

?>
</span>
</nobr>

</div>
<dl id="photo">
	<dt>Photos</dt>
	<dd><img id="big_pict" src="./photos/maCherieNoel.JPG" alt="Photo 1" width="100%" /> </a> </dd>
</dl>
</div>
<br/>
</div>
</div>
<div class="basCorps"></div>
<div align='center' class="bas">© By PiouPiou</div>
</body>
</html>

Voili voilou, j'espère que l'un (ou l'une) d'entre vous pourras m'aider. Merci d'avance.

Edit : J'ai résolu mon problème tout seul pas longtemps après avoir posté...désolé, le topic peut-être supprimé...encore Désolé :cap:

Quarky · le 12 juin 2007

Pas besoin de le supprimer :transpi:

Par contre tu peux indiquer la solution trouvée et ajouter la balise [Résolu] :francais: Ton expérience peut aider d'autres personnes.

El-PiouPiou1503 · le 13 juin 2007

Alors enfait pour résoudre mon problème j'ai completement changer mon code, j'explique (je fournirai le nouveau code après don't worry !!!) :

dans ma page web pour le slideshow j'ai finalement utilisé une balise <marquee> . J'ai ajouté 3 boutons, un pour faire défiler vers la gauche, un pour faire défiler vers la droite, et un pour stopper le défilement. Au survole des boutons droite et gauche, cela change de sens, et au clique sur le bouton stop, le défilement s'arrète. Et voila donc le script javascript associé et le code de la page web:

<html>
<head><title>PiouPiou</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link rel="stylesheet" media="screen" type="text/css" title="SLAP" href="style.css" />
<link REL="SHORTCUT ICON" HREF="./images/icone.ico">
<script type="text/javascript" src="script.js"></script>

</head>
<body>
<div class="haut"></div>
<div class="menu">
<ul id="lienMenu">
	<li><a href="index2.php">Accueil</a></li>
	<li><a href="textes.php">Textes et poèmes</a></li>
	<li><a href="photos.php">Photos</a></li>
	<li><a href="graphisme.php">Graphisme</a></li>
	<li><a href="livreOr.php">Livre d'or</a></li>
</ul>
</div>
<div class="hautCorp"></div>
<div class="corps">
<div class="frame">
<div id="galerie">
<input type="button" value="<" onMouseOver="java script:Slide('gauche','images');" ><input type="button" value="stop" onClick="defil.stop();"><input type="button" value=">" onMouseOver="java script:Slide('droite','images');"> <!--boutons de controles du défilement-->
<? 
$direct='left';
echo "<div id='galerie_mini'>
<span id='images' style='position: relative; top: 3'>
	<nobr>";
echo "<marquee id='defil' behavior='scroll' direction=$direct width='100%' height='100%' scrollamount='2' scrolldelay='0' >"; <!--je donne un 'id' a ma balise pour l'utilisé dans mon script javascript -->
$tof = array();											//tableau vide pour stoquer les chemins des photos a afficher
$dir = opendir('photos');							  //j'ouvre le dossier dans lequel se trouve les photos
$i=0;
$z=0;
while ($file = readdir($dir))						  
{
if (($file != '..') && ($file != '.'))
	{
	$tof[$i]= "./photos/".$file;		   //je récupère les nom des photos et je les stoque dans le tableau.
	$i++;
	$z++;
	}
}
closedir($dir);

for ($i=0;$i<$z;$i++)
	{
	$j=$i+1;
	$dim=getimagesize($tof[$i]);
	if ($dim[0]>$dim[1])
		{
		echo "<a href=$tof[$i] title='Photo $j'><img id='bouh' src=$tof[$i] alt='Photo $j' width='100' align='middle' /></a> ";
		}
	if ($dim[0]<$dim[1])
		{
		echo "<a href=$tof[$i] title='Photo $j'><img id='bouh' src=$tof[$i] alt='Photo $j' height='100' align='middle' /></a> ";
		}
	}

echo "</marquee>";
?>
</span>
</nobr>

</div>
<dl id="photo">
	<dt>Photos</dt>
	<dd><img id="big_pict" src="./photos/maCherieNoel.JPG" alt="Photo 1" width="100%" /> </a> </dd>
</dl>
</div>
<br/>
</div>
</div>
<div class="basCorps"></div>
<div align='center' class="bas">© By PiouPiou</div>
</body>
</html>

function Slide(direct,id)
{
	var b=document.getElementById('defil');	 //je récupère l'élément dont l'id est 'defil', c'est à dire la balise marquee.
	if (direct=='gauche')
		{
		b.direction='left';							  // si lors de l'appel de la fonction (au survol d'un bouton) 'gauche' est passé en paramètre, la direction du			marquee devient 'left'
		}
	if (direct=='droite')
		{
		b.direction='right';						   // si lors de l'appel de la fonction (au survol d'un bouton) 'droite' est passé en paramètre, la direction du marquee devient 'right'
		}
}

Euh ben voila c'est à peu près tout, pour un apperçu du résultat c'est ici => Démo

Connexion

[Résolu] Problème d'execution de script Javascript

Messages recommandés

El-PiouPiou1503

Lien vers le commentaire

Partager sur d’autres sites

Quarky

Lien vers le commentaire

Partager sur d’autres sites

El-PiouPiou1503

Lien vers le commentaire

Partager sur d’autres sites

Archivé

Naviguer

Activité