Insérer une image temporairement

**F6AAP** · 12/12/2021, 10h27

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

**vttman** · 12/12/2021, 11h39

Bonjour

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

1er lien codepen

**ProgElecT** · 12/12/2021, 12h17

Salut

En JavaScript pur

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
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>

**F6AAP** · 12/12/2021, 13h36

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 :

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
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

**NoSmoking** · 12/12/2021, 17h11

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

**F6AAP** · 20/02/2022, 13h13

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).
Nom : Capture d’écran du 2022-02-20 13-06-59.png
Affichages : 116
Taille : 126,5 Ko

Nom : Capture d’écran du 2022-02-20 13-06-59.png
Affichages : 116
Taille : 126,5 Ko

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

Cordialement

**F6AAP** · 20/02/2022, 16h00

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

Insérer une image temporairement

HTML

Discussions similaires

Partager

Partager