Forum d'entraide PHPFrance

Salut a tous!

Voila j'ai un petit probleme.. Je viens de faire une page qui charge toute les photo contenu dans un dossier puis qui les affiche.

Ensuite grace à scriptaculous toute les photos sont déplacable.
Seulement mon probleme est le suivant:
Si la une image est en dessous des autres images au départ, j'aimerais qu'après l'avoir déplacé elle se retrouve au dessus.
Pour la position je sias qu'il faut utiliser le style z-index mais je n'arrive pas justement a faire changer ce z-index.

La création de l'objet déplacable se fait en javascript avec scriptaculous et dragndrop par la ligne:

echo '<script type="text/javascript">new Draggable(\''.$i.'\'); </script>

Et voici la page pour ceux qui on pas trop compris le truc.

Ma question: Comment ajouter du z-index avec javascript.

Cette ligne ne fonctionne pas:

Code : Tout sélectionner

document.getElementByID(id).style.z-index = "12";

Voila le code de ma page:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
	<head>
	    <title>Photos</title>
	    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
		<link rel="stylesheet" type="text/css" media="screen" href="photo.css" />
		<script type="text/javascript" src="/data/lib/prototype.js"></script>
        <script type="text/javascript" src="/data/lib/scriptaculous.js"></script>
        <script type="text/javascript" src="/data/lib/dragdrop.js"></script>
	</head>
	<body>
		<?php
		function afficherFichiers($rep) 
		{ 
			$dir = opendir($rep); 
			$i = 0;
			$top = 5;
			$left = 5;
			$z = 0;
			echo '<div id="cadre" style="position:relative;width:100%;weigth:100%;">
			';
			while ($File = readdir($dir)) 
			{ 
				if ($i > 1)
				{
					if($File != "." && $File != "..") 
					{ 
						$filename=$File; 
						$extension=strrchr($filename,'.');
						$extension=substr($extension,1) ; 
						if ($extension == 'jpg' || $extension == 'JPG' || $extension == 'JPEG' || $extension == 'jpeg')
						{
							echo '<div id="'.$i.'" style="top:'.$top.'px; left:'.$left.'px;z-index:'.($z).'" class="photo" >';
							echo '<img src="'.$File.'" class="img" width="320"/><br/>';
							echo '</div>';
							echo '<script type="text/javascript">new Draggable(\''.$i.'\'); </script>
							';
							$top = $top + 10;
							$left = $left + 15;
							$z++;
						}
					}
				}
				$i++;
			}
			echo '</div>';
			closedir($dir); 
		} 

		afficherFichiers("."); ?>
		</div>
	</body>
</html>

Cette ligne ne fonctionne pas: Code:
document.getElementByID(id).style.z-index = "12";

Lorsque t'as changé ton z-index pour l'image qui doit être au dessus est ce que t'as pensé à changer le z-index des autres images? pour faire que les autres images soient en dessous et non le même z-index?

et as-tu mis tonid comme ça?:

Code : Tout sélectionner

document.getElementByID(tonID).style.z-index = "12";

z-index doit recuperer une valeur numérique.

document.getElementByID(id).style.z-index = 12 ;

Plutôt que de chaque fois additioner les z-index, je serais d'avis de créer des classes d'image, dont chaque image sera une instance, dans un tableau.

Après, il sera facile d'appeler chaque objet pour le replacer dans l'ordre de sélection, selon son niveau.

Ou bien, pour rester dans du procédural, un simple tableau, avec quelques fonctions de réorganisation et d'affichage.

Attention, en javaScript, on écrit pas :

Code : Tout sélectionner

document.getElementByID(id).style.z-index = 12 ;

mais :

Code : Tout sélectionner

document.getElementByID(id).style.zIndex = 12 ;

Voir la liste des propriétés css qu'on peut manipuler via JavaScript.

et il y a pas moyen de mieux faire avec prototype ?

Code : Tout sélectionner

// Avec prototype 1.6
$(id).setStyle("z-index:12");
//ou
$(id).setStyle({zIndex:12});

Forum d'entraide PHPFrance

[JS] Position couche div

[JS] Position couche div