Décompressez l'archive à la racine de votre site et placer les fichiers dans les dossiers correspondants
Les images :
background.jpg bg_topnav.jpg HP_banner.jpg logo.gif page_flip.png subscribe.png topnav_stretch.jpg
Lier dans l'en-tête de votre page la bibliotèque Javascript jQuery
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
Puis insérer dans le corps de la page le code suivant
<div id="pageflip"> <a href="#"> <img src="page_flip.png" alt="" /> <span class="msg_block">Subscribe via RSS</span> </a> </div>
#pageflip { position: relative; } #pageflip img { width: 50px; height: 52px; z-index: 99; position: absolute; right: 0; top: 0; -ms-interpolation-mode: bicubic; } #pageflip .msg_block { width: 50px; height: 50px; position: absolute; z-index: 50; right: 0; top: 0; background: url(subscribe.png) no-repeat right top; text-indent: -9999px; }
$("#pageflip").hover(function() { //On hover... $("#pageflip img , .msg_block").stop() //Animate and expand the image and the msg_block (Width + height) .animate({ width: '307px', height: '319px' }, 500); } , function() { $("#pageflip img").stop() //On hover out, go back to original size 50x52 .animate({ width: '50px', height: '52px' }, 220); $(".msg_block").stop() //On hover out, go back to original size 50x50 .animate({ width: '50px', height: '50px' }, 200); //Note this one retracts a bit faster (to prevent glitching in IE) });