par
steeeppH » 11 nov. 2007, 19:09
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:
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>
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:
[php]echo '<script type="text/javascript">new Draggable(\''.$i.'\'); </script> [/php]
Et voici [url=http://poutoucalamitou1.online.fr/photo/]la page[/url] pour ceux qui on pas trop compris le truc.
Ma question: [b]Comment ajouter du z-index avec javascript.[/b]
Cette ligne ne fonctionne pas: [code]document.getElementByID(id).style.z-index = "12";[/code]
Voila le code de ma page:
[php]<!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>
[/php]
