PHP_MYSQL ameliorer mon diaporama

Résolu/Fermé
gasper - 16 août 2011 à 08:48
 gasper - 17 août 2011 à 10:14
Bonjour,

j'ai créé mon diaporama; je liste mon réperoire, repère mes dossiers, et affiche sur 4 colonnes mes photos format miniature. Grace a un judicieux (o:)) onmouseover, je change le format de ma photo, puis avec un onmouseout, je remets ma photo au format initial.
Ca, ça marche.
le problème c'est qu'à l'agrandissement de la photo, tout se décale et l'affichage est du coup mauvais, mauvais.
j'aimerai savoir si quelqu'un connait la syntaxe pour afficher la photo survolée dans un autre cadre ou une partie de l'ecran fixe?
voici mon code:
<?php /* Date de création: 7/11/2011 */ ?>
<html>
<body style="background-color: #99CCFF">
<table align='center'><tr>

<?php
$dir =$_POST['file'] ;
$survol= "onmouseover=(width='500') onmouseout=(width='200')";
$i=0;
if (is_dir ($dir))
{ // si c'est un repertoire on l'ouvre
$dh = opendir ($dir);
while (($file = readdir ($dh)) !== false )
{
if ($file !== '.' && $file !== '..'&&(substr_count($file, 'php')<1))
{
echo "<td><img src=".$dir."/".$file." width='200'".$survol."></td>";
$i++;
if ($i==3)
{
echo "</tr><tr>";
$i=0;
}
}
}
}
if ($i>0){echo "</tr>";}///on ferme la derniere balise <tr>

?>
<tr><td colspan='3'><form action='./dir2.php'>
<input align='middle' type='submit' value='RETOUR SELECTION DES DIAPORAMAS'>
</td></tr></table>
</body>
</html>

Voila, le style est sûrement primaire mais je suis un débutant isolé au beau milieu du Pacifique. Je glâne mes bouts de code, j'en invente, et j'arrive a faire marcher.
mais là, je ne vois pas comment faire pour, en survolant une image, cette image s'affiche dans un nouvel endroit (emplacement dans le tableau, fenetre firefox en blank_, popup?,
merci pour vos suggestions et contributions.
si besoin, l'adresse de mon site est http://www.tahiti.zeouebe.net/tahiti/accueil.php




2 réponses

Utilisateur anonyme
16 août 2011 à 09:42
Bonjour,

Une solution est au lieu d'agrandir l'image lors d'un mouseover, est de l'afficher dans une div au dessus de la fenêtre avec une librairie comme overLib, sinon vous pouvez utiliser des librairies Jquery Slider comme ceci http://www.webinventif.fr/wp-content/uploads/projets/tooltip/02/
0
merci pour ton concours
Un problème persiste; lorsque je vais sur le site, les photos se mettent bien en preview ce qui me convient. J'ai copié et adapté le code, et là ça ne marche plus (pas d'agrandissement autre que cliquer sur le lien pour avoir une page navigateur et cela ne me convient pas).
je te colle mon nouveau code
?php /* Date de création: 7/11/2011 */ ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Voyage dans les îles</title>
<meta name="description" content="Easiest jQuery Tooltip Ever">
<script src="jquery.js" type="text/javascript"></script>
<script src="main.js" type="text/javascript"></script>
</meta>


<style>
body {
margin:0;
padding:40px;
background:#fff;
font:80% Arial, Helvetica, sans-serif;
color:#555;
line-height:180%;
}

a{
text-decoration:none;
color:#f30;
}
p{
clear:both;
margin:0;
padding:.5em 0;
}
pre{
display:block;
font:100% "Courier New", Courier, monospace;
padding:10px;
border:1px solid #bae2f0;
background:#e3f4f9;
margin:.5em 0;
overflow:auto;
width:800px;
}

img{border:none;}
ul,li{
margin:0;
padding:0;
}
li{
list-style:none;
float:left;
display:inline;
margin-right:10px;
}
/* */

#preview{
position:absolute;
border:1px solid #ccc;
background:#333;
padding:5px;
display:none;
color:#fff;
}

/* */
</style>
</head>

</body>
</html>

<table align='center'><tr><td>
<ul>

<?php
$dir =$_POST['file'] ;
$survol= "onmouseover=(width='500') onmouseout=(width='200')";
$i=0;
if (is_dir ($dir))
{ // si c'est un repertoire on l'ouvre
$dh = opendir ($dir);
while (($file = readdir ($dh)) !== false )
{
if ($file !== '.' && $file !== '..'&&(substr_count($file, 'php')<1))
{
echo "<li><a href=".$dir."/".$file." class='preview'><img src=".$dir."/".$file." width='200' alt=".$dir."/></a></li>";
$i++;
if ($i==3)
{
echo "</ul><ul>";
$i=0;
}
}
}
}
if ($i>0){echo "</ul>";}///on ferme la derniere balise <tr>

?>
</td></tr>
<tr><td colspan='3'><form action='./dir2.php'>
<input align='middle' type='submit' value='RETOUR SELECTION DES DIAPORAMAS'>
</td></tr></table>
</body>
</html>
le $survol ne me sert plus.
Peux tu me dire pourquoi le survol onmouseover ne crée pas un affichage ?
merci
0
Utilisateur anonyme
17 août 2011 à 08:13
Il n'y a plus $survol dans le code suivant

echo "<li><a href=".$dir."/".$file." class='preview'><img src=".$dir."/".$file." 
width='200' alt=".$dir."/></a></li>";  


contrairement à ta première version ici, et c'est $survol qui gère le changement de taille de ton image

echo "<td><img src=".$dir."/".$file." width='200'".$survol."></td>"; 
0
je te remercie pour ton aide; je vais creuser le overLib qui me semble interesant. Je pense que je trouverai in dicdaticiel sur ce protocole.
merci encore
0