Lire la suite...

Projet  :
Tableau des randos
5 colonnes: lieu de départ, nom de la rando, km, carte papier (prévoir lien) fichier GPX (prévoir lien)
Tri alphabétique ↓↑sur chaque colonne

Cette page est récupérée en l'état d'un "brouillon" pour test de faisabilité suite à une demande forum.
Le tableau ci dessous présente le principe, il mériterait un peu de css.

Lire la suite...

⛱

Le code pour réaliser cette simple horloge :

partie HTML

<p>&nbsp;</p>
<div id="monHorloge" class="decopendule">&nbsp;</div>

partie JavaScript

<script>// <![CDATA[
// stormalo 20220911/EB
setInterval("infodate()",1000);
function infodate() {
var monHorloge = $('monHorloge');
var hhmmss = new Date();
monHorloge.innerHTML = hhmmss.toLocaleTimeString();
}
// ]]></script>

partie CSS (si placé dans le thème il faut supprimer la première et la dernière ligne)

<style><!--
.decopendule {
  font-weight: 400;   /*si valeur 700 = gras */
  width: 120px;       /* largeur */
  font-size: 24px;    /* taille des chiffres */
  color: yellow;      /* couleur des chiffres */
  padding: 5px;       /* espace entre les chiffre et les bords */
  background-color: blue;  /* couleur du fond */
 }
--></style>

Buts recherchés :
1) A partir du texte, atteindre une note en bas de page qui apporte une précision ou un complément, et revenir dans le texte pour continuer la lecture.

Parfois la curiosité aidant, pouvoir à partir d'une de ces notes, atteindre le texte à l'endroit qui a justifié l'existence de la note^x.

2) Remplacer les infos-bulles pour l'usage des écrans tactiles

Lire la suite...

ex p3014201

... à la base c'est une idée de pourquoipas732     ...interprétée ici avec des dimensions et des identifiants plus explicites...

Code de cette animation html/css (pas de JavaScript):

Url fond jaune image de fond (en 2021 c'était celle-ci➚)
Url fond bleu image volet de gauche
Url fond vert image volet de droite

HTML

 <p>&nbsp;</p>
<div style="width: 540px; height: 300px; margin: 40px auto 40px auto; border: 5px solid #9b7bba; background: url('http://ekladata.com/xkDCol5B5zBVaAHaoasHEl_0SP4.jpg'); background-size: 540px 300px;">
<p id="fenetre">&nbsp;</p>
<p id="voletG">&nbsp;</p>
<p id="voletD">&nbsp;</p>
</div>
<p>...</p>

CSS

<style><!--
#fenetre{position:absolute; z-index:2; width:540px; height:300px;}

#voletG{position:absolute; z-index:1; width:270px; height:300px; background:url('http://ekladata.com/Z4UeFNiA4fPH9_2KNNCem85nSlE/VoletG.jpg'); background-size:540px 300px; background-position:center left; transform-origin: center left;  transform:translate(0px,0px) rotatey(0deg) ; transition:all 0.5s linear;}

#voletD{position:absolute; z-index:1; width:270px; height:300px; background:url('http://ekladata.com/jEuRxJU7z6ck9tI8x8hOksC-sYE/VoletD.jpg'); background-size:540px 300px; background-position:center right; transform-origin: center right; transform:translate(270px,0px) rotatey(0deg); transition:all 0.5s linear 0.5s;}

#fenetre:hover ~ #voletG{transform:translate(0px,0px) perspective(2400px) rotatey(-97deg);}
#fenetre:hover ~ #voletD{transform:translate(270px,0px) perspective(2400px) rotatey(98deg);}
--></style>
<p>&nbsp;</p>