DEROULER UNE BANNIERE ADSENSE
- CONSIGNES
- Votre page doit être liée à la dernière version de jQuery (jquery-1.4.2.js)
- Si ce n’est pas le cas, vous pouvez télécharger ce fichier sur http://api.jquery.com/
Ensuite, placez le code suivant entre les balises <head></head> : <script type="text/javascript" src="jquery-1.4.2.js"></script>
Pour certains effets (Elasticité du mouvement), téléchargez également le fichier suivant
A l’adresse http://gsgd.co.uk/sandbox/jquery/easing/ à intégrer de la façon : <script type="text/javascript" src="jquery.easing.1.3.js"></script>
Collez ce code dans l’éditeur de votre choix et enregistrez le avec une extension de type .html ou .php à la racine de votre site.
<!doctype html>
<head>
<title>Redimensionner dynamiquement une bannière Google Adsense </title>
<style>
/*Style general de la page*/
body {font:14px verdana, sans-serif;background:#000000;color:#C0C0C0;font-weight:bold;overflow:hidden;}
/*Dimensions initiales et style de l’iframe contenant la bannière*/
#carre {position:absolute;left:20%;top:50%;width:90px;height:90px;cursor:pointer;}
/*Style de la div contenant le texte de presentation de la page*/
#page {font:14px verdana, sans-serif;color:#C0C0C0;font-weight:bold;position:absolute;left:100px;top:100px;background:#000000;}
/*Style du message apparaissant sur les événements liés au curseur de la souris*/
#mess {position:absolute;left:25%;top:45%;color:#FFF;display:none;}
</style>
<script type="text/javascript" src="jquery-1.4.2.js"></script>
<script type="text/javascript" src="jquery.easing.1.3.js"></script>
<script type="text/javascript">
//Permet d’éviter les conflits avec d’éventuels plugins
jQuery.noConflict();
//Préchargement du lien des événements liés à l’iframe
jQuery(document).ready(function() {
//Utilisation de la méthode bind() pour lier deux événements sur l’iframe “carre” en une seule fois
jQuery('#carre').bind({
//Survol de la souris
mouseover: function() {
//Affichage message intermittent
jQuery("#mess").fadeIn();
//Effacement progressif du message (six secondes)
jQuery("#mess").fadeOut(6000);
//Déroulement de la bannière
jQuery("#carre").animate({width: [728, 'easeOutBounce']}, 1000);
},
//Sortie du curseur
mouseout: function() {
jQuery("#mess").fadeIn();
jQuery("#mess").fadeOut(6000);
//Enroulement de la bannière
jQuery("#carre").animate({width: [90, 'easeOutBounce']}, 1000);
}
});
});
</script>
</head>
<body>
<div id="mess">Vous pouvez contribuez à l'évolution de ce site en cliquant sur la bannière !</div>
<div id="page" >
<font style="color:#FFFF00">REDIMENSIONNER DYNAMIQUEMENT UN BANNIERE GOOGLE ADSENSE<br>Survolez le carré et si ce code vous plait, cliquez dessus !!! </font><br>
Affichez le code source ou cliquez <a href="newsletter.php" style="color:#FFFF00;text-decoration:none">ici</a> pour recevoir le tutoriel par mail.<br><br>
</div>
<--iframe contenant la bannière. Collez votre code Adsense et uniquement cela dans une page nommée annonce.html-->
<iframe id="carre" src="annonce.html" frameborder="0" scrolling="no"></iframe>
</body></html>
Page de démonstration : http://www.patrickcleder.com/tuto_32.php