jQuery Favicon Notifier – Plugin jQuery – Modifiez vos favicons à la volée via jQuery

Après un petit temps d’absence je reviens avec un petit billet sur un plugin jQuery que j’ai trouvé assez amusant, et je dois avouer que je n’avais jamais vraiment pensé à cela. En effet, via jQuery Favicon Notifier, vous allez pouvoir changer l’aspect de vos favicons de sites à la volée, sans recharger la page, et vous allez même pouvoir y ajouter des nombres et chiffres accolés, idéal pour ajouter un petit gadget indiquant un nombre de messages non lus par exemple. Bon, petit bémol, ça n’a pas l’air de fonctionner sous IE. Mais ça a le mérite d’exister et j’aime bien les petites idées comme ça :)

jquery-favicon-notifier-plugin-js-jquery

Par contre, peu de documentation, mais comme le suggère l’auteur, il suffit de regarder le code source, ça parle tout seul, pour peu qu’on ai des notions javascript :)

On peut donc voir l’intégration des librairies :

<script type="text/javascript" src="jquery-1.6.2.min.js"></script>
<script type="text/javascript" src="jquery.faviconNotify.js"></script>

et le fonctionnement des boutons :

    <button onclick="$.faviconNotify('/favicon.ico', Math.ceil(Math.random()*100));">Random number (keep clicking!)</button>
    <button onclick="$.faviconNotify('/favicon.ico', 100);">More than 99</button>
    <button onclick="$.faviconNotify('/favicon.ico', 0);">Zero</button>
    <button onclick="$.faviconNotify('/favicon.ico');">Reset the icon</button>
    <button onclick="$.faviconNotify('/favicon.ico', 12, 'tr');">Top Right</button>

    <button onclick="$.faviconNotify('/favicon.ico', 56, 'tl');">Top Left</button>
    <button onclick="$.faviconNotify('/favicon.ico', 45, 'bl');">Bottom Left</button>
    <button onclick="$.faviconNotify('/favicon.ico', 34, 'br');">Bottom Right</button>
    <button onclick="$.faviconNotify('/favicon.ico', 34, 'br', '#FFFFFF', '#000000');">Custom colors (inverted)</button>
    <button onclick="$.faviconNotify('/favicon.ico', 67, 'br', '#123456', '#ABCDEF');">Custom colors</button>
    <button onclick="$.faviconNotify('/favicon.ico', 78, 'br', '#000000', '#FFAAAA');">Custom colors</button>

    <button onclick="$.faviconNotify('flask.png', 4, 'tr', '#FFFFFF', '#000000');">Different icon (flask, png)</button>
    <button onclick="$.faviconNotify('pill.png', 9, 'br', '#FFFFFF', '#000000');">Different icon (pill, png)</button>

Pour découvrir le plugin jQuery Favicon Notifier, ça se passe par là : http://oodavid.com/jQueryFaviconNotifier

Articles qui peuvent vous intéresser :

Comments
  1. Télécharger Max

Leave a Reply

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *


*