Magazine High tech

Mettre en valeur la liste de vos partenaires avec jQuery et les sprites CSS

Publié le 02 octobre 2009 par Dave Lizotte

Nous allons voici dans cet article, comment vous pouvez facilement mettre en valeur la liste de vos partenaires / commanditaires à l'aide de jQuery et de quelques sprites css. Plusieurs sites utilisent ces techniques depuis quelque temps. On peut dire sans se tromper que c'est à la mode, mais que c'est aussi une bonne méthode d'attirer l'attention. En effet le but est de mettre en évidence un commanditaire lors du passage de la souris sur un de ses derniers par exemple sur le site de JamieWhinCup.

Mettre en valeur la liste de vos partenaires avec jQuery et les sprites CSS

HTML


{codecitation class="brush: xhtml; gutter: true;" width="650px"}
<div id="sponsors">
<span>Nos partenaires :</span>
<a href="http://www.pckult.net/" title="PcKULT.NET" class="mootools"></a>
<a href="http://www.pckult.net/" title="PcKULT.NET" class="drupal"></a>
<a href="http://www.pckult.net/" title="PcKULT.NET" class="technorati"></a>
<a href="http://www.pckult.net/" title="PcKULT.NET" class="jquery"></a>
<a href="http://www.pckult.net/" title="PcKULT.NET" class="miro"></a>
<a href="http://www.pckult.net/" title="PcKULT.NET" class="mozilla"></a>
<a href="http://www.pckult.net/" title="PcKULT.NET" class="nbc"></a>
<a href="http://www.pckult.net/" title="PcKULT.NET" class="twitter"></a>
<a href="http://www.pckult.net/" title="PcKULT.NET" class="wordpress"></a>
<div class="clearfix"></div>
</div>
{/codecitation}

Sprites CSS


Un sprite est simplement plusieurs images combinées en un seul fichier. Afin de faire afficher l'image désirée, il suffit de jouer avec la propriété background-position de votre CSS afin de définir exactement la position de l'image à afficher.
{codecitation class="brush: css; gutter: true;" width="650px"}
#sponsors {
width: 940px;
display: block;
clear: both;
border: 1px solid #eee;
padding: 10px 5px;
margin: 15px auto;
text-transform: uppercase;
font-weight: bold;
color: #666;
}
#sponsors span {
display: block;
float: left;
padding: 0 10px;
height: 20px;
line-height: 20px;
}
#sponsors a {
display: block;
float: left;
height: 20px;
padding: 0 10px;
}
a.mootools {background: url(images/mootools.jpg) no-repeat 0 0; width:85px;}
a.drupal {background: url(images/drupal.jpg) no-repeat 0 0; width:74px;}
a.technorati {background: url(images/Technorati.Jpg) no-repeat 0 0; width:107px;}
a.jquery {background: url(images/jquery.jpg) no-repeat 0 0; width:63px;}
a.miro {background: url(images/miro.jpg) no-repeat 0 0; width:23px;}
a.mozilla {background: url(images/mozilla.jpg) no-repeat 0 0; width:63px;}
a.nbc {background: url(images/nbc.jpg) no-repeat 0 0; width:75px;}
a.twitter {background: url(images/twitter.jpg) no-repeat 0 0; width:87px;}
a.wordpress {background: url(images/wordpress.jpg) no-repeat 0 0; width:20px;}
/*mouseover*/
a:hover.mootools,
a:hover.drupal,
a:hover.technorati,
a:hover.jquery,
a:hover.miro,
a:hover.mozilla,
a:hover.nbc,
a:hover.twitter,
a:hover.wordpress {background-position: 0 -20px;}
{/codecitation}
À l'état initial, nous voulons afficher le partenaire en gris pâle. Afin d'effectuer cela, nous allons positionner le background-position à "0,0" afin de faire afficher l'image grise. Lorsque nous passerons la souris sur un des partenaires, nous ferons déplacé la position à "0,-20px" afin de faire afficher l'image couleur.

jQuery

{codecitation class="brush: js; gutter: true;" width="650px"}
$(document).ready(function() {
$("#sponsors a").css('opacity', 0.5);
$("#sponsors a").mouseenter(function(){
$(this).css('background-position','0 -20px');    
$(this).fadeTo("slow", 1);
}).mouseleave(function(){
$(this).css('background-position','0 0px');    
$(this).fadeTo("slow", 0.5);
})
});
{/codecitation}

HTML

Pour finir, il vous suffit d'insérer votre script jQuery ainsi que la librairie jQuery dans votre page comme ceci :
{codecitation class="brush: xhtml; gutter: true;" width="650px"}
<head>
<script src="http://www.pckult.net/js/jquery-1.3.2.js" type="text/javascript"></script>
<script src="http://www.pckult.net/js/colo.js" type="text/javascript"></script></head>
</head>
{/codecitation}


Vous pourriez être intéressé par :

Retour à La Une de Logo Paperblog

Ces articles peuvent vous intéresser :

  • Menu annimé avec jQuery et CSS

    Menu annimé avec jQuery

    Fancy Navigation est une ressource permettant d’ajouter une barre de menus animées. L’auteur explique pas à pas comment implémenter le menu. Cette ressource... Lire la suite

    Par  Myrmex
    HIGH TECH, INFORMATIQUE, INTERNET, LOGICIELS
  • 14 Plugins infobulles Javascripts et CSS pour votre site web

    On voit de plus en plus de bulles d'informations (Tooltips) dans les interfaces web. Une façon d'aider la navigation à vos usager en leur facilitant la vie ou e... Lire la suite

    Par  Dave Lizotte
    HIGH TECH, INFORMATIQUE
  • Drop Downs Menu avec CSS & jQuery

    Drop Downs Menu avec jQuery

    DropDowns Menu, de SohTanaka, propose de changer un tantinet la présentation nos menus. En effet, avec cette solution, les sous menus sont arrangés et classés e... Lire la suite

    Par  Myrmex
    HIGH TECH, INFORMATIQUE, LOGICIELS
  • jsFiddle, débbugage Javascript, HTML et CSS

    jsFiddle, débbugage Javascript, HTML

    jsFiddle est un outil de débuggage en ligne qui vous permet de tester vos codes JavaScript, avec les frameworks MooTools, jQuery, Prototype, YUI, Glow et Dojo,... Lire la suite

    Par  Myrmex
    HIGH TECH, INFORMATIQUE, LOGICIELS
  • Horloge HTML CSS

    Horloge HTML

    La ressource d’aujourd’hui permet d’afficher une horloge numérique et ou analogique sur votre site web. L’originalité vient du fait qu’elle offre une animation... Lire la suite

    Par  Myrmex
    HIGH TECH, INFORMATIQUE, LOGICIELS
  • Free CSS Drop-Down Menu Framework

    Free Drop-Down Menu Framework

    Tout est dans le titre ! En effet, la ressource du jour se veut plus qu’un énième script affichant un menu déroulant. Avec Free CSS Drop-Down Menu Framework,... Lire la suite

    Par  Myrmex
    HIGH TECH, INFORMATIQUE, LOGICIELS
  • Dailymotion teste l’HTML 5 et le CSS 3 !

    Dailymotion teste l’HTML

    Dailymotion teste actuellement une nouvelle version de son site internet 100% libre, c’est à dire une version totalement fonctionnelle et sans Flash ! Comment... Lire la suite

    Par  Beewareblog
    CONSO, HIGH TECH

A propos de l’auteur


Dave Lizotte 57 partages Voir son profil
Voir son blog

l'auteur n'a pas encore renseigné son compte l'auteur n'a pas encore renseigné son compte l'auteur n'a pas encore renseigné son compte

Dossier Paperblog