Bonjour a tout le monde,
Ben voila, j'ai donc suivi ce tutoriel pour monter une petite galerie de photos de voyage et il se trouve qu'elle marche très bien en local (sur le disque dur ou sur un serveur wamp) mais que mes photos ne s'affichent pas sur mon serveur sur internet
ci dessous, mes codes ...
html
le CSS
et le Script
Pour les avoirs relus je ne pense pas que les codes plantent, d'ailleurs ça fonctionne parfaitement en local.
Si quelqu'un a une piste pour m'éclairer, merci d'avance.
galerie ligne sur http://anticorp.eu
Cordialement
Sébastien[/i]
Modifié par seb31 (22 Mar 2009 - 17:22)
Ben voila, j'ai donc suivi ce tutoriel pour monter une petite galerie de photos de voyage et il se trouve qu'elle marche très bien en local (sur le disque dur ou sur un serveur wamp) mais que mes photos ne s'affichent pas sur mon serveur sur internet
ci dessous, mes codes ...
html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<title>Galerie photo - Perù, Bolivia</title>
<link rel="stylesheet" type="text/css" href="./gallerie.css">
<script type="text/javascript" src="./gallerie.js"></script>
</head>
<body>
<div id="galerie">
<ul id="galerie_mini">
<li><a href="./images/01.jpg" title="Potossi - Départ aux mines"><img src="./images/minis/01mini.jpg" alt="01" /></a></li>
<li><a href="./images/02.jpg" title="Potossi - les mineurs"><img src="./images/minis/02mini.jpg" alt="02" /></a></li>
<li><a href="./images/03.jpg" title="Potossi - entrée dans la mine"><img src="./images/minis/03mini.jpg" alt="03" /></a></li>
<li><a href="./images/04.jpg" title="potossi - mineur"><img src="./images/minis/04mini.jpg" alt="04" /></a></li>
<li><a href="./images/05.jpg" title="ouaich ma caille"><img src="./images/minis/05mini.jpg" alt="05" /></a></li>
<li><a href="./images/06.jpg" title="Sucre racisme"><img src="./images/minis/06mini.jpg" alt="06" /></a></li>
<li><a href="./images/07.jpg" title="Emi, bus"><img src="./images/minis/07mini.jpg" alt="07" /></a></li>
<li><a href="./images/08.jpg" title="Oruro - Moi aux bains"><img src="./images/minis/08mini.jpg" alt="08" /></a></li>
<li><a href="./images/09.jpg" title="Mac pollo"><img src="./images/minis/09mini.jpg" alt="09" /></a></li>
<li><a href="./images/10.jpg" title="Potossi - vue d'en haut"><img src="./images/minis/10mini.jpg" alt="10" /></a></li>
<li><a href="./images/11.jpg" title="Potossi - Cerro riccho"><img src="./images/minis/11mini.jpg" alt="11" /></a></li>
<li><a href="./images/12.jpg" title="Potossi - lampadaire"><img src="./images/minis/12mini.jpg" alt="12" /></a></li>
<li><a href="./images/13.jpg" title="Potossi - mines, vagon"><img src="./images/minis/13mini.jpg" alt="13" /></a></li>
<li><a href="./images/14.jpg" title="Potossi - llama"><img src="./images/minis/14mini.jpg" alt="14" /></a></li>
<li><a href="./images/15.jpg" title="Potossi - Frial Castro"><img src="./images/minis/15mini.jpg" alt="15" /></a></li>
<li><a href="./images/16.jpg" title="Tupiza - Sierra"><img src="./images/minis/16mini.jpg" alt="16" /></a></li>
<li><a href="./images/17.jpg" title="Tupiza - moi + Sierra"><img src="./images/minis/17mini.jpg" alt="17" /></a></li>
<li><a href="./images/18.jpg" title="Tupiza - Emi + Sierra"><img src="./images/minis/18mini.jpg" alt="18" /></a></li>
<li><a href="./images/19.jpg" title="Tupiza - Kevin, Coco & Moi"><img src="./images/minis/19mini.jpg" alt="19" /></a></li>
<li><a href="./images/20.jpg" title="Paysage de l'altiplano"><img src="./images/minis/20mini.jpg" alt="20" /></a></li>
</ul>
<dl id="photo">
<dt>Potossi - Départ aux mines</dt>
<dd><img id="big_pict" src="./images/01.jpg" alt="Potossi - Départ aux mines" /></dd>
</dl>
</div>
</body>
</html>
le CSS
a {
color: black;
text-decoration:none;
}
a:hover {
color:#dcb;
text-decoration:underline;
}
div#galerie
{
width: 820px ;
background: #ffffcc ;
border: 1px solid #dcb ;
padding: 15px ;
margin: 15px 30px ;
text-align: center ;
font: 0.9em Georgia, serif ;
}
ul#galerie_mini
{
margin: 0 ;
padding: 0 ;
list-style-type: none ;
}
ul#galerie_mini li
{
float: left ;
}
ul#galerie_mini li a img
{
margin: 1px 1px ;
border: 1px solid #dcb ;
}
dl#photo
{
clear: both ;
margin: 0 auto ;
}
dl#photo dt
{
font: italic 2.5em/1.5em Georgia, serif ;
color: #dcb ;
}
dl#photo dd
{
margin: 0 ;
}
dl#photo img
{
border: 1px solid #dcb ;
}
et le Script
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;
// Il ne reste plus qu'à appeler notre fonction au chargement de la page
Pour les avoirs relus je ne pense pas que les codes plantent, d'ailleurs ça fonctionne parfaitement en local.
Si quelqu'un a une piste pour m'éclairer, merci d'avance.
galerie ligne sur http://anticorp.eu
Cordialement
Sébastien[/i]
Modifié par seb31 (22 Mar 2009 - 17:22)
Pas important sous windows !
