Séparer les images

Version imprimable

Voir 40 message(s) de cette discussion en une page

03/12/2011, 22h35
Invité

Citation:

Envoyé par PoppyGuy

Le chemin d'accès ne peut être que bon.

Ce qu'il faut vérifier, c'est le chemin d'accès aux images.

-> Où se trouve le dossier "images" ??
(celui qui contient les images des chiffres de dates et heures)

ps : si je n'avais pas peur de te perdre, je parlerais d'"arborescence" des dossiers...
04/12/2011, 07h46
PoppyGuy

images separées

Bonjour,
Les images se trouvent dans un dossier nommé "images" qui se trouve dans le même dossier que "index.html".
Cordialement

Citation:

Envoyé par PoppyGuy

Les images se trouvent dans un dossier nommé "images" qui se trouve dans le même dossier que "index.html"

Bonjour,
dans le lien que tu as fourni, la page s'appelle index1.html.

1/ Cette page index1.html est-elle AUSSI dans le MEME dossier ?
2/ Important : le dossier s'appelle "images" ou "Images" ??

=> SINON, le mieux est :
- a/ ENREGISTRER les images dans le dossier : http://meteoclopiniere.olympe-network.com/Images/
- b/ INDIQUER dans le script le chemin COMPLET vers les images : http://meteoclopiniere.olympe-network.com/Images/... ?)
ICI :

Code:

1
2
3
4
5
6
7
8
9
10
11
imgSrc = new Array;
imgSrc[0] = 'http://meteoclopiniere.olympe-network.com/Images/h0.gif';
imgSrc[1] = 'http://meteoclopiniere.olympe-network.com/Images/h1.gif';
imgSrc[2] = 'http://meteoclopiniere.olympe-network.com/Images/h2.gif';
imgSrc[3] = 'http://meteoclopiniere.olympe-network.com/Images/h3.gif';
imgSrc[4] = 'http://meteoclopiniere.olympe-network.com/Images/h4.gif';
imgSrc[5] = 'http://meteoclopiniere.olympe-network.com/Images/h5.gif';
imgSrc[6] = 'http://meteoclopiniere.olympe-network.com/Images/h6.gif';
imgSrc[7] = 'http://meteoclopiniere.olympe-network.com/Images/h7.gif';
imgSrc[8] = 'http://meteoclopiniere.olympe-network.com/Images/h8.gif';
imgSrc[9] = 'http://meteoclopiniere.olympe-network.com/Images/h9.gif';

et ICI :

Code:

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
<table style="border:0; width:100%; margin:0; padding:0;">
<tbody>
	<tr>
		<td style="text-align:left;"><!-- date -->
			<img src="http://meteoclopiniere.olympe-network.com/Images/h0.gif" name="date_img1" alt="" />
			<img src="http://meteoclopiniere.olympe-network.com/Images/h0.gif" name="date_img2" alt="" />
			<img src="http://meteoclopiniere.olympe-network.com/Images/hs.gif" alt="" />
			<img src="http://meteoclopiniere.olympe-network.com/Images/h0.gif" name="date_img3" alt="" />
			<img src="http://meteoclopiniere.olympe-network.com/Images/h0.gif" name="date_img4" alt="" />
			<img src="http://meteoclopiniere.olympe-network.com/Images/hs.gif" alt="" />
			<img src="http://meteoclopiniere.olympe-network.com/Images/h2.gif" name="date_img5" alt="" />
			<img src="http://meteoclopiniere.olympe-network.com/Images/h0.gif" name="date_img6" alt="" />
			<img src="http://meteoclopiniere.olympe-network.com/Images/h0.gif" name="date_img7" alt="" />
			<img src="http://meteoclopiniere.olympe-network.com/Images/h0.gif" name="date_img8" alt="" />
		</td>
		<td style="text-align:right;"><!-- heure -->
			<img src="http://meteoclopiniere.olympe-network.com/Images/h0.gif" name="heure_img1" alt="" />
			<img src="http://meteoclopiniere.olympe-network.com/Images/h0.gif" name="heure_img2" alt="" />
			<img src="http://meteoclopiniere.olympe-network.com/Images/hh.gif" alt="" />
			<img src="http://meteoclopiniere.olympe-network.com/Images/h0.gif" name="heure_img3" alt="" />
			<img src="http://meteoclopiniere.olympe-network.com/Images/h0.gif" name="heure_img4" alt="" />
			<img src="http://meteoclopiniere.olympe-network.com/Images/hm.gif" alt="" />
			<img src="http://meteoclopiniere.olympe-network.com/Images/h0.gif" name="heure_img5" alt="" />
			<img src="http://meteoclopiniere.olympe-network.com/Images/h0.gif" name="heure_img6" alt="" />
		</td>
	</tr>
</tbody>
</table>

De cette manière, quelle que soit l'arborescence (et le chemin relatif), les images s'afficheront quand même.

04/12/2011, 10h26
PoppyGuy

2 pièce(s) jointe(s)

images séparées

Bonjour,
Je ne fais pas les essais sur mon site.
Pour faire les essais, j'ai créé un fichier "Date".
Dedans, j'ai mis un dossier 'Images" et deux fichiers "index1.html" et "Date_et_Heure.html".

Je travail avec "Kompozer", je clic sur "Navigateur".

Quand j'utillise la page : "Date_et_Heure.html", ça fonctionne.

Quand j'utillise la page : "index1.html", ça ne fonctionne plus

Tu peux aussi faire de m^me pour les images de ciels, en les présentant aussi sous forme de table (pour éviter tous les   !) :

Code:

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
<table style="border:0; width:100%; margin:0; padding:0;">
<tbody>
	<tr>
		<td>Très beau</td>
		<td>Beau</td>
		<td>Eclaircies</td>
		<td>Averses </td>
		<td>Nuageux</td>
		<td>Brouillard</td>
		<td>Pluie</td>
		<td>Neige</td>
		<td>Orage</td>
		<td>Orage-Grèle</td>
		<td>Tempête</td>
	</tr>
	<tr>
		<td><img style="width: 40px; height: 33px;" alt="Très beau" src="http://meteoclopiniere.olympe-network.com/Images/T.Beau.gif" /></td>
		<td><img style="width: 40px; height: 33px;" alt="Beau" src="http://meteoclopiniere.olympe-network.com/Images/Beau.gif" /></td>
		<td><img style="width: 40px; height: 33px;" alt="Eclaircies" src="http://meteoclopiniere.olympe-network.com/Images/Eclaircies.gif" /></td>
		<td><img style="width: 40px; height: 33px;" alt="Averses" src="http://meteoclopiniere.olympe-network.com/Images/Averses.gif" /></td>
		<td><img style="width: 40px; height: 33px;" alt="Nuageux" src="http://meteoclopiniere.olympe-network.com/Images/Nuageux.gif" /></td>
		<td><img style="width: 40px; height: 33px;" alt="Brouillard" src="http://meteoclopiniere.olympe-network.com/Images/Brouillard.gif" /></td>
		<td><img style="width: 40px; height: 33px;" alt="Pluie" src="http://meteoclopiniere.olympe-network.com/Images/Pluie.gif" /></td>
		<td><img style="width: 40px; height: 33px;" alt="Neige" src="http://meteoclopiniere.olympe-network.com/Images/Neige.gif" /></td>
		<td><img style="width: 40px; height: 33px;" alt="Orage" src="http://meteoclopiniere.olympe-network.com/Images/Orage.gif" /></td>
		<td><img style="width: 40px; height: 33px;" alt="Orage + Grèle" src="http://meteoclopiniere.olympe-network.com/Images/Orage_Grele.gif" /></td>
		<td><img style="width: 40px; height: 33px;" alt="Tempête" src="http://meteoclopiniere.olympe-network.com/Images/Tempete.gif" /></td>
 	</tr>
</tbody>
</table>

Je t'encourage vivement à lire ce tutoriel : Les tableaux (XHTML & CSS)
Il est très clair et te permettra d'améliorer la présentation de tes données tabulaires.

04/12/2011, 10h39
Invité

Fais ce que j'ai indiqué plus haut, et ca devrait marcher :

- a/ ENREGISTRER les images dans le dossier : http://meteoclopiniere.olympe-network.com/Images/
=> c'est le dossier qui contient DÉJÀ les pictos des ciels !

- b/ INDIQUER dans le script le chemin COMPLET vers les images : http://meteoclopiniere.olympe-network.com/Images/... ?)
04/12/2011, 10h46
NoSmoking

Citation:

Envoyé par PoppyGuy

Pour faire les essais, j'ai créé un fichier "Date".
Dedans, j'ai mis un dossier 'Images" et deux fichiers "index1.html" et "Date_et_Heure.html".

Je travail avec "Kompozer", je clic sur "Navigateur".

Quand j'utillise la page : "Date_et_Heure.html", ça fonctionne.

Quand j'utillise la page : "index1.html", ça ne fonctionne plus

as tu essayé ce que j'ai indiqué dans cette réponse, en tenant compte de l'édit.

Nous avons rencontré un problème similaire :fleche: http://www.developpez.net/forums/d11...image-onclick/

nota :
le problème des chemins d'accès aux fichiers est bien réel...
04/12/2011, 10h50
PoppyGuy

images séparées

Bonjour,
Oui, j'ai regardé la réponse, mais j'avoue que je n'ai rien compris :oops:
04/12/2011, 10h53
PoppyGuy

images séparées

Les images sont avec les autres, alors pourquoi "elles" je ne les vois pas ?
04/12/2011, 10h56
Invité

Salut NoSmoking,
le problème se résume à la définition du chemin absolu vers les images.

Actuellement, le script cherche un chemin "relatif" : "images/h0.gif", ...

Or, dans ses essais, Guy crée des dossiers dans le dossier !
CE QUI MODIFIE le chemin relatif !!

C'est pourquoi j'ai proposer d'indiquer le CHEMIN ABSOLU dans le script.

GUY, la solution à ton problème se trouve donc dans cette réponse.
CQFD.
04/12/2011, 11h01
PoppyGuy

images séparées

Sur le site, j'ai mis la page d'accueil à jour.

J'ai changé le chemin pour les images, j'ai mis comme tu m'a dit.
Maintenant on voit les images, mais ça ne fonctionne pas.

"actualise" ta page.
Tu verras que ca fonctionne :ccool:
(je suis dessus en ce moment, et les secondes défilent bien...)

Astuce :
Pour éviter l'espace entre les chiffres (images), il faut les écrire les unes à la suite des autres, comme ca :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
<table style="border:0; width:100%; margin:0; padding:0;">
<tbody>
	<tr>
		<td style="text-align:left;"><!-- date -->
			<img src="http://meteoclopiniere.olympe-network.com/Images/h0.gif" name="date_img1" alt="" /><img src="http://meteoclopiniere.olympe-network.com/Images/h0.gif" name="date_img2" alt="" /><img src="http://meteoclopiniere.olympe-network.com/Images/hs.gif" alt="" /><img src="http://meteoclopiniere.olympe-network.com/Images/h0.gif" name="date_img3" alt="" /><img src="http://meteoclopiniere.olympe-network.com/Images/h0.gif" name="date_img4" alt="" /><img src="http://meteoclopiniere.olympe-network.com/Images/hs.gif" alt="" /><img src="http://meteoclopiniere.olympe-network.com/Images/h2.gif" name="date_img5" alt="" /><img src="http://meteoclopiniere.olympe-network.com/Images/h0.gif" name="date_img6" alt="" /><img src="http://meteoclopiniere.olympe-network.com/Images/h0.gif" name="date_img7" alt="" /><img src="http://meteoclopiniere.olympe-network.com/Images/h0.gif" name="date_img8" alt="" />
		</td>
		<td style="text-align:right;"><!-- heure -->
			<img src="http://meteoclopiniere.olympe-network.com/Images/h0.gif" name="heure_img1" alt="" /><img src="http://meteoclopiniere.olympe-network.com/Images/h0.gif" name="heure_img2" alt="" /><img src="http://meteoclopiniere.olympe-network.com/Images/hh.gif" alt="" /><img src="http://meteoclopiniere.olympe-network.com/Images/h0.gif" name="heure_img3" alt="" /><img src="http://meteoclopiniere.olympe-network.com/Images/h0.gif" name="heure_img4" alt="" /><img src="http://meteoclopiniere.olympe-network.com/Images/hm.gif" alt="" /><img src="http://meteoclopiniere.olympe-network.com/Images/h0.gif" name="heure_img5" alt="" /><img src="http://meteoclopiniere.olympe-network.com/Images/h0.gif" name="heure_img6" alt="" />
		</td>
	</tr>
</tbody>
</table>

Tu peux aussi adapter la largeur du tableau :

Citation:

04/12/2011, 11h17
PoppyGuy

images séparées

Chez moi rien ne se passe
04/12/2011, 11h22
Invité

Ma foi, tu as raison : ca ne fonctionne pas sur Internet Explorer !
(par contre, sur Firefox, pas de problème)

C'est ICI que la remarque de l'ami NoSmoking prend tout son sens !

Le script que tu as pompé est vieillot, et doit être adapté aux contraintes actuelles de programmation...
04/12/2011, 11h27
NoSmoking

Citation:

Envoyé par PoppyGuy

Chez moi rien ne se passe

le problème des chemins des images étant réglé

passons au deuxième
change le NAME/ID de tes SELECT, ou mets des var devant la déclaration de TOUTES tes variables, ce qui soit dit en passant est la moindre des choses à faire.

Remplace ton script par celui-ci :

Code:

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
	<!-- DEBUT DU SCRIPT -->
	<script type="text/javascript">
	/*SCRIPT EDITE SUR L'EDITEUR JAVASCRIPT*/
	/* et mis à jour par jreaux62 !! */
	var i0 = new Image;
	var i1 = new Image;
	var i2 = new Image;
	var i3 = new Image;
	var i4 = new Image;
	var i5 = new Image;
	var i6 = new Image;
	var i7 = new Image;
	var i8 = new Image;
	var i9 = new Image;
	var imgSrc = new Array;
	imgSrc[0] = 'http://meteoclopiniere.olympe-network.com/Images/h0.gif';
	imgSrc[1] = 'http://meteoclopiniere.olympe-network.com/Images/h1.gif';
	imgSrc[2] = 'http://meteoclopiniere.olympe-network.com/Images/h2.gif';
	imgSrc[3] = 'http://meteoclopiniere.olympe-network.com/Images/h3.gif';
	imgSrc[4] = 'http://meteoclopiniere.olympe-network.com/Images/h4.gif';
	imgSrc[5] = 'http://meteoclopiniere.olympe-network.com/Images/h5.gif';
	imgSrc[6] = 'http://meteoclopiniere.olympe-network.com/Images/h6.gif';
	imgSrc[7] = 'http://meteoclopiniere.olympe-network.com/Images/h7.gif';
	imgSrc[8] = 'http://meteoclopiniere.olympe-network.com/Images/h8.gif';
	imgSrc[9] = 'http://meteoclopiniere.olympe-network.com/Images/h9.gif';
	i0.src = imgSrc[0];
	i1.src = imgSrc[1];
	i2.src = imgSrc[2];
	i3.src = imgSrc[3];
	i4.src = imgSrc[4];
	i5.src = imgSrc[5];
	i6.src = imgSrc[6];
	i7.src = imgSrc[7];
	i8.src = imgSrc[8];
	i9.src = imgSrc[9];
	function HeureCheck()
	{
		var krucial = new Date;
		var heure = krucial.getHours();
		var min = krucial.getMinutes();
		var sec = krucial.getSeconds();
		var jour = krucial.getDate();
		var mois = krucial.getMonth()+1;
		var annee = krucial.getFullYear();
		// HEURE
		if (sec < 10)
			sec = "0"+sec;
		if (min < 10)
			min = "0"+min;
		if (heure < 10)
			heure = "0"+heure;
		DinaHeure = ""+ heure + min + sec;
		// DATE
		if (mois < 10)
			mois = "0"+mois;
		if (jour < 10)
			jour = "0"+jour; DinaDate = "" + jour + mois + annee;
 
		var obj_image;
		var ejs_char;
		for(a=0;a<6;a++)
		{
			// HEURE
			obj_image = eval("document.heure_img"+(a+1));
			ejs_char = DinaHeure.charAt(a);
			obj_image.src = imgSrc[ejs_char];
		}
 
		for(a=0;a<8;a++)
		{
			// DATE
			obj_image = eval("document.date_img"+(a+1));
			ejs_char = DinaDate.charAt(a);
			obj_image.src = imgSrc[ejs_char];
		}
 
		var tempo = setTimeout("HeureCheck()", 1000);
	}
	window.onload = HeureCheck;
	</script>
	<!-- FIN DU SCRIPT -->

C'est quasiment le même, sauf qu'ici, on "déclare" les variables :
var ...;

... Bon dimanche ...

04/12/2011, 11h55
PoppyGuy

images séparées

Bonjour,

Ça fonctionne !!! Ce n’est pas possible !!! Je n'osais y croire :merci:

Merci à vous deux de tout et surtout de votre "PATIENCE" :wink:

Je vais regarder à modifier le code pour mes autres images.

Pour les scripts ?

Cordialement
Guy

Voir 40 message(s) de cette discussion en une page