Problème image

Résolu

Utilisateur anonyme -
graffx Messages postés 6506 Date d'inscription Statut Contributeur Dernière intervention - 16 sept. 2009 à 20:46

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 !?

Afficher la suite

A voir également:

Problème image
Image iso - Guide
Acronis true image - Télécharger - Sauvegarde
Reduire taille image - Guide
Légender une image - Guide
Image gratuite - Guide

6 réponses

Réponse 1 / 6

Utilisateur anonyme

les images 2.jpg 3.jpg 4 5 etc sont des fichiers vides

Réponse 2 / 6

bg62 Messages postés 23735 Date d'inscription Statut Modérateur Dernière intervention 2 409

<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

Réponse 3 / 6

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;
}*/

Réponse 4 / 6

graffx Messages postés 6506 Date d'inscription Statut Contributeur Dernière intervention 1 975

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.

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

Posez votre question

Réponse 5 / 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 !!!!!!!!

Réponse 6 / 6

graffx Messages postés 6506 Date d'inscription Statut Contributeur Dernière intervention 1 975

de rien :)

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

Discussions similaires

PIX

Comment recadrer une image avec Inkscape

Dechiffrer une image caché

Votre réponse

Discussions similaires