Image active automatique

Petit code ultrasimple

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 :

<a href="#URL_ARTICLE"><img
src="[(#LOGO_ARTICLE_RUBRIQUE
      |#URL_ARTICLE
      |filtrexxx
      |extraire_attribut{src})]"
border="0"
onMouseOver="this.src='[(#LOGO_ARTICLE_RUBRIQUE
      |#URL_ARTICLE
      |filtrexxx
      |filtreyyy
      |extraire_attribut{src})]'"
onMouseOut="this.src='[(#LOGO_ARTICLE_RUBRIQUE
      |#URL_ARTICLE
      |filtrexxx
      |extraire_attribut{src})]'"></a>

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

<a href="#URL_ARTICLE"><img src="[(#LOGO_ARTICLE_RUBRIQUE
      |#URL_ARTICLE
      |image_reduire{180,180}
      |extraire_attribut{src})]"
border="0"
onMouseOver="this.src='[(#LOGO_ARTICLE_RUBRIQUE
      |#URL_ARTICLE
      |image_reduire{180,180}
      |image_nb{330,330,330}
      |image_gamma{-30}
      |extraire_attribut{src})]'"
onMouseOut="this.src='[(#LOGO_ARTICLE_RUBRIQUE
      |#URL_ARTICLE
      |image_reduire{180,180}
      |extraire_attribut{src})]'"></a>

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 :

<?php
// Fonction qui rajoute un effet de survol sur les images dont l'image de survol n'est pas déjà définie.
// utilisation: Placer dans un squelette:
// [(#BALISE_IMAGE
//      ||des_filtres
//      |inserer_rollover{[(#AUTRE_BALISE_IMAGE||encore_des_filtres})]

function inserer_rollover($texte,$rollover) {
      $onmouseover=" onmouseover=\"this.src='".extraire_attribut($rollover, "src")."'\"";
      $onmouseout=" onmouseout=\"this.src='".extraire_attribut($texte, "src")."'\"";
      $texte = (preg_replace("/(<img.*?)(\/>)/i", "\$1$onmouseover$onmouseout \$2", $texte));
      return $texte;
}
?>

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

[(#BALISE_IMAGE
      ||des_filtres
      |inserer_rollover{[(#AUTRE_BALISE_IMAGE
            ||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).

Discussion

Aucune discussion

Ajouter un commentaire

Avant de faire part d’un problème sur un plugin X, merci de lire ce qui suit :

  • Désactiver tous les plugins que vous ne voulez pas tester afin de vous assurer que le bug vient bien du plugin X. Cela vous évitera d’écrire sur le forum d’une contribution qui n’est finalement pas en cause.
  • Cherchez et notez les numéros de version de tout ce qui est en place au moment du test :
    • version de SPIP, en bas de la partie privée
    • version du plugin testé et des éventuels plugins nécessités
    • version de PHP (exec=info en partie privée)
    • version de MySQL / SQLite
  • Si votre problème concerne la partie publique de votre site, donnez une URL où le bug est visible, pour que les gens puissent voir par eux-mêmes.
  • En cas de page blanche, merci d’activer l’affichage des erreurs, et d’indiquer ensuite l’erreur qui apparaît.

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.

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

Ce champ accepte les raccourcis SPIP {{gras}} {italique} -*liste [texte->url] <quote> <code> et le code HTML <q> <del> <ins>. Pour créer des paragraphes, laissez simplement des lignes vides.

Ajouter un document

Suivre les commentaires : RSS 2.0 | Atom