Problème image

Résolu
Utilisateur anonyme -  
graffx Messages postés 120 Date d'inscription   Statut Contributeur Dernière intervention   -
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
  2. bg62 Messages postés 23433 Date d'inscription   Statut Modérateur Dernière intervention   2 435
     
    <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
  3. 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
  4. graffx Messages postés 120 Date d'inscription   Statut Contributeur Dernière intervention   2 031
     
    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

  5. Vous n’avez pas trouvé la réponse que vous recherchez ?

    Posez votre question
  6. 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
  7. graffx Messages postés 120 Date d'inscription   Statut Contributeur Dernière intervention   2 031
     
    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 -
Asta972155 -

10 réponses
Comment recadrer une image avec Inkscape
infofeet -
TELLIEZ -

13 réponses