Images qui apparaissent en HTML mais pas en PHP

**binco** · 31/07/2014, 11h02

Bonjour,

J'ai réalisé (en m'inspirant sur internet) un outils permettant de faire défiler des images auxquelles sont associées:
- des commentaires en bas de l'image
- et un curseurs (image pointblanc.png quand l'image n'est pas sélectionnée et pointrose.png quand l'image est sélectionnée)

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
 
<!DOCTYPE html> 
 
<html>
 
<head>
 
<script type="text/javascript">
 
var num=1;    // numéro du fichier courant
var min=1;   // nombre minimum de fichiers
var max=5;  // nombre maximum de fichiers
var extension = '.png';
var legend1="Commentaire1";
var legend2="Commentaire2";
var legend3="Commentaire3";
var legend4="Commentaire4";
var legend5="Commentaire5";
 
/* fonction qui permet d'afficher les images */
function Affich()
{
var file;
 
// on ajoute des '0' afin de créer le nom du fichier
if(num<10) file = '00'+num+extension;
if(num<100 && num>=10) file = '0'+num+extension;
 
if(num==1) legende=legend1;
if(num==2) legende=legend2;
if(num==3) legende=legend3;
if(num==4) legende=legend4;
if(num==5) legende=legend5;
 
if(num==1) {document.getElementById('case1').innerHTML="<img src=pointrose.png/></a>"} else {document.getElementById('case1').innerHTML="<img src=pointblanc.png/></a>"};
if(num==2) {document.getElementById('case2').innerHTML="<img src=pointrose.png/></a>"} else {document.getElementById('case2').innerHTML="<img src=pointblanc.png/></a>"};
if(num==3) {document.getElementById('case3').innerHTML="<img src=pointrose.png/></a>"} else {document.getElementById('case3').innerHTML="<img src=pointblanc.png/></a>"};
if(num==4) {document.getElementById('case4').innerHTML="<img src=pointrose.png/></a>"} else {document.getElementById('case4').innerHTML="<img src=pointblanc.png/></a>"};
if(num==5) {document.getElementById('case5').innerHTML="<img src=pointrose.png/></a>"} else {document.getElementById('case5').innerHTML="<img src=pointblanc.png/></a>"};
 
// on affiche l'image correspondante
document.getElementById('image_nouveaute').innerHTML="<a href='3Gravures.html' target='_self'><img src="+file+" title="+legende+" alt="+legende+" /></a>";
document.getElementById('image_legende').innerHTML="<h5>"+legende+"</h5>";
}
 
/* fonction qui permet de revenir à l'image précédente */
function Prev()
{
// si num>min car il ne faudrait pas descendre en dessous
if(num>min)
	{
	num--;    // on décrémente num
	Affich();  // et on fait appel à la fonction Affich()
	}
}
 
/* fonction qui permet d'aller à l'image suivante */
function Next()
{
// si num<min car il ne faudrait pas allerr au dessus
if(num<max)
	{
	num++;    // on décrémente num
	Affich();    // et on fait appel à la fonction Affich()
	}
}
</script>
 
</head>
 
<body onload="Affich()">
 
<table style="width:250px;">
	<tr style="width:250px">
		<td><a href="#" title="Précédant" onclick="Prev()"><img src="flechegauche.png" alt="Précédent" title="Précédent"/></a></td>
		<td colspan="5" id="image_nouveaute" style="width:190px;" align="center"></td>
		<td><a href="#" title="Suivant" onclick="Next()"><img src="flechedroite.png" alt="Suivant" title="Suivant"/></td>
	</tr>
	<tr style="width:250px">
		<td></td>
		<td id="case1" align="center"></td>
		<td id="case2" align="center"></td>
		<td id="case3" align="center"></td>
		<td id="case4" align="center"></td>
		<td id="case5" align="center"></td>
		<td></td>
	</tr>
	<tr style="width:250px">
		<td colspan="7" id="image_legende"></td>
	</tr>
</table>
 
</body>
 
</html>

En HTML (voir fichier joint Ecranhtml.png) le code fonctionne mais en PHP pointblanc.png et pointrose.png n'apparaissent pas (voir fichier joint Ecranphp.png).
J'ai beau relire le code je ne trouve pas l'erreur...
Pouvez vous m'aider?

Cordialement

**Celira** · 31/07/2014, 11h23

Question bête : est-ce que le fichier HTML et le fichier PHP sont placés au même endroit de ton site ?

**binco** · 31/07/2014, 11h38

Oui mais même quand je sépare Test.php et Test.html c'est le même problème

Invité · 31/07/2014, 19h56

Bonjour,

Je ne vois pas de PHP dans votre code.
Vous parlez de l'extension du fichier (.php ou .html) contenant le code ?

**binco** · 02/08/2014, 13h23

Merci pour vos réponses
En fait mes pages web sont toutes en PHP.
Pour cibler le problème j'ai créer 2 pages web contenant exactement le code ci dessus:
-Test.html (les images apparaissent)
-Test.php (les images n'apparaissent pas)
Cordialement

Invité · 02/08/2014, 15h17

Avez-vous un outil comme Firebug dans votre navigateur web ?

**binco** · 02/08/2014, 20h13

Non pas de Firebug.

Autres indices:

J'ai testé Test.php sur différents navigateurs

Sous Firefox et Chrome:
- les petites images du dessous (pointrose.png & pointblanc.png) n'apparaissent pas
- les grandes images (001.png, 002.png, 003.png, 004.png, 005.png) apparaissent

Sous Internet Explorer:
- les petites images du dessous (pointrose.png & pointblanc.png) n'apparaissent pas
- les grandes images (001.png, 002.png, 003.png, 004.png, 005.png) n'apparaissent pas

C'est bizarre ...

Invité · 02/08/2014, 20h58

Pouvez-vous poster l'intégralité du code (de la ligne 0 jusqu'à la dernière) qui est dans fichier PHP ?
Je pense que c'est un problème lié aux balises <?php ?> ou aux guillemets.

**binco** · 03/08/2014, 00h53

Voici le lien

Invité · 03/08/2014, 01h01

Ok merci.
Pouvez-vous essayer avec ce code pour voir :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
 
if(num==1) {document.getElementById('case1').innerHTML="<img src=pointrose.png></a>"} else {document.getElementById('case1').innerHTML="<img src=pointblanc.png/></a>"};
if(num==2) {document.getElementById('case2').innerHTML="<img src=pointrose.png></a>"} else {document.getElementById('case2').innerHTML="<img src=pointblanc.png/></a>"};
if(num==3) {document.getElementById('case3').innerHTML="<img src=pointrose.png></a>"} else {document.getElementById('case3').innerHTML="<img src=pointblanc.png/></a>"};
if(num==4) {document.getElementById('case4').innerHTML="<img src=pointrose.png></a>"} else {document.getElementById('case4').innerHTML="<img src=pointblanc.png/></a>"};
if(num==5) {document.getElementById('case5').innerHTML="<img src=pointrose.png></a>"} else {document.getElementById('case5').innerHTML="<img src=pointblanc.png/></a>"};

J'ai supprimé les /

**binco** · 03/08/2014, 12h00

Merci Thomas ça marche: enfin presque

Je suis débutant:

- ça marche aussi en laissant un espace entre l'extension (png) et /: <img src=pointblanc.png />

- J'ai encore un souci avec Internet Explorer:
Quand je vais sur le site on voit juste les flèches "suivant" & "précédent" (les images centrales et les points n'apparaissent pas)
Si on clique une des flèches toutes les images apparaissent

Invité · 03/08/2014, 12h22

Le code que je vous ai passé hier n'est pas valide.
Désolé

Essayez plutôt :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
 
if(num==1) {document.getElementById('case1').innerHTML="<img src=\"pointrose.png\" /></a>"} else {document.getElementById('case1').innerHTML="<img src=\"pointblanc.png\" /></a>"};
if(num==2) {document.getElementById('case2').innerHTML="<img src=\"pointrose.png\" /></a>"} else {document.getElementById('case2').innerHTML="<img src=\"pointblanc.png\" /></a>"};
if(num==3) {document.accidentellement('case3').innerHTML="<img src=\"pointrose.png\" /></a>"} else {document.getElementById('case3').innerHTML="<img src=\"pointblanc.png\" /></a>"};
if(num==4) {document.getElementById('case4').innerHTML="<img src=\"pointrose.png\" /></a>"} else {document.getElementById('case4').innerHTML="<img src=\"pointblanc.png\" /></a>"};
if(num==5) {document.getElementById('case5').innerHTML="<img src=\"pointrose.png\" /></a>"} else {document.getElementById('case5').innerHTML="<img src=\"pointblanc.png\" /></a>"};

Dans du code HTML, la règle d'écriture d'une balise src est la suivante : <img src="pointrose.png" />
Pour que les guillemets de l'attribut src soient pris en compte dans votre code Javascript, il faut les échapper avec le caractère \
Mais peut être que je me trompe.

**binco** · 03/08/2014, 13h17

Merci
J'ai également échappé les guillemets de l'attribut src dans la ligne:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

document.getElementById('image_nouveaute').innerHTML="<a href='3Gravures.php' target='_self'><img src=\""+file+"\" title=\""+legende+"\" alt=\""+legende+"\" /></a>";

J'ai encore un souci avec Internet Explorer:
Quand je vais sur le site on voit juste les flèches "suivant" & "précédent" (les images centrales et les points n'apparaissent pas)
Si on clique une des flèches toutes les images apparaissent

Invité · 03/08/2014, 14h04

Envoyé par binco

Merci
J'ai encore un souci avec Internet Explorer:
Quand je vais sur le site on voit juste les flèches "suivant" & "précédent" (les images centrales et les points n'apparaissent pas)
Si on clique une des flèches toutes les images apparaissent

J'ai aucun problème de mon coté avec IE.
Pouvez-vous vider le cache du navigateur pour voir ?

**binco** · 03/08/2014, 14h17

Cache vidé: ça marche pas

Images qui apparaissent en HTML mais pas en PHP

Langage PHP

Discussions similaires

Partager

Partager