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
- || style="color: #CA5200;">#URL_ARTICLE
- |filtrexxx
- |extraire_attribut{src})]"
- border="0"
- onMouseOver="this.src='[(#LOGO_ARTICLE_RUBRIQUE
- || style="color: #CA5200;">#URL_ARTICLE
- |filtrexxx
- |filtreyyy
- |extraire_attribut{src})]'"
- onMouseOut="this.src='[(#LOGO_ARTICLE_RUBRIQUE
- || style="color: #CA5200;">#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
- || style="color: #CA5200;">#URL_ARTICLE
- |image_reduire{180,180}
- |extraire_attribut{src})]"
- border="0"
- onMouseOver="this.src='[(#LOGO_ARTICLE_RUBRIQUE
- || style="color: #CA5200;">#URL_ARTICLE
- |image_reduire{180,180}
- |image_nb{330,330,330}
- |image_gamma{-30}
- |extraire_attribut{src})]'"
- onMouseOut="this.src='[(#LOGO_ARTICLE_RUBRIQUE
- || style="color: #CA5200;">#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.
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")."'\"";
- return $texte;
- }
- ?>
Ensuite on l’utilise tout simplement dans les squelettes avec :
|
|inserer_rollover{[(#AUTRE_BALISE_IMAGE
|
A vous de voir quelle est la solution qui vous paraît la mieux adaptée à vos besoins.
Vos commentaires
# Le 3 décembre 2007 à 22:08, par echo
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 :
mes_fonctions.php) d’afficher l’image de survol si elle existe, le rollover/survol automatique sinon.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