Probleme d'affichage d'image tres bizarre
Charles Dupontxx
-
wAxxx Messages postés 421 Date d'inscription Statut Membre Dernière intervention -
wAxxx Messages postés 421 Date d'inscription Statut Membre Dernière intervention -
Bonjour,
Alors voila, je crée un site internet avec "KompoZer" sur MAC OS X et quand je le crée sur le mac tt vas bien, puis je le met sur ma clé USB et je le transfere sur PC pour voir ce que sa donne (tout ca sans le mettre en ligne) et la PAF certaines images ne s'affichent pas pourtant, toutes les images sont la dans les dossiers.
Voila ce que ca m'affiche: http://img228.imageshack.us/img228/2232/pbinternet.jpg
et voici le code de la page:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html><head><meta content="text/html; charset=ISO-8859-1" http-equiv="content-type"><title>photostest</title></head><body style="background-color: black; color: rgb(0, 0, 0);" alink="#ee0000" link="#0000ee" vlink="#551a8b">
<div style="text-align: center;"><img style="width: 990px; height: 229px;" alt="" src="file:///Users/charlesdupont/Desktop/Tonight%20HTML/Photos/mons-tonight.jpg"><br>
<img style="width: 300px; height: 40px;" alt="" src="file:///Users/charlesdupont/Desktop/Tonight%20HTML/Photos/siteweblogo.jpg"><br>
<table style="text-align: left; width: 990px; margin-left: auto; margin-right: auto;" border="0" cellpadding="2" cellspacing="2">
<tbody>
<tr>
<td style="vertical-align: top; text-align: center;"><img style="width: 133px; height: 47px;" alt="" src="file:///Users/charlesdupont/Desktop/Tonight%20HTML/Photos/ongletmonstonight.jpg"><br>
</td>
<td style="vertical-align: top; text-align: center;"><img style="width: 133px; height: 47px;" alt="" src="file:///Users/charlesdupont/Desktop/Tonight%20HTML/Photos/ongletphotos.jpg"><br>
</td>
<td style="vertical-align: top; text-align: center;"><img style="width: 133px; height: 47px;" alt="" src="file:///Users/charlesdupont/Desktop/Tonight%20HTML/Photos/ongletclubs.jpg"><br>
</td>
<td style="vertical-align: top; text-align: center;"><img style="width: 133px; height: 47px;" alt="" src="file:///Users/charlesdupont/Desktop/Tonight%20HTML/Photos/ongletmode.jpg"><br>
</td>
<td style="vertical-align: top; text-align: center;"><img style="width: 133px; height: 47px;" alt="" src="file:///Users/charlesdupont/Desktop/Tonight%20HTML/Photos/ongletforum.jpg"><br>
</td>
</tr>
</tbody>
</table>
<br>
<div style="text-align: left; margin-left: 120px;"><img style="width: 300px; height: 90px;" alt="" src="Photos/photosentete.jpg"><br>
<img style="width: 990px; height: 50px;" alt="" src="Photos/test.jpg"><br>
</div>
<br>
<br>
<div style="margin-left: 40px;"><img style="width: 600px; height: 400px;" alt="" src="file:///Users/charlesdupont/Desktop/Tonight%20HTML/Photos/indisponible.jpg"><br>
</div>
</div>
</body></html>
A NOTER: la derniere image s'appelle réellement indisponible.jpg ce n'est pas une erreur ! le pb n'est donc pas la!
Merci d'avances
Charles Dupont
Alors voila, je crée un site internet avec "KompoZer" sur MAC OS X et quand je le crée sur le mac tt vas bien, puis je le met sur ma clé USB et je le transfere sur PC pour voir ce que sa donne (tout ca sans le mettre en ligne) et la PAF certaines images ne s'affichent pas pourtant, toutes les images sont la dans les dossiers.
Voila ce que ca m'affiche: http://img228.imageshack.us/img228/2232/pbinternet.jpg
et voici le code de la page:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html><head><meta content="text/html; charset=ISO-8859-1" http-equiv="content-type"><title>photostest</title></head><body style="background-color: black; color: rgb(0, 0, 0);" alink="#ee0000" link="#0000ee" vlink="#551a8b">
<div style="text-align: center;"><img style="width: 990px; height: 229px;" alt="" src="file:///Users/charlesdupont/Desktop/Tonight%20HTML/Photos/mons-tonight.jpg"><br>
<img style="width: 300px; height: 40px;" alt="" src="file:///Users/charlesdupont/Desktop/Tonight%20HTML/Photos/siteweblogo.jpg"><br>
<table style="text-align: left; width: 990px; margin-left: auto; margin-right: auto;" border="0" cellpadding="2" cellspacing="2">
<tbody>
<tr>
<td style="vertical-align: top; text-align: center;"><img style="width: 133px; height: 47px;" alt="" src="file:///Users/charlesdupont/Desktop/Tonight%20HTML/Photos/ongletmonstonight.jpg"><br>
</td>
<td style="vertical-align: top; text-align: center;"><img style="width: 133px; height: 47px;" alt="" src="file:///Users/charlesdupont/Desktop/Tonight%20HTML/Photos/ongletphotos.jpg"><br>
</td>
<td style="vertical-align: top; text-align: center;"><img style="width: 133px; height: 47px;" alt="" src="file:///Users/charlesdupont/Desktop/Tonight%20HTML/Photos/ongletclubs.jpg"><br>
</td>
<td style="vertical-align: top; text-align: center;"><img style="width: 133px; height: 47px;" alt="" src="file:///Users/charlesdupont/Desktop/Tonight%20HTML/Photos/ongletmode.jpg"><br>
</td>
<td style="vertical-align: top; text-align: center;"><img style="width: 133px; height: 47px;" alt="" src="file:///Users/charlesdupont/Desktop/Tonight%20HTML/Photos/ongletforum.jpg"><br>
</td>
</tr>
</tbody>
</table>
<br>
<div style="text-align: left; margin-left: 120px;"><img style="width: 300px; height: 90px;" alt="" src="Photos/photosentete.jpg"><br>
<img style="width: 990px; height: 50px;" alt="" src="Photos/test.jpg"><br>
</div>
<br>
<br>
<div style="margin-left: 40px;"><img style="width: 600px; height: 400px;" alt="" src="file:///Users/charlesdupont/Desktop/Tonight%20HTML/Photos/indisponible.jpg"><br>
</div>
</div>
</body></html>
A NOTER: la derniere image s'appelle réellement indisponible.jpg ce n'est pas une erreur ! le pb n'est donc pas la!
Merci d'avances
Charles Dupont
A voir également:
- Probleme d'affichage d'image tres bizarre
- Image iso - Guide
- Affichage double ecran - Guide
- Problème affichage fenêtre windows 10 - Guide
- Windows 11 affichage classique - Guide
- Reduire taille image - Guide
3 réponses
essaye cette solution:
1 - creer un nouveau dossier sur le bureau et apelle le " photo"
2 - copier TOUT les images que tu veux les afficher sur le site dans le dossier.
3 - maintenant copier le dossier "photo" dans le dossier/repertoire contenant votre site
4 - le repertoire ou dossier doit alors etre comme cela : ton_site.html (fichier html) + photo (dossier)
5- voici ton nouveau code(un peut modifier au niveau de la balise image) maintenant copier/coller le au lieu de l'ancien code
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html><head><meta content="text/html; charset=ISO-8859-1" http-equiv="content-type"><title>photostest</title></head><body style="background-color: black; color: rgb(0, 0, 0);" alink="#ee0000" link="#0000ee" vlink="#551a8b">
<div style="text-align: center;"><img style="width: 990px; height: 229px;" alt="" src="photo/mons-tonight.jpg"><br>
<img style="width: 300px; height: 40px;" alt="" src="photo/siteweblogo.jpg"><br>
<table style="text-align: left; width: 990px; margin-left: auto; margin-right: auto;" border="0" cellpadding="2" cellspacing="2">
<tbody>
<tr>
<td style="vertical-align: top; text-align: center;"><img style="width: 133px; height: 47px;" alt="" src="photo/ongletmonstonight.jpg"><br>
</td>
<td style="vertical-align: top; text-align: center;"><img style="width: 133px; height: 47px;" alt="" src="photo/ongletphotos.jpg"><br>
</td>
<td style="vertical-align: top; text-align: center;"><img style="width: 133px; height: 47px;" alt="" src="photo/ongletclubs.jpg"><br>
</td>
<td style="vertical-align: top; text-align: center;"><img style="width: 133px; height: 47px;" alt="" src="photo/ongletmode.jpg"><br>
</td>
<td style="vertical-align: top; text-align: center;"><img style="width: 133px; height: 47px;" alt="" src="photo/ongletforum.jpg"><br>
</td>
</tr>
</tbody>
</table>
<br>
<div style="text-align: left; margin-left: 120px;"><img style="width: 300px; height: 90px;" alt="" src="Photos/photosentete.jpg"><br>
<img style="width: 990px; height: 50px;" alt="" src="Photos/test.jpg"><br>
</div>
<br>
<br>
<div style="margin-left: 40px;"><img style="width: 600px; height: 400px;" alt="" src="photo/indisponible.jpg"><br>
</div>
</div>
</body></html>
1 - creer un nouveau dossier sur le bureau et apelle le " photo"
2 - copier TOUT les images que tu veux les afficher sur le site dans le dossier.
3 - maintenant copier le dossier "photo" dans le dossier/repertoire contenant votre site
4 - le repertoire ou dossier doit alors etre comme cela : ton_site.html (fichier html) + photo (dossier)
5- voici ton nouveau code(un peut modifier au niveau de la balise image) maintenant copier/coller le au lieu de l'ancien code
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html><head><meta content="text/html; charset=ISO-8859-1" http-equiv="content-type"><title>photostest</title></head><body style="background-color: black; color: rgb(0, 0, 0);" alink="#ee0000" link="#0000ee" vlink="#551a8b">
<div style="text-align: center;"><img style="width: 990px; height: 229px;" alt="" src="photo/mons-tonight.jpg"><br>
<img style="width: 300px; height: 40px;" alt="" src="photo/siteweblogo.jpg"><br>
<table style="text-align: left; width: 990px; margin-left: auto; margin-right: auto;" border="0" cellpadding="2" cellspacing="2">
<tbody>
<tr>
<td style="vertical-align: top; text-align: center;"><img style="width: 133px; height: 47px;" alt="" src="photo/ongletmonstonight.jpg"><br>
</td>
<td style="vertical-align: top; text-align: center;"><img style="width: 133px; height: 47px;" alt="" src="photo/ongletphotos.jpg"><br>
</td>
<td style="vertical-align: top; text-align: center;"><img style="width: 133px; height: 47px;" alt="" src="photo/ongletclubs.jpg"><br>
</td>
<td style="vertical-align: top; text-align: center;"><img style="width: 133px; height: 47px;" alt="" src="photo/ongletmode.jpg"><br>
</td>
<td style="vertical-align: top; text-align: center;"><img style="width: 133px; height: 47px;" alt="" src="photo/ongletforum.jpg"><br>
</td>
</tr>
</tbody>
</table>
<br>
<div style="text-align: left; margin-left: 120px;"><img style="width: 300px; height: 90px;" alt="" src="Photos/photosentete.jpg"><br>
<img style="width: 990px; height: 50px;" alt="" src="Photos/test.jpg"><br>
</div>
<br>
<br>
<div style="margin-left: 40px;"><img style="width: 600px; height: 400px;" alt="" src="photo/indisponible.jpg"><br>
</div>
</div>
</body></html>
ton erreur c'est que tu as utilisé des liens absolues du genre : file:///Users/charlesdupont/Desktop/Tonight%20HTML/Photos/xxx.yyy, des telles liens en html ne sont pas pratique car si tu veux par exemple voir ton fichier html ,contenant les images, sur un autre pc ou meme tu deplace cette fichier html vers un autre repertoire ca marchera plus, les lien absolue sont alors à eviter. la solution reste dans les chemins relatif genre :dossier\fichier.xxx des telles liens sont toujours valables meme si tu essai de voir ton site sur un autre pc puisque les images(ou la video,musique..) sont toujours la avec lui. en resumant quand tu creera la prochaine fois un site essaye d'avoir une arborescence de repertoire comme celle ci :
-projet
|---- ressources(dossier)
|------images(dossier: tes images vont ici)
|------image1.jpg
|------image2.png
|------image1.tif
|------sons(dossier: tes sons vont ici)
|------videos(dossier: tes videos vont ici)
|-fichie1.html
|-fichier2.html
|-fichier3.html
donc si tu veux par exemple afficher l'image image1.jpg qui se trouve dans le dossier images lui meme sous le dossier ressources dans le fichier fichier1.html la balise image sera comme suit :
<img src="ressources/images/image1.jpg">
une fois que ton site terminé tu n'as qu'a faire une copie du dossier projet et ca marchera sur tout les pcs
-projet
|---- ressources(dossier)
|------images(dossier: tes images vont ici)
|------image1.jpg
|------image2.png
|------image1.tif
|------sons(dossier: tes sons vont ici)
|------videos(dossier: tes videos vont ici)
|-fichie1.html
|-fichier2.html
|-fichier3.html
donc si tu veux par exemple afficher l'image image1.jpg qui se trouve dans le dossier images lui meme sous le dossier ressources dans le fichier fichier1.html la balise image sera comme suit :
<img src="ressources/images/image1.jpg">
une fois que ton site terminé tu n'as qu'a faire une copie du dossier projet et ca marchera sur tout les pcs
derniere remarque (puisque l'affichage de mon message n'as pa ete bonne :( ) les fichiers images1.jpg,image2.png,image3.tif se trouve dans le dossier images. les dossiers images,sons,videos se trouvent sous le dossier ressource. le dossier ressource et les fichiers fichier1.html,fichier2.html,fichier3.html se trouve sous le dossier projet. voila c'est tout bonne programmation ^^
Merci encore