Paris, photo, humeurs, un peu de HTML/CSS pour faire sérieux. Feinte innocence et vraie naïveté (ou vice-versa). Encore un blog qui agite ses petits bras en couinant "Viens me lire !"
L'idée est de compléter le dispositif précédent en ajoutant deux boutons de commande au billet
. Ces boutons se bornent à donner chacun une classe différente au div formant le billet
. L'aspect ouvert ou fermé du billet, l'affichage du bon bouton de commande… tout se règlera ensuite par du CSS.
Comme le seul JavaScript requis est un traitement d'événement (à savoir cliquer sur un bouton) cette solution est utilisable sur tout blog OB.
Il grossit un peu :
<div id="billet" class="ouvert"> <a href="#nogo" title="Fermeture du billet" class="fermeture" onclick="document.getElementById('billet').className='ferme';">[-]</a> <a href="#nogo" title="Ouverture du billet" class="ouverture" onclick="document.getElementById('billet').className='ouvert';">[+]</a> <div class="contenu"> Le texte de votre billet </div> </div>
Le rôle de chaque lien est assez clair, je pense : lorsqu'on clique sur ce lien (onclick) trouver (getElementById) le billet
dans la page et lui donner une certaine classe (className=...).
Ceci vous semble-t-il logique ?
la grande, on voit le contenu et le bouton de fermeture, on masque le bouton d'ouverture ;
petite(je me contenterai ici d'un rectangle de couleur), on cache le contenu et le bouton de fermeture, on affiche le bouton d'ouverture.
Traduisons en CSS :
/* ce qui est vrai pour le billet ouvert comme fermé*/ #billet {position:absolute; left:20%; top:50px} /* aspect du billet ouvert (=reprise de la version précédente) */ .ouvert {background-image:url(http:gnagnagna/billet.png); width:218px;height:150px} /* aspect du billet fermé */ .ferme {background:#ffffb7; border:1px solid gray; width:3em;height:2em} /* aspect du contenu (=reprise de la version précédente)*/ .contenu {padding:20px} /* emplacement des boutons de commande */ .ouverture, .fermeture {position:absolute; right:2px; top:2px} /* masquer/afficher les composants du billet selon son état */ .ouvert .ouverture, .ferme .fermeture, .ferme .contenu {display:none}
C'est tout ? Oui.
Quelques remarques de détail :
fermése réduit à une couleur de fond et une bordure. Vous pouvez fabriquer une petite image si vous préférez (là aussi, je l'ai fait sur ce blog).
Quelques remarques de principe :
billetlui-même. Vous pouvez donc créer autant de billets que vous le désirez, pourvu que chacun porte un identifiant différent. Je vous laisse le soin de retoucher les deux petits bouts de JS et de compléter le CSS ;
Un peu de pensée profonde, pour conclure. Le principe technique est, finalement, très simple :
C'est simple et très général, vous avez désormais de quoi créer n'importe quel gadget cliquable qui vous fait envie : pas seulement afficher ou masquer quelque chose, mais changer une image de fond, une police de caractères, voire un emplacement dans la page. Pour la petite histoire : c'est exactement le principe employé ici pour faire des "Lire la suite" ou pour donner leur pleine largeur à des photos très larges.
Autre conséquence agréable : puisque les deux petits bouts de JS n'interviennent pas directement sur l'aspect de leur cible mais se contentent d'en changer la classe, personnaliser ce gadget revient à personnaliser des classes en CSS. Autrement dit vous n'avez pas besoin de connaître les finesses de JavaScript (puisque je vous fournis le code nécessaire) mais seulement de savoir triturer du CSS. Sympathique, non ?