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.
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}