SPIP-Contrib

SPIP-Contrib

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

289 Plugins, 197 contribs sur SPIP-Zone, 129 visiteurs en ce moment

Accueil > Affichage multimédia > Images > Images réactives > Changement de couleur au survol de logo > Survol de logo automatique N&B <> couleur

Survol de logo automatique N&B <> couleur

31 janvier 2007 – par touti – commentaire

5 votes

Voici un javascript généré par Spip pour gérer le survol des logos (roll-over) et créer en même temps les images de survol automatiquement, les 2 arguments sont ici logo N&B et logo en couleur

Préambule

Dans l’espace privé, SPIP vous permet d’affilier un logo à une rubrique ou à un article comme sur cette image, vous devez donc avoir au moins quelques logos sur votre site pour tester cette contrib.

Explications

Ce plugin nécessite jquery, pour rappel cette librairie javascript se trouve intégrée dans SPIP 1.9 SVN, mais elle est également présente dans plusieurs plugins comme par exemple crayons, et s’installe automatiquement dès l’activation de celui ci.

Renommer le code ci dessous en swapjs.html et mettez simplement le fichier dans votre dossier squelettes (créez ce dossier s’il n’existe pas).

A ce stade, vous pouvez déjà vérifiez que les logos sont bien calculés dans le javascript en vous rendant sur http://example.com/spip.php?page=swapjs

Récupérer dans le dossier dist de votre site le fichier inc-head.html et dupliquez inc-head.html dans votre dossier squelettes pour pouvoir y ajouter cette ligne :
<script src="#URL_PAGE{swapjs}" type="text/javascript"></script>

Insérez des class sur les balises img des logos là ou vous souhaitez avoir un rollover class="overart#ID_RUBRIQUE#EXPOSE" ou class="overrub#ID_ARTICLE#EXPOSE"

Voici un exemple d’une insertion de logo dans un squelette qui ajoute la condition #EXPOSE empêchant ainsi le survol du logo si la rubrique est active

Conclusion

Que cela ne vous empêche pas de penser au survol de logo en css qui ne nécessite pas javascript, voir sur alsacréations

Il y a d’autres filtres images que « noir & blanc » que vous retrouverez ici
http://www.spip.net/fr_article3327.html

Le script swapit provient de
http://rip747.wordpress.com/2006/12...

Dernière modification de cette page le 9 avril 2007

Retour en haut de la page

Vos commentaires

  • Le 8 décembre 2014 à 01:32, par DD En réponse à : Survol de logo automatique N&B <> couleur

    Bonjour,

    Je n’arrive pas à avoir le survol noir et blanc.
    J’ai bien dans le code généré
    <img class="overart#ID_ARTICLE#EXPOSE" alt="" src="local/cache-gd2/71b4931eca8bfc68c43036f518a91485.jpg" height="200" width="150">

    mais rien ne se passe au survol

    dans /spip.php ?page=swapjs
    j’ai

    $(".overart82").swapit("local/cache-vignettes/L150xH100/arton82-00c9e.jpg",
    "local/cache-gd2/e950c4fccbccc631d40bfc60ff938eb2.jpg");

    Je ne comprends pas le H100 étant donné que mes logos font 200 de hauteur. Ni pourquoi les images en cache ne sont pas les mêmes (j’ai vidé le cahe)

    Est-ce que ce code JS est compatible avec SPIP3 et SPIPr ?

    Merci
    dd

    Répondre à ce message

Répondre à cet article

Qui êtes-vous ?

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

  • Hyperspace : squelette responsive

    8 mars 2016 – 45 commentaires

    Description Ce squelette distribué en plugin est un portage pour SPIP du thème responsive « Hyperspace », proposé sur le site . Voir la démo originale : Sites utilisant le plugin : C’est une base de départ pour l’intégration d’un site simple de (...)

  • Escal-V3 et Escal-V4

    16 février 2012 – 320 commentaires

    Un jeu de squelettes proposant un affichage en 2 ou 3 colonnes avec un large choix de noisettes à insérer ou pas, fortement paramétrable depuis l’espace privé. Présentation A l’instar de sa petite soeur plugin Escal-V2 dont elle reprend toutes les (...)

  • Planning simple

    9 septembre 2015 – commentaires

    Ce plugin permet de créer et imprimer un emploi du temps de façon simple. Il dispose de deux méthodes, l’une est d’écrire une liste des évènements dans le corps de l’article, l’autre requiert le plugin agenda. Le plugin planning simple permet (...)

  • Réservation d’événements

    16 mars 2015 – 348 commentaires

    Ce plugin permet d’offrir aux visiteurs de s’inscrire pour un évènement du plugin Agenda et de gérer les réservations enregistrées. Installation Le plugin s’installe comme n’importe quel plugin. il nécessite : Agenda API de vérification Facteur (...)

  • Enluminures typographiques V3

    25 juillet 2009 – 201 commentaires

    Les Enluminures typographiques V3 permettent d’ajouter au Porte plume les raccourcis typographiques présents dans le Plugin Barre Typographique Enluminée. C’est une extension du PortePlume. Pour la documentation d’usage, se reporter à celle du (...)