SPIP-Contrib

SPIP-Contrib

عربي | Deutsch | English | Español | français | italiano | Nederlands

288 Plugins, 197 contribs sur SPIP-Zone, 232 visiteurs en ce moment

Accueil > Navigation > Menus contextuels > Sommaire en images

Sommaire en images

10 mars 2005 – par Tom – commentaires

3 votes

Un sommaire tout en images utilisant les CSS et les logos des articles

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

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.

Dernière modification de cette page le 4 juillet 2007

Retour en haut de la page

Vos commentaires

  • Le 13 avril 2005 à 17:40, par ? En réponse à : > Sommaire en images

    Salut

    La chose qui me gène c’est qu’on peut pas mettre de div dans un a en xhtml, ceci étant dit il doit y avoir un moyen pour de faire autremant.

    • Le 13 avril 2005 à 19:54, par James En réponse à : > Sommaire en images

      La chose qui me gène c’est qu’on peut pas mettre de div dans un a en xhtml, ceci étant dit il doit y avoir un moyen pour de faire autrement.

      oui, un span, un display : block ; au bon endroit... si tu touches ta bille en xhtml tu peux t’autoriser les quelques minutes pour faire le code qui va bien et dans la foulée, la contrib’ ou la correction dans ce forum...

      Merci d’avance :-)

    Répondre à ce message

  • Le 15 mars 2005 à 18:02, par Eric02 En réponse à : > Sommaire en images

    Bonjour

    Joli et pratique, bravo et merci

    je voudrais adapter votre contrib, aux rubriques et non aux articles puis qu’elles soient dans l’ordre, le code devient donc :

    Au passage j’ai fait sauter une ligne car elle répétait le nom de la rubrique.

    Premier soucis, un logo et son texte sont depliés lors de l’ouverture de ma page sommaire, et ce n’est pas la premiere rubrique ?
    Deuxième , jai placé le tout dans un

    pour que cette contrib soit placé au dessus d’une image de fond qui elle est centré dans ma page, comment faire pour que le dépliment (au survol d’un logo se fasse sur la meme ligne et non sur la ligne du dessous ?
    • Le 15 mars 2005 à 20:19, par ? En réponse à : > > Sommaire en images

      Vous auriez une page ou on peut voir ce que ca donne car à première vue je n’ai pas assez d’éléments.

    • Le 16 mars 2005 à 08:53, par eric02 En réponse à : > > > Sommaire en images

      C’est en local pour l’instant

      Qu’aimeriez vous avoir comme autres infos ?

    Répondre à ce message

Répondre à cet article

Qui êtes-vous ?
  • [Se connecter]

Pour afficher votre trombine avec votre message, enregistrez-la d’abord sur gravatar.com (gratuit et indolore) et n’oubliez pas d’indiquer votre adresse e-mail ici.

Ajoutez votre commentaire ici Les choses à faire avant de poser une question (Prolégomènes aux rapports de bugs. )
Ajouter un document

Retour en haut de la page

Ça discute par ici

  • Serveur HTTP abstrait

    25 novembre 2013 – commentaires

    Un plugin-outil pour aider les développeurs à implémenter des API orientées REST, basées sur les méthodes HTTP (get, post, put, delete). Ce plugin a pour but premier de normaliser des URL que l’on pourra appeler pour manipuler les données du site. À (...)

  • Agenda Fullcalendar facile

    29 octobre 2016 – 33 commentaires

    Dans un précédent article, nous expliquions comment afficher un agenda Fullcalendar sur son site avec le plugin agenda. Cependant, ceci nécessite des manipulation de squelettes, ce qui n’est pas toujours évident lorsqu’on débute. La présente (...)

  • LinkCheck : vérificateur de liens

    13 février 2015 – 93 commentaires

    Ce plugin permet de chercher et tester l’ensemble des liens présents dans les objets. Vous pourrez donc en quelques clics connaître les liens brisés ou défectueux qui se sont immiscés dans le contenu de votre site SPIP. La vérification s’effectue en (...)

  • Acces Restreint 3.0

    11 décembre 2008 – 804 commentaires

    Le plugin accès restreint permet de définir et de gérer des zones de l’espace public en accès restreint. Cette version du plugin a été redévelopée et optimisée tout spécialement pour SPIP 2.0. Il en découle une amélioration des performances sur les gros (...)

  • Abonnements

    31 janvier 2015 – 18 commentaires

    Gérer des abonnements à des offres, et uniquement cela. Ce plugin a pour but de regrouper tout ce qui est commun aux différents types d’abonnements possibles (à des zones restreintes, à des contenus précis, à une version papier pourquoi pas (...)

Ça spipe par là