SPIP-Contrib

SPIP-Contrib

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

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

Accueil > Affichage multimédia > Images > Images réactives > Image active automatique

Image active automatique

Petit code ultrasimple

1er décembre 2007 – par Joss – commentaires

6 votes

Grace aux filtres graphiques de SPIP 1.9.x, il est très simple de laisser SPIP calculer une image réactive.

Il suffit d’insérer ce code HTML dans la boucle de votre choix. Pour le logo d’un article :

  1. <a href="#URL_ARTICLE"><img
  2. src="[(#LOGO_ARTICLE_RUBRIQUE
  3. |#URL_ARTICLE
  4. |filtrexxx
  5. |extraire_attribut{src})]"
  6. border="0"
  7. onMouseOver="this.src='[(#LOGO_ARTICLE_RUBRIQUE
  8. |#URL_ARTICLE
  9. |filtrexxx
  10. |filtreyyy
  11. |extraire_attribut{src})]'"
  12. onMouseOut="this.src='[(#LOGO_ARTICLE_RUBRIQUE
  13. |#URL_ARTICLE
  14. |filtrexxx
  15. |extraire_attribut{src})]'"></a>

Télécharger

Dans le cas logo / logo noir et blanc voilà ce que ça peut donner :

  1. <a href="#URL_ARTICLE"><img src="[(#LOGO_ARTICLE_RUBRIQUE
  2. |#URL_ARTICLE
  3. |image_reduire{180,180}
  4. |extraire_attribut{src})]"
  5. border="0"
  6. onMouseOver="this.src='[(#LOGO_ARTICLE_RUBRIQUE
  7. |#URL_ARTICLE
  8. |image_reduire{180,180}
  9. |image_nb{330,330,330}
  10. |image_gamma{-30}
  11. |extraire_attribut{src})]'"
  12. onMouseOut="this.src='[(#LOGO_ARTICLE_RUBRIQUE
  13. |#URL_ARTICLE
  14. |image_reduire{180,180}
  15. |extraire_attribut{src})]'"></a>

Télécharger

Il existe beaucoup d’autres filtres à l’adresse suivante http://www.spip.net/fr_article3327.html qui peuvent être combinés les uns aux autres.

Il faut avoir inséré un logo dans son article ou sa rubrique au préalable pour cet exemple. Cependant rien ne vous empêche d’adapter ce code à vos documents joints.

Un exemple sur le site du Volant Opale Club avec le filtre sépia. Un autre exemple en SPIP 3 sur le site ci-après http://audeladeleau.free.fr/

Beurt m’a suggéré une approche alternative en utilisant le fichier mes_fonctions.php [1], il suffit d’y ajouter ces lignes :

  1. <?php
  2. // Fonction qui rajoute un effet de survol sur les images dont l'image de survol n'est pas déjà définie.
  3. // utilisation: Placer dans un squelette:
  4. // [(#BALISE_IMAGE
  5. // ||des_filtres
  6. // |inserer_rollover{[(#AUTRE_BALISE_IMAGE||encore_des_filtres})]
  7.  
  8. function inserer_rollover($texte,$rollover) {
  9. $onmouseover=" onmouseover=\"this.src='".extraire_attribut($rollover, "src")."'\"";
  10. $onmouseout=" onmouseout=\"this.src='".extraire_attribut($texte, "src")."'\"";
  11. $texte = (preg_replace("/(<img.*?)(\/>)/i", "\$1$onmouseover$onmouseout \$2", $texte));
  12. return $texte;
  13. }
  14. ?>

Télécharger

Ensuite on l’utilise tout simplement dans les squelettes avec :

  1. [(#BALISE_IMAGE
  2. ||des_filtres
  3. |inserer_rollover{[(#AUTRE_BALISE_IMAGE
  4. ||encore_des_filtres})]

A vous de voir quelle est la solution qui vous paraît la mieux adaptée à vos besoins.

Notes

[1voir la doc de SPIP sur le fichier mes_fonctions.php :les filtres de SPIP (voir en bas de page).

Dernière modification de cette page le 19 mars 2013

Retour en haut de la page

Vos commentaires

  • Le 3 décembre 2007 à 22:08, par touti En réponse à : Image active automatique

    Avec jQuery, on peut aussi créer des rollovers non intrusifs.

    je me permets de recroiser avec ce qui est déjà existant, ce tuto permet également d’utiliser les filtres images que l’on veut.

    http://www.spip-contrib.net/Survol-de-logo-automatique-N-B

    Rollovers visibles sur le menu du haut de derouault.net

    • Le 5 décembre 2007 à 11:57, par Beurt En réponse à : Image active automatique

      Les gros avantages de la contrib décrite ici sur celle que tu propose utilisant jquery sont :

      1. Mise en œuvre ultra simple
      2. Possibilité d’utiliser des filtres différents selon les endroits dans le squelettes.
      3. permet (pour le code à insérer dans mes_fonctions.php) d’afficher l’image de survol si elle existe, le rollover/survol automatique sinon.
      1. [(#LOGO_NORMAL
      2. ||des filtres si besoin
      3. |inserer_rollover{[(#LOGO_SURVOL
      4. ||des filtres éventuellement
      5. |sinon{[(#LOGO_NORMAL
      6. ||des filtres pour rendre le logo normal survolé)]})]})]

      Télécharger

      Je l’utilise surtout pour la seconde et la troisième possibilité : certains logos d’articles ont un rollover/survol avec certains filtres et d’autres logos ont des filtres différents en fonction du types d’article. Enfin certains d’entre-eux ont déjà une image de survol choisie par les rédacteurs.

      La contrib’ Survol de logo automatique N&B <> couleur propose, il me semble, un rollover unifié pour toutes les images.

      Je ne précise pas ça pour critiquer, mais pour que les Spipeurs fassent leur choix entre les deux contrib’ en connaissance de cause :

      -  Survol de logo automatique N&B <> couleur pour un rollover non intrusif (pas de rajouts concernant le rollover dans les balises <img>).
      -  Cette contrb’-ci pour ceux qui veulent avoir différents type rollovers dans leurs squelettes (avec des effets différents selon les images).

    • Le 24 juillet 2010 à 17:47, par camaleon En réponse à : Image active automatique

      Merci pour cette contrib très intéressante

    Répondre à ce message

  • Le 11 décembre 2007 à 11:13, par aziz En réponse à : Image active automatique

    pas besoin de cree un filtre car j’ai fait ca via css( propriete opacity :) exp :
    a img

    border : 0 ;
    opacity : 0.7 ;

    a img:hover
    opacity : 1 ;

    par agence communication marrakech.

    • Le 11 décembre 2007 à 11:37, par Joss2 En réponse à : Image active automatique

      En fait le but de cette « image active automatique » est justement d’utiliser les filtres graphiques de SPIP, afin de définir une charte graphique, quelque soit le logo/l’image que le rédacteur choisisse d’intégrer à son article/rubrique.

    • Le 11 décembre 2007 à 11:40, par Beurt En réponse à : Image active automatique

      Je crois que l’idée, ici, c’est d’utiliser les filtres image de SPIP pour obtenir un logo de survol. Les propriétés CSS sont loin d’être aussi riches que les filtres image... (par exemple, j’utilise un léger flou quand les images sont survolées).

    • Le 11 décembre 2007 à 11:45, par Beurt En réponse à : Image active automatique

      Oups ! On dirait que Joss a été plus rapide !

    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

  • Aveline v2

    9 novembre 2012 – 86 commentaires

    Aveline est une collection de noisettes hautement paramétrables, compatibles avec les thèmes Z et à inclure dans vos pages avec le noiZetier. Compatibilité Cette version 2 du plugin Aveline s’utilise, sous SPIP 3, avec la version 2 du noizetier, (...)

  • Calendrier Mini 2.0

    19 mai 2012 – 244 commentaires

    Ce plugin ajoute la balise #CALENDRIER_MINI qui insère un petit widget de navigation par mois dans les dates des évènements. Fonctionnement du mini calendrier Le mini calendrier présente un mois à la fois. Les jours du mois comportant des (...)

  • Le Squelette Zpip

    11 novembre 2009 – 363 commentaires

    Ce squelette n’est plus maintenu, il est remplacé par SPIPr-dist Zpip est un modèle de squelette réutilisable, modulaire et disposant d’une galerie de thèmes. Ce modèle de squelette rend l’installation d’un site avec son thème plus facile, et la (...)

  • Galleria (fr)

    16 novembre 2011 – 183 commentaires

    Une galerie d’image qui utilise la librairie javascript Galleria. Description Ce plugin vous permet d’ajouter des galeries d’images à vos articles. La galerie créée utilise la librairie javascript Galleria. Le plugin propose un modèle nommé (...)

  • PortePlume Equation

    10 juin 2012 – commentaires

    Version pour spip 2.1 et 3.0 du plugin Spip Equation Ce plugin rend plus simple l’intégration dans un texte de formules mathématiques et d’équations. Dans ce but il ajoute un groupe de boutons dans la barre typographique qui permet d’intégrer les (...)