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.  graffx Contributeur
    de rien :)

    des fois la solution recherchée est la plus simple :)
    0
    1. 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
        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
        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
          2. 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. jmg78
              les images 2.jpg 3.jpg 4 5 etc sont des fichiers vides
              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