Bonjours tout le monde !
Alors on ne va pas y aller par 4 chemins
J'ai voulu créer un album photo sur mon site en php
(si quelqu'un veut le voir http://www.tetoufee.com/photos/tes [...] er=concert )
Mon problème est que mon script marche plus ou moin sous firefox 2 et Ie 7 mais pas du tout sous Ie6...
Hors vous savez aussi bien que moi le nombre de personne qui ne sont pas passer à la version 7 de ce "truc!".
Je vous présente M.Script? aller!
test.php
[url]
<html>
<head>
<title>Les photos des tétoufées!</title>
<link rel="stylesheet" type="text/css" href="../style.css">
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<meta name="generator" content="HAPedit 3.1">
<script type="text/javascript" src="script.js"></script>
<script language="JavaScript">
function makevisible(cur,which)
{
if(document.getElementById)
{
if (which==0)
{
if(document.all)
cur.filters.alpha.opacity=100
else
cur.style.setProperty("-moz-opacity", 1, "" );
}
else
{
if(document.all)
cur.filters.alpha.opacity=40
else
cur.style.setProperty("-moz-opacity", .4, "" );
}
}
}
</script>
</head>
<body>
<?php
if (isset($_GET['dossier']))
{
$dossier = $_GET['dossier'].'/';
}
else {$dossier = NULL;}?>
<div id="galerie">
<ul id="galerie_mini" style="height:460px;margin:50px -10px 0 680px;overflow:auto;">
<?php
function listing ($repertoire){
$type_image = "'\.jpg|\.JPG'";
$search = ("''" );
$handle = opendir ($repertoire);
while ($file = readdir($handle))
if (preg_match($search, $file) && preg_match($type_image, $file))
echo "<a href=\"$repertoire./$file\" title=\"$file\" ><img src=\"$repertoire./$file\" alt=\"$file\" width=\"80px\" height=\"80px\" hspace=\"3\" vspace=\"10\" border=\"0\" style=\"filter:alpha(opacity=40); -moz-opacity: .4;\" onMouseover=\"makevisible(this,0)\" onMouseout=\"makevisible(this,1)\" /></a>";
}
listing("$dossier" ); //chemin du dossier
?>
</ul>
<dl id="photo" style="float:left;margin:150px 0 0 0">
<dt style="position:absolute;margin:-660px 0 0 10px;" >photos (version test non finie)</dt>
<dd style="margin:-600px 0 0 10px;">
<img id="big_pict" src="images/photo1.png" align="center" alt="Cliquez sur les photos pour les matter!" widht="250px" />
</dd>
</dl>
</div>
</body>
</html>[/url]
script.js
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;
Voila tout!
Merci de votre aide! see ya! Pat.O
Message édité par patsous le 03-05-2007 à 11:58:04