Problème image

Résolu
Utilisateur anonyme -  
Bonjour,
J'ai un problème avec le site web suivant (que je suis en train de créer) : http://www.poyostudio.13.fr/photos

Toutes les photos ne sont pas chargées (que la première)

Pouvez vous me dire quelle est la cause de ce problème !?
Configuration: Windows Vista
Chrome 3.0 et internet explorer

6 réponses

  1. jmg78
    les images 2.jpg 3.jpg 4 5 etc sont des fichiers vides
    0
    1. bg62 Modérateur 
      <p class="i1"><img src="1.jpg" alt="" style="position:relative;top: 10px;left: 10px;"

      trois possibilités:
      - les photos ne sont pas arrivées par ftp
      - les class i1 i2 i3 .... à revoir
      - la position des images est la même, donc elles se superposent ...
      --
      le 'www' est fait aussi pour communiquer, partager et échanger, non ?
      merci d'avoir la politesse de répondre à ceux qui essaient de vous aider
      0
      1. Utilisateur anonyme
        Merci de m'avoir aidé, mais ça ne marche toujours pas, peut être que les images sont trop grosses ?
        Si vous voulez je vous met le code source :

        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" >

<div id="pub"> <script type='text/javascript' src='/bigmars/pub/index_728x90.js'></script> </div>

   <head>

       <title>Photos</title>
       <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
       <link rel="stylesheet" media="screen" type="text/css" title="Poyodesign" href="design.css" />
   </head>
   
    <body>
	
		<div id="image_principale">
				
				<img src="1.jpg" width="100%" height="100%" alt="" id="imagep"/>
			
		</div>   
		
		<div id="bandeau_du_bas">	
			<p class="i1"><img src="1.jpg" alt="" style="position:relative;top: 10px;left: 10px;" width="130" height="130" onclick="document.getElementById('imagep').src='1.jpg'; document.getElementById('bandeau_du_bas').style.display = 'none';"/></p>
			<p class="i2"><img src="2.jpg" alt="" style="position:relative;top: 10px;left: 10px;" width="130" height="130" onclick="document.getElementById('imagep').src='2.jpg'; document.getElementById('bandeau_du_bas').style.display = 'none';"/></p>
			<p class="i3"><img src="3.jpg" alt="" style="position:relative;top: 10px;left: 10px;" width="130" height="130" onclick="document.getElementById('imagep').src='3.jpg'; document.getElementById('bandeau_du_bas').style.display = 'none';"/></p>
			<p class="i4"><img src="4.jpg" alt="" style="position:relative;top: 10px;left: 10px;" width="130" height="130" onclick="document.getElementById('imagep').src='4.jpg'; document.getElementById('bandeau_du_bas').style.display = 'none';"/></p>
			<p class="i5"><img src="5.jpg" alt="" style="position:relative;top: 10px;left: 10px;" width="130" height="130" onclick="document.getElementById('imagep').src='5.jpg'; document.getElementById('bandeau_du_bas').style.display = 'none';"/></p>
			<p class="i6"><img src="6.jpg" alt="" style="position:relative;top: 10px;left: 10px;" width="130" height="130" onclick="document.getElementById('imagep').src='6.jpg'; document.getElementById('bandeau_du_bas').style.display = 'none';"/></p>
			<p class="i7"><img src="7.jpg" alt="" style="position:relative;top: 10px;left: 10px;" width="130" height="130" onclick="document.getElementById('imagep').src='7.jpg'; document.getElementById('bandeau_du_bas').style.display = 'none';"/></p>
			<p class="i8"><img src="8.jpg" alt="" style="position:relative;top: 10px;left: 10px;" width="130" height="130" onclick="document.getElementById('imagep').src='8.jpg'; document.getElementById('bandeau_du_bas').style.display = 'none';"/></p>
			<p class="i9"><img src="9.jpg" alt="" style="position:relative;top: 10px;left: 10px;" width="130" height="130" onclick="document.getElementById('imagep').src='9.jpg'; document.getElementById('bandeau_du_bas').style.display = 'none';"/></p>
			<p class="i10"><img src="10.jpg" alt="" style="position:relative;top: 10px;left: 10px;" width="130" height="130" onclick="document.getElementById('imagep').src='10.jpg'; document.getElementById('bandeau_du_bas').style.display = 'none';"/></p>
			<p class="i11"><img src="11.jpg" alt="" style="position:relative;top: 10px;left: 10px;" width="130" height="130" onclick="document.getElementById('imagep').src='11.jpg'; document.getElementById('bandeau_du_bas').style.display = 'none';"/></p>
			<p class="i12"><img src="12.jpg" alt="" style="position:relative;top: 10px;left: 10px;" width="130" height="130" onclick="document.getElementById('imagep').src='12.jpg'; document.getElementById('bandeau_du_bas').style.display = 'none';"/></p>
			<p class="i13"><img src="13.jpg" alt="" style="position:relative;top: 10px;left: 10px;" width="130" height="130" onclick="document.getElementById('imagep').src='13.jpg'; document.getElementById('bandeau_du_bas').style.display = 'none';"/></p>
			<p class="i14"><img src="14.jpg" alt="" style="position:relative;top: 10px;left: 10px;" width="130" height="130" onclick="document.getElementById('imagep').src='14.jpg'; document.getElementById('bandeau_du_bas').style.display = 'none';"/></p>
			<p class="i15"><img src="15.jpg" alt="" style="position:relative;top: 10px;left: 10px;" width="130" height="130" onclick="document.getElementById('imagep').src='15.jpg'; document.getElementById('bandeau_du_bas').style.display = 'none';"/></p>
			<p class="i16"><img src="16.jpg" alt="" style="position:relative;top: 10px;left: 10px;" width="130" height="130" onclick="document.getElementById('imagep').src='16.jpg'; document.getElementById('bandeau_du_bas').style.display = 'none';"/></p>
		</div>   

		<div id="pied_de_page">
			Copyright Poyostudio 2009, tous droits réservés 
		</div>
		
		<div id="bouton">	
			<img src="bouton.png" id="gbouton" alt="" onMouseOver="document.getElementById('gbouton').src='bouton2.png'" onMouseOut="document.getElementById('gbouton').src='bouton.png'" onclick="document.getElementById('bandeau_du_bas').style.display = 'block'"/>
		</div>   
	
   </body>
</html>


        CSS : 

        body
{
     background-image: url("fond.png");
}

#pub
{
	position:absolute;
	top: -30px;
	left: 20%;
}

#pied_de_page
{
	position:fixed;
	bottom: 1px;
	color: red;
}

#image_principale
{
	position:absolute;
	top: 1px;
	left: 0px;
}

#bandeau_du_bas
{
	position:fixed;
	bottom: 1px;
	overflow: auto;
	height: 185px;
	width: 99%;
}

#bouton
{
	position:fixed;
	bottom: 0px;
	left: 0px;
	height: 30px;
	width: 30px;
}


.i1 
{ 
background-image: url("fond-image2.png"); 
position:absolute; 
top: 0px; 
left: 0px; 
height: 150px;
width: 150px; 
} 
 .i1:hover 
{ 
background-image: url("fond-image3.png"); 
} 
 
.i2 
{ 
background-image: url("fond-image2.png"); 
position:absolute; 
top: 0px; 
left: 150px; 
height: 150px;
width: 150px; 
} 
 .i2:hover 
{ 
background-image: url("fond-image3.png"); 
} 
 
.i3 
{ 
background-image: url("fond-image2.png"); 
position:absolute; 
top: 0px; 
left: 300px; 
height: 150px;
width: 150px; 
} 
 .i3:hover 
{ 
background-image: url("fond-image3.png"); 
} 
 
.i4 
{ 
background-image: url("fond-image2.png"); 
position:absolute; 
top: 0px; 
left: 450px; 
height: 150px;
width: 150px; 
} 
 .i4:hover 
{ 
background-image: url("fond-image3.png"); 
} 
 
.i5 
{ 
background-image: url("fond-image2.png"); 
position:absolute; 
top: 0px; 
left: 600px; 
height: 150px;
width: 150px; 
} 
 .i5:hover 
{ 
background-image: url("fond-image3.png"); 
} 
 
.i6 
{ 
background-image: url("fond-image2.png"); 
position:absolute; 
top: 0px; 
left: 750px; 
height: 150px;
width: 150px; 
} 
 .i6:hover 
{ 
background-image: url("fond-image3.png"); 
} 
 
.i7 
{ 
background-image: url("fond-image2.png"); 
position:absolute; 
top: 0px; 
left: 900px; 
height: 150px;
width: 150px; 
} 
 .i7:hover 
{ 
background-image: url("fond-image3.png"); 
} 
 
.i8 
{ 
background-image: url("fond-image2.png"); 
position:absolute; 
top: 0px; 
left: 1050px; 
height: 150px;
width: 150px; 
} 
 .i8:hover 
{ 
background-image: url("fond-image3.png"); 
} 
 
.i9 
{ 
background-image: url("fond-image2.png"); 
position:absolute; 
top: 0px; 
left: 1200px; 
height: 150px;
width: 150px; 
} 
 .i9:hover 
{ 
background-image: url("fond-image3.png"); 
} 
 
.i10 
{ 
background-image: url("fond-image2.png"); 
position:absolute; 
top: 0px; 
left: 1350px; 
height: 150px;
width: 150px; 
} 
 .i10:hover 
{ 
background-image: url("fond-image3.png"); 
} 
 
.i11 
{ 
background-image: url("fond-image2.png"); 
position:absolute; 
top: 0px; 
left: 1500px; 
height: 150px;
width: 150px; 
} 
 .i11:hover 
{ 
background-image: url("fond-image3.png"); 
} 
 
.i12 
{ 
background-image: url("fond-image2.png"); 
position:absolute; 
top: 0px; 
left: 1650px; 
height: 150px;
width: 150px; 
} 
 .i12:hover 
{ 
background-image: url("fond-image3.png"); 
} 
 
.i13 
{ 
background-image: url("fond-image2.png"); 
position:absolute; 
top: 0px; 
left: 1800px; 
height: 150px;
width: 150px; 
} 
 .i13:hover 
{ 
background-image: url("fond-image3.png"); 
} 
 
.i14 
{ 
background-image: url("fond-image2.png"); 
position:absolute; 
top: 0px; 
left: 1950px; 
height: 150px;
width: 150px; 
} 
 .i14:hover 
{ 
background-image: url("fond-image3.png"); 
} 
 
.i15 
{ 
background-image: url("fond-image2.png"); 
position:absolute; 
top: 0px; 
left: 2100px; 
height: 150px;
width: 150px; 
} 
 .i15:hover 
{ 
background-image: url("fond-image3.png"); 
} 
 
.i16 
{ 
background-image: url("fond-image2.png"); 
position:absolute; 
top: 0px; 
left: 2250px; 
height: 150px;
width: 150px; 
} 
 .i16:hover 
{ 
background-image: url("fond-image3.png"); 
} 
 



/*.i1
{
	background-image: url("fond-image2.png");
	position:absolute;
	top: 0px;
	left: 0px;
	height: 150px;
	width: 150px;
}


.i2
{
	background-image: url("fond-image2.png");
	position:absolute;
	top: 0px;
	left: 150px;
	height: 150px;
	width: 150px;
}*/


/*
#info
{
	position:absolute;
	top: 5px;
	right: 5px;
	border: 4px double white;
	
	overflow: auto;
}

#compteur
{
	position:absolute;
	top: 5px;
	left: 5px;
	border: 4px double white;
}


#envoyer
{
	position:absolute;
	top: 150px;
	left: 20px;
	border: 4px double white;
	
	width: 95%;
	height: 60px;

	overflow: auto;
}

#recevoir
{
	position:absolute;
	top: 30%;
	left: 20px;
	border: 4px double white;
	
	width: 90%;
    height: 60%;
	
	overflow: scroll;
	
}



#en_tete
{
	position:absolute;
	top: 100px;
	left: 30%;
}

#menu1
{

     background-image: url("poyoforum_menu2.png");

	 position:absolute;
	 top: 170px;
	 left: 20%;
	 width: 516px;
	 height: 50px;
	 
	 border: 4px double white;

}
.bouton
{

	 position:relative;
	 
	 text-align: center;

     background-image: url("bouton_normal.png");

	 width: 100px;
	 height: 50px;
	 
	 border: 4px double white;
	 
	 color: white;
}
	
.bouton:hover
{

     background-image: url("bouton_apuye.png");
	 
}


#corp_de_texte1
{

	 position:absolute;
	 top: 30%;
	 left: 10px;
	 border: 4px double white;

}

#corp_de_texte1_1
{

	 position:absolute;
	 top: 30%;
	 right: 1px;
	 border: 4px double white;
	 
	overflow: auto;

}

#corp_de_texte2
{

	 position:absolute;
	 top: 30%;
	 left: 400px;
	 border: 4px double white;

}



table
{
   border-collapse: collapse;
}
td, th /* Mettre une bordure sur les td ET les th *//*
{
   border: 1px solid black;
}*/
        0
        1. graffx Contributeur
          autre solution (peu etre), les images n' ont pas le meme nom ou la meme casse que dans ton css.

          Par exemple si dans ton css tu as imAGE1.jpg alors ton image devra absolument porter le meme nom, majuscule et minuscule compris.

          Peu etre un probleme de nom.
          0
          2. Utilisateur anonyme
            Oui, je pense que le problème vient de là, certaines de mes images se nomment 2.JPG et non .jpg

            merci beaucoup !!!!!!!!
            0
            1. graffx Contributeur
              de rien :)

              des fois la solution recherchée est la plus simple :)
              0

              Discussions similaires

              Retrouver l'image originale d'une photo modifiée
              Raven

              10 réponses
              Comment recadrer une image avec Inkscape
              infofeet

              13 réponses