Présentation
Une image vaut parfois mieux qu’un long sommaire pour communiquer l’envie de découvrir un article.
Un sommaire en image permet également d’introduire un mode de navigation différent au sein du site et de découvrir des articles que l’on n’aurait pas parcouru autrement.
Le résultat est une page sur laquelle s’affiche les logos des différents articles. Au survol de chaque logo, la rubrique, le titre et le descriptif s’affichent à côté du logo.
Le tout est très simple à mettre en oeuvre et sans javascript.
Exemple
Le mieux est de commencer par un exemple. Je l’ai mis en oeuvre sur mon site : Chez Tom
La boucle
La boucle donnée en exemple prend tous les articles dans un ordre aléatoire. A l’intérieur de cette boucle on a un lien et à l’intérieur de ce lien deux blocs DIV ayant les classes « som_img »(bloc contenant le logo) et « som_txt »(bloc contenant la description de l’article).
<BOUCLE_articles_hasard(ARTICLES){par hasard}>
<a href="#URL_ARTICLE" class="img">
<div class="som_img">#LOGO_ARTICLE</div>
<div class="som_txt">
<h4>
<BOUCLE_rubriquedelarticle(RUBRIQUES){id_secteur}{racine}>#TITRE</BOUCLE_rubriquedelarticle>
</h4>
<p><b>["(#TITRE|supprimer_numero)"]</b></p>
<p><i>[(#DESCRIPTIF)]</i></p>
</div>
</a>
</BOUCLE_articles_hasard>....
Les CSS
Le code CSS est lui même assez simple. On donne des dimensions identiques aux blocs som_txt et som_img. On indique que par défaut il faut afficher som_img et pas som_txt mais qu’au survol d’un lien contenant un bloc som_txt il faut afficher celui-ci.
.som_txt,.som_img{
float: left;
width: 150px;/* fonction de la taille des logos*/
height: 100px;
}
.som_img{display: block;}
/* par defaut ne pas afficher le bolc som_txt*/
a div.som_txt{display: none;}
/* afficher som_txt au survol */
a:hover div.som_txt{display: block;}
Aucune discussion
Ajouter un commentaire
Avant de faire part d’un problème sur un plugin X, merci de lire ce qui suit :
Merci d’avance pour les personnes qui vous aideront !
Par ailleurs, n’oubliez pas que les contributeurs et contributrices ont une vie en dehors de SPIP.
Suivre les commentaires : |