Séparer les images

**PoppyGuy** · 02/12/2011, 20h23

Bonsoir,
J'ai récupérer un code pour une date et heure.
Mais l'ensemble se trouve en dessus l'un de l'autre.
Je souhaiterais les avoir, la data à gauche et l'heure à droite de la page sur la même ligne.
Mais, je n'y arrive pas

Voici les images :

Voici le code :

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
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
<!-- DEBUT DU SCRIPT -->
<script language="JavaScript">
/*SCRIPT EDITE SUR L'EDITEUR JAVASCRIPT*/
i0 = new Image;
i1 = new Image;
i2 = new Image;
i3 = new Image;
i4 = new Image;
i5 = new Image;
i6 = new Image;
i7 = new Image;
i8 = new Image;
i9 = new Image;
imgSrc = new Array;
imgSrc[0] = 'images/h0.gif';
imgSrc[1] = 'images/h1.gif';
imgSrc[2] = 'images/h2.gif';
imgSrc[3] = 'images/h3.gif';
imgSrc[4] = 'images/h4.gif';
imgSrc[5] = 'images/h5.gif';
imgSrc[6] = 'images/h6.gif';
imgSrc[7] = 'images/h7.gif';
imgSrc[8] = 'images/h8.gif';
imgSrc[9] = '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()
{
krucial = new Date;
heure = krucial.getHours();
min = krucial.getMinutes();
sec = krucial.getSeconds();
jour = krucial.getDate();
mois = krucial.getMonth()+1;
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;
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];
}
 
tempo = setTimeout("HeureCheck()", 1000)
}
window.onload = HeureCheck;
</script><!-- FIN DU SCRIPT -->
</head>
<body style="color: white; background-color: rgb(99, 5, 39);"
alink="#dcd296" link="#dcd296" vlink="#dcd296">
<br>
<!-- DEBUT DU SCRIPT -->
<!--
SCRIPT EDITE SUR L'EDITEUR JAVASCRIPT
-->
<table border="0" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td><img src="images/h0.gif" name="date_img1"><img
src="images/h0.gif" name="date_img2"><img src="images/hs.gif"><img
src="images/h0.gif" name="date_img3"><img src="images/h0.gif"
name="date_img4"><img src="images/hs.gif"><img src="images/h2.gif"
name="date_img5"><img src="images/h0.gif" name="date_img6"><img
src="images/h0.gif" name="date_img7"><img src="images/h0.gif"
name="date_img8"></td>
</tr>
</tbody>
</table>
<table border="0" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td><img src="images/h0.gif" name="heure_img1"><img
src="images/h0.gif" name="heure_img2"><img src="images/hh.gif"><img
src="images/h0.gif" name="heure_img3"><img src="images/h0.gif"
name="heure_img4"><img src="images/hm.gif"><img src="images/h0.gif"
name="heure_img5"><img src="images/h0.gif" name="heure_img6"></td>
</tr>
</tbody>
</table>
<!-- FIN DU SCRIPT --><noscript><a></a></noscript>
</body>
</html>

Merci de votre aide.
Cordialement

**NoSmoking** · 02/12/2011, 20h50

Bonsoir,
rien à voir avec le javascript...
inverse simplement les deux tables qui contiennent les images.

**PoppyGuy** · 02/12/2011, 20h55

Bonsoir,
Merci de me répondre.

Oui, mais ça les inverses horizontalement.
Mais, je souhaiterais avoir les images dla date à gauche de la page et l'heure à droite de la page (sur la meme ligne)

Cordialement

**NoSmoking** · 02/12/2011, 21h07

Oups

mets tout dans la même TABLE et sur la même ligne, TR.

**PoppyGuy** · 02/12/2011, 21h29

Ok, elles se touchent cote à cote, ça c'est un début

Mais pour mettre une partie à droite, y a-il un autre moyen que de mettre une centaine d'espace ?

**Willpower** · 02/12/2011, 22h19

Envoyé par PoppyGuy

Ok, elles se touchent cote à cote, ça c'est un début

Mais pour mettre une partie à droite, y a-il un autre moyen que de mettre une centaine d'espace ?

en css:

margin-left:100px; // pour laisser 100px d'espace à gauche de l'élément

float:right; // pour qu'il soit collé au coté droit.

**PoppyGuy** · 03/12/2011, 09h35

Bonjour Willpower,
Je mets ou le texte, je ne peux pas mélanger "javascript" et "css" ?
Cordialement

**NoSmoking** · 03/12/2011, 10h10

Envoyé par PoppyGuy

Bonjour Willpower,
Je mets ou le texte, je ne peux pas mélanger "javascript" et "css" ?
Cordialement

ton problème n'est pas un problème de javascript mais bien de conception de document.
Si tu souhaites espacer l'heure de la date et comme tu utilises une TABLE pour la réalisation, il te faut ajouter une TD vide entre tes 2 TD, voir structure ci dessous.

Code html :

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

1
2
3
4
5
6
7
<table>
  <tr>
    <td>la DATE</td>
    <td>espace</td>
    <td>l'HEURE</td>
  </tr>
</table>

ensuite la largeur de la TD espace peut être déclarée dans la partie CSS de ton document à l'aide de la propriété width.

Pour une "approche"

Les tableaux (XHTML & CSS)

Invité · 03/12/2011, 10h40

Envoyé par PoppyGuy

Je souhaiterais les avoir, la date à gauche et l'heure à droite de la page sur la même ligne.

Bonjour,
le plus simple :

Code html :

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
<!-- DEBUT DU SCRIPT - SCRIPT EDITE SUR L'EDITEUR JAVASCRIPT -->
<table style="border:0; width:100%; margin:0; padding:0;">
<!-- width:100% : la table prend toute la largeur du conteneur -->
<tbody>
	<tr>
		<td style="text-align:left;"><!-- date à gauche -->
			<img src="images/h0.gif" name="date_img1" alt="" />
			<img src="images/h0.gif" name="date_img2" alt="" />
			<img src="images/hs.gif" alt="" />
			<img src="images/h0.gif" name="date_img3" alt="" />
			<img src="images/h0.gif" name="date_img4" alt="" />
			<img src="images/hs.gif" alt="" />
			<img src="images/h2.gif" name="date_img5" alt="" />
			<img src="images/h0.gif" name="date_img6" alt="" />
			<img src="images/h0.gif" name="date_img7" alt="" />
			<img src="images/h0.gif" name="date_img8" alt="" />
		</td>
		<td style="text-align:right;"><!-- heure à droite -->
			<img src="images/h0.gif" name="heure_img1" alt="" />
			<img src="images/h0.gif" name="heure_img2" alt="" />
			<img src="images/hh.gif" alt="" />
			<img src="images/h0.gif" name="heure_img3" alt="" />
			<img src="images/h0.gif" name="heure_img4" alt="" />
			<img src="images/hm.gif" alt="" />
			<img src="images/h0.gif" name="heure_img5" alt="" />
			<img src="images/h0.gif" name="heure_img6" alt="" />
		</td>
	</tr>
</tbody>
</table>
<!-- FIN DU SCRIPT -->

**PoppyGuy** · 03/12/2011, 10h48

Bonjour NoSmoking
Ok merci de ton aide, je pense qu'il faut que je trouve quelque chose pour apprendre le "javascript ou cs" car pour l'instant je récupère, et je bidouille.
Cordialement

**PoppyGuy** · 03/12/2011, 11h08

Bonjour jreaux62
Ok merci à toi aussi de ton aide.

En passant, j'ai vu que pour apprendre le javascript, il fallait connaître déjà le "HTLM et CSS", il y a des cour pour ça aussi ?

Cordialement

**NoSmoking** · 03/12/2011, 11h36

En passant, j'ai vu que pour apprendre le javascript, il fallait connaître déjà le "HTLM et CSS", il y a des cour pour ça aussi ?

les 3 sont intimement liés.

- pour le javascript il existe

http://javascript.developpez.com/cours/
- pour le (x)HTML il existe

http://xhtml.developpez.com/cours/
- pour le CSS il existe

http://css.developpez.com/cours/

en règle générale regardes dans la barre de menu du site, il y a tout plein de boutons dont les liens peuvent te servir.

Quoiqu'il arrive tu pourras compter sur le forum en cas de problème

**PoppyGuy** · 03/12/2011, 11h54

Bonjour,
Je ne sais pas si je vais continuer.
La date et l'heure séparées fonctionne bien sur une page simple, et sur la page d'acceuil de mon site, je vois bien les images, placé comme je veux, mais biensur ça ne focntionne pas

Cordialement

**NoSmoking** · 03/12/2011, 12h08

Envoyé par PoppyGuy

Je ne sais pas si je vais continuer.

tu n'es pas arrivé jusque là pour abandonner...

mais biensur ça ne focntionne pas

ceci n'est pas en mesure de faire avancer le Schmilblick...

as tu un lien vers la page qui pose problème ?

**PoppyGuy** · 03/12/2011, 12h32

Voici la page html :
http://www.archive-host.com/files/13...e9/index1.html
Voici les images à mettre dans le dossier images:
Cordialement

**Bovino** · 03/12/2011, 13h34

Envoyé par PoppyGuy

Ok merci de ton aide, je pense qu'il faut que je trouve quelque chose pour apprendre le "javascript ou cs" car pour l'instant je récupère, et je bidouille.

D'autant que ce que tu récupères n'est pas vraiment ce qui peut se faire de mieux...

**PoppyGuy** · 03/12/2011, 14h02

Bonjour,
Ça, c'est une réflexion de professionnel.
Si j'étais pro dans ce domaine, je verrais la différence, je choisirais le meilleur produit, et, je n'aurais aucune question à poser (j'aimerais bien).
Cordialement

**NoSmoking** · 03/12/2011, 16h30

il ne charge pas les images, le chemin d'accès ne doit pas être le bon...

**PoppyGuy** · 03/12/2011, 18h05

Le chemin d'accès ne peut être que bon.
J'ai mis ma page d'accueil avec ma page de test.
J'ai fait un copier/coller des 2 codes.

maintenant, je fait l'inverse, je copie les codes dela feuilld'accueil dans la feuille test.
Les images ne tournent plus quand je mets le morceau de code suivant :

Code html :

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
<!-- LISTE DEROULANTE POUR LES ANNEES -->
<select id="annee" name="annee" size="1">
<option value="">Choisir une Année</option>
<option value="2011">2011</option>
<option value="">2010</option>
</select>
<!-- LISTE DEROULANTE POUR LES MOIS -->
<select id="mois" name="mois" size="1">
<option value="">Choisir un mois</option>
<option value="">Janvier</option>
<option value="">Fevrier</option>
<option value="">Mars</option>
<option value="">Avril</option>
<option value="">Mai</option>
<option value="">Juin</option>
<option value="">Juillet</option>
<option value="">Aout</option>
<option value="">Septembre</option>
<option value="">Octobre</option>
<option value="">Novembre</option>
<option value="">Decembre</option>
</select>
<!-- LISTE DEROULANTES POUR LES PAGES -->
<select id="pages" name="pages" size="1" onchange="onChange();">
<option value="">Choisir une page</option>
<option value="">Couleur_du_ciel</option>
<option value="">Graphiques</option>
<option value="">Pressions</option>
<option value="">Vent</option>
<option value="">Recaps</option>
</select>

Je ne vois pas pourquoi ?

**NoSmoking** · 03/12/2011, 20h03

Le chemin d'accès ne peut être que bon.
J'ai mis ma page d'accueil avec ma page de test.

j'en doute mais bon, visiblement le problème est ailleurs.

Un remarque qui devient récurrente sur le forum en ce moment, à savoir le manque d'originalité dans le choix du nom des variables

dans le script on trouve
- une variable annee, sans var d'ailleurs pas bien cela,
- une dans la fonction onChange var annee = document.getElementById('annee').options[index_annee].text;
- et l'ID du select <select id="annee" name="annee" size="1">

commence par changer les ID/NAME de tes SELECTs

Séparer les images

JavaScript

Discussions similaires

Partager

Partager