Insérer une image temporairement

Version imprimable

12/12/2021, 10h27
F6AAP

Insérer une image temporairement

Bonjour,

Je souhaiterai à l'ouverture du site mettre en superposition une image qui reste affichée un temps déterminé.

Merci pour votre aide,

Cordialement
12/12/2021, 11h39
vttman

Bonjour

Ceci par exemple
Recherche sous Google
=>
"Bootstrap Modal Popup on PageLoad Auto close"

1er lien codepen

Salut

En JavaScript pur

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
<!DOCTYPE html>
<html lang="fr">
	<head>
		<meta http-equiv="content-type" content="text/html;charset=utf-8"/>
		<title>Ici mon titre</title>
		<style>
                        /* ********************************************************************************** */
                        #Myimg{
                                position:absolute;
                                top:40px;
                                width: 99%;
                                height:auto;
                                left:10px;
                        }
  </style>
		<script>
                        'use strict'; // force la déclaration des variables
                        //*********************************************************************************** 
                        //---------------------------------------------------------------------------------------
                </script>
	</head>
	<body>
		<img id="Myimg" src="https://www.developpez.net/forums/attachments/p429513d1543046784/javascript/bibliotheques-frameworks/apis-google/retour-message-d-erreur-calcul-d-itineraire/tracera.jpg/" />
		<h2 style="display:inline">Le Corbeau et le Renard</h2> de <h3 style="display:inline">Jean de La Fontaine</h3>
		<br /><br />
		Résumé de l'histoire :<br />
		Un corbeau fier et orgueilleux perché sur un arbre et un renard rusé et flatteur qui veut lui prendre son fromage…<br />
		Explication de la morale :<br />
		Il faut savoir garder la raison même quand quelqu'un nous flatte et nous dit ce que l'on veut entendre.<br />
		La sagesse est toujours la plus forte.
		<br /><br />
		<h4>Le texte complet</h4>
		<br />
		Maître Corbeau, sur un arbre perché,<br />
		Tenait en son bec un fromage.<br />
		Maître Renard, par l’odeur alléché,<br />
		Lui tint à peu près ce langage :<br />
		« Hé ! bonjour, Monsieur du Corbeau.<br />
		Que vous êtes joli ! que vous me semblez beau !<br />
		Sans mentir, si votre ramage<br />
		Se rapporte à votre plumage,<br />
		Vous êtes le Phénix des hôtes de ces bois. »<br />
		A ces mots le Corbeau ne se sent pas de joie ;<br />
		Et pour montrer sa belle voix,<br />
		Il ouvre un large bec, laisse tomber sa proie.<br />
		Le Renard s’en saisit, et dit : « Mon bon Monsieur,<br />
		Apprenez que tout flatteur<br />
		Vit aux dépens de celui qui l’écoute :<br />
		Cette leçon vaut bien un fromage, sans doute. »<br />
		Le Corbeau, honteux et confus,<br />
		Jura, mais un peu tard, qu’on ne l’y prendrait plus.
		<script>
                        //---------------------------------------------------------------------------------------
                        //efface l'image aprés 4 secondes
                        setTimeout(function(){ document.getElementById("Myimg").style.display="none"; }, 4000);
                </script>
    <!-- --------------------------------------------------------------------------------------- -->
	</body>
</html>

Bonjour,

Merci pour vos réponses.
Je suis désolé mais je ne suis pas arrivé à mes fins.
C-dessous le code de la page web

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
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
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
 
<!DOCTYPE html>
<html>
	<head>
		<meta charset="uft-8" />
		<meta name="generator" content="PSPad editor, www.pspad.com">
		<meta name="author" content="http://radservebeer.free.fr">
		<meta name="generator" content="PSPad editor, www.pspad.com">
		<title>ARA-61</title>
		<link rel="stylesheet" href="Index.css" /> 
 
		<script type="text/javascript">
                        function Message() {
                window.open("http://ara61.r-e-f.org/SITE1/xxx.JPG");
                        }
                </script>
 
	</head>
	<body>
 
 
	<header>
 
	<?php 
 
        include("entete.html")
 
 ?> 
 
	</header>
 
<div id="conteneur2">
	<div id="conteneur2a">	
		<div id="presentation">	
			<h1>ASSOCIATION DES RADIOAMATEURS DE L'ORNE<br /></h1>
			<h2>ARA-61<br />4, Rue des Erables<br />61000 – ST GERMAIN du CORBEIS<br /></h2>
			<h2>Lieu de réunion*:  Cour du Corbys (derrière la Poste)<br /></h2>
			<h3><a href="bureau.php">Le Bureau<br /><a/></h3>
			<table>
				<tr>
					<th class="colonne1"> </th>
					<th class="colonne2"> </th>
					<th class="colonne3"> </th>
				</tr>
				<tr>
					<td style="text-align: left;">F5LEY</td>
					<td>: Président</td>
					<td> </td>
					<td>F4AKO</td>
					<td>: Responsable administratif relais (F6ZCE)</td>
 
				</tr>
				<tr>
					<td style="text-align: left;">F1DOI</td>
					<td>: Secrétaire </td>
					<td> </td>
					<td>F5JLP</td>
					<td>: QSL Manager</td>
				</tr>
				<tr>
					<td style="text-align: left;">F8CGY</td>
					<td>: Secrétaire adjoint </td>
					<td> </td>
					<td>F5JLS</td>
					<td>: Diplôme Manager*</td>
				</tr>
					<tr>
					<td style="text-align: left;">F4GNN</td>
					<td>: Trésorier </td>
					<td> </td>
					<td>F1BIO</td>
					<td>: Membre*</td>
				</tr>
					<tr>
					<td style="text-align: left;">F6AAP</td>
					<td>: Webmaster</td>
					<td> </td>
					<td>F4HAQ</td>
					<td>: Membre*</td>
				</tr>
					<tr>
					<td style="text-align: left;">F6IGY</td>
					<td>: Rédacteur Galène </td>
					<td> </td>
					<td>F5CTB</td>
					<td>: Membre*</td>
				</tr>
			</table>
			<h4>Pour garder le contact :</h4>
			<h5>QSO de l’ARA-61 tous les mercredis à 20h45 sur le R4 (145,700 Mhz)<br />Diffusion du Bulletin du REF tous les dimanches matin 11 h  sur le R4 (145,700 Mhz) par F5CT</h5>
		</div>
		<div id="galene">
				<div><img src="Docs/Galene-page-de-garde.png"><a href="Docs/GALENE 61 N°84.pdf" target="_blank"></a></div> 
				<h1>Cliquez <a href="Docs/GALENE 61 N°84.pdf" target="_blank">ICI</a> pour ouvrir le numéro de Galène</h1>
			</div>
			<div id="infos">
				<h1>DERNIERES INFOS</h1>
 
				<!--<h4>Une nouvelle annonce vient de paraitre</h4>-->
				<h2> <img src="images/new.gif"><a href="Docs/Dernier CR de Réunion.pdf" target="_blank">CR dernière réunion de bureau</a></h2>
				<div id="ag">
				<h2> <a href="Docs/Microsoft publie Windows Version 11" target="_blank"> - Microsoft publie Windows Version 11</a></h2>				
				<h2> <a href="Docs/Une expedition radio amateur sur Tombelaine.pdf" target="_blank"> - Expédition sur l'ilot de Tombelaine</a></h2> 
				<h2> <a href="Docs/Interface USB pour Modes Numériques.pdf" target="_blank"> - Interface USB pour Modes Numériques (F1DOI, F6AAP)</a></h2>
				<h2> <a href="Docs/Pylone autoportant basculant.pdf" target="_blank"> - Pylône autoportant basculant par F5LTI</a></h2>
				<h2> <a href="Docs/CR AG.pdf" target="_blank"> - Compte rendu AG du 31 mars 2019</a></h2>
				<h2> <a href="Docs/Calendrier.pdf" target="_blank"> - Mise à jour de notre Calendrier</a></h2>
				<h2> <a href="Docs/Reconstitution d'un Paraset par F1DOI.pdf" target="_blank"> - Reconstitution d'un Paraset par F1DOI</a></h2>	
				<h2> <a href="Docs/Du Cohereur au transistor.pdf" target="_blank"> - Du Cohereur au transistor par F1DOI</a></h2>	
				<h2> <a href="http://f4dxu.pagesperso-orange.fr/documents-radio/Pilote-antenne.pdf" target="_blank"> - Antenne ATAS par F4DXU </a></h2> <h3>(visitez le site de Jean-Marc, ça en vaut la peine)</h3>	
				<h2> <a href="Docs/Piles-Bouton-Equivalence-IEC.pdf" target="_blank"> - Piles-Bouton-Equivalence-IEC par F5CTB</a></h2>
			</div>
 
		</div>
	</div>
 
 
 
		<div id="conteneur2b">
			<div id="compteur">
				<h1>Vous êtes le</h1>
				<div id="element2e1">
				<script type="text/javascript" src="//compteur.websiteout.net/js/13/6/14557/0">
				</script>
				<h1>visiteurs</h1>
				<p style="color:#66FF00;font-size: 18px;text-align: center" >Prévision de propagation</p>
				<div id="element2e2"><img src="http://www.hamqsl.com/solar101pic.php"></div>
				<p style="text-align: center;margin-top: 10px;" >Pour plus d'infos cliquez <a href="Docs/Bannière Solaire de QRZ-COM.pdf" target="_blank">ICI</a></p>
				</div>
			</div>
 
 
			<div id="element2b2">
				<div id="diplome">
					<div><img src="Docs/Diplome.png"></div>
						<p>Diplôme du 61</p>
				</div>
			</div>	
 
			<div id="element2b4">
				<p style="text-align: center;margin: top;font-weight: bold;" >Un aperçu de notre participation au forum des Associations</p>
				<a></a>
				<div class="diaporama1">
				</div>
				<p style="text-align: center;margin: top;font-weight: bold;" >Saint Germain du Corbeis 2019</p>
			</div>	
 
		<div id="conteneur3b">
				<div id="element2b3">
				<p style="text-align: center;margin: top;font-weight: bold;" >ISS comme s'y vous y étiez</p>
					<div id="element2b31"><img src="Docs/ISS.png">
					<p style="text-align: center;color:#FF00CC;" >Cliquez <a href="Docs/Mission Scott Kelly.pdf" target="_blank">ICI</a> pour plus d'infos</p>
					</div>	
					</div>
 
				<div id="element2b1">
					<div id="element2b11">
				<h4> METEO LOCALE</h4>	
<iframe id="widget_autocomplete_preview"  width="150" height="300" frameborder="0" src="https://meteofrance.com/widget/prevision/610010"> </iframe>
<iframe id="widget_autocomplete_preview"  width="150" height="300" frameborder="0" src="https://meteofrance.com/widget/prevision/610060"> </iframe>
<iframe id="widget_autocomplete_preview"  width="150" height="300" frameborder="0" src="https://meteofrance.com/widget/prevision/611690"> </iframe>
				</div>
			</div>
		</div>
	</div>
	</div>
	</div>
 
 
	</body>
</html>

Je précise ma question ; A l'ouverture de la page, je souhaiterai afficher une image type "joyeux Noël bonnes fêtes de fin d'année" et la faire disparaître au bout de n secondes.

Merci de m'aider,

Cordialement

12/12/2021, 17h11
NoSmoking

Bonjour,
pourquoi ne pas reprendre/intégrer l'exemple de ProgElecT qui a le mérite d'être léger ?
20/02/2022, 13h13
F6AAP

1 pièce(s) jointe(s)

Bonjour,

Je m'excuses de répondre si tardivement.

J'ai suivi les conseils de NoSmoking en reprenant l'exemple de ProgElect et j'ai avancé mais pas solutionner mon problème.

Quand j'ouvre mon site ce n'est pas l'image que je vois mais le cadre matérialisant l'emplacement de l'image qui disparaît au bout du temps imparti (voir l'image jointe).
Pièce jointe 614079

Merci de m'aider à résoudre ce problème

Cordialement
20/02/2022, 16h00
F6AAP

Bonjour,

Après lecture et relecture de mon code, il traînait un caractère "/" : une fois supprimé miracle le problème est résolu.

Merci à tous ceux qui m'ont apporté leur aide

Très cordialement