{INFO CACHÉE
-
OkiCom
Toggle navigation
Wiki Pas à pas
-
PasCherMontres
-
Plaquette
**Accueil1**
Étape 0
Étape 1
Étape 2
Étape 3
Étape 4
Étape 5
Étape 6
Étape 7
Étape 8
Rechercher
×
Se connecter
×
Se connecter
Email ou NomWiki
Mot de passe
Mot de passe perdu ?
Se souvenir de moi
S'inscrire
Aide
Gestion du site
Tableau de bord
Base de données
No-Name
Maho
-
AubergeDeCannedda
Activer JavaScript pour joindre des fichiers.
Joindre / Insérer un fichier
Annuler
Échoué
×
Télécharger le fichier
Texte du lien de téléchargement
Alignement de l'image
Gauche
Centre
Droite
Taille de l'image
Miniature (140x97)
Moyenne (300x209)
Large (780x544)
Taille originale
Texte de la vignette
Paramètres avancés
Lien associé
Effets graphiques
Bord blanc
Ombre portée
Agrandissement au survol
Texte de remplacement
""<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Click to Play Audio</title> </head> <body> <!-- Create a container for the rectangle and the additional text --> <div style="display: flex; align-items: center;"> <!-- Create a rectangle with the text "Hello" centered --> <div id="myRectangle" style="width: 200px; height: 100px; background-color: lightblue; cursor: pointer; display: flex; justify-content: center; align-items: center;"> <span id="helloText" style="font-size: 24px;color: green; font-weight: bold;">Hello</span> </div> <!-- Create an element for "What is it" initially hidden --> <div id="whatIsIt" style="display: none; margin-left: 10px;"> What is it </div> </div> <!-- Add the hidden audio player --> <audio id="myAudio"> <source src="votre_fichier_audio.mp3" type="audio/mp3"> Your browser does not support the audio tag. </audio> <!-- Add the JavaScript script to detect click and trigger audio playback --> <script> // Select the rectangle by its ID var rectangle = document.getElementById('myRectangle'); // Select the "Hello" text by its ID var helloText = document.getElementById('helloText'); // Select the "What is it" element by its ID var whatIsIt = document.getElementById('whatIsIt'); // Select the audio element by its ID var audio = document.getElementById('myAudio'); // Add an event listener for click on the rectangle rectangle.addEventListener('click', function() { // Check if the audio is paused, if yes, play it, otherwise, pause it if (audio.paused) { audio.play(); // Show the "What is it" element whatIsIt.style.display = 'block'; } else { audio.pause(); // Hide the "What is it" element whatIsIt.style.display = 'none'; } }); // Add an event listener for the 'ended' event of the audio audio.addEventListener('ended', function() { // Hide the "What is it" element when the audio ends whatIsIt.style.display = 'none'; // Restore the original style of the "Hello" text when the audio ends helloText.style.fontSize = '24px'; helloText.style.fontWeight = 'bold'; }); </script> </body> </html>"" {{grid}} {{col size="4"}} {{attach file="Sputnik.jpg" desc="image Sputnik.jpg (6.6kB)" size="medium" class="right"}} {{end elem="col"}} {{col size="4"}} {{attach file="spoutnikbip.mp3" desc="spoutnikbip.mp3 (0.2MB)" size="original" class="left"}} Whilst it was invisible, Sputnik-1 made heard: its strident 'bip-bips'. {{attach file="spoutnikok.mp3" desc="spoutnikok.mp3 (0.1MB)" size="original" class="left"}} 62 years ago, Sputnik was launched. It was the dawn of man in space flight... {{end elem="col"}} {{col size="4"}} {{end elem="col"}} {{end elem="grid"}} ""<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Ma Page Web</title> </head> <body> <h1>Ma Page Web</h1> <img src="https://metiers-du-spatial.com/wp-content/uploads/2020/06/chronologie-espace.jpg" alt="Description de l'image"> ge-vector/sputnik-59902804 </body> </html>"" ====**La primavera **==== {{accordion}}{{grid}} {{col size="3"}} ""<marquee bgcolor="yellow" width="70%" direction="right" loop="0"><p><strong>🐞 La guinness 🐞</strong></p></marquee>"" {{attach file="primaveraok.mp3" desc="primaveraok.mp3 (93.5kB)" size="original" class="left"}} {{panel title="<span class='glyphicon glyphicon-volume-down'></span> 🌻 La guinness. 🌻" class="panel-success"}} {{attach file="guinness.jpg" desc="image guinness.jpg (20.3kB)" size="medium" class="center"}} {{attach file="shamrock.jpg" desc="image shamrock.jpg (9.8kB)" size="medium" class="center"}} 🦋 The shamrock, or 3 leaf clover, represents the holy trinity; the father, the son and the holy ghost..🦋 {{end elem="panel"}} {{end elem="col"}} {{col size="4"}} ""<button style="position: absolute; left: 0px; top: -5px;" onclick="location.href='https://saintjohnspotters.com/?EspagnolHistoireSemaine '">Click me to visit (🐦 La Primavera 🐦)</button>"" {{attach file="primavera.jpg" desc="image primavera.jpg (56.4kB)" size="medium" class="center"}} {{end elem="col"}} {{end elem="grid"}} {{end elem="accordion"}} ""<div style="background-color:GreenYellow;width:100px;border:10px solid black;padding:10px;"> <p>HTML background code is actually CSS!</p> </div>""
Sauver
Annuler
Thème
Protection anti-spam active
×
Apparence de la page Essai22
Thème
bootstrap3
margot
yeswiki
Squelette
fixed-1col.tpl.html
fixed-2cols-left.tpl.html
fixed-2cols-right.tpl.html
fixed-3cols.tpl.html
fullscreen-1col.tpl.html
fullscreen-2cols-left.tpl.html
fullscreen-2cols-right.tpl.html
fullscreen-3cols.tpl.html
fullwidth-1col.tpl.html
responsive-1col.tpl.html
responsive-2cols-left.tpl.html
responsive-2cols-right.tpl.html
responsive-3cols.tpl.html
Style
blue.css
gray.css
green.css
red.css
yellow.css
Paramètres avancés
Langue de la page
Català
English
Español, castellano
Français
Nederlands, Vlaams
Português
Choisir une page pour:
le menu horizontal
les raccourcis en haut à droite
l'entête (bandeau)
le pied de page
le menu vertical
Configuration graphique
×