Déroulez/enroulez vos bannières google adsense
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>
- HTML, jQuery, CSS
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>
Vous pouvez contribuez à l'évolution de ce site en cliquant sur la bannière !
REDIMENSIONNER DYNAMIQUEMENT UN BANNIERE GOOGLE ADSENSE
Survolez le carré et si ce code vous plait, cliquez dessus !!!
Affichez le code source ou cliquez ici pour recevoir le tutoriel par mail.
<--iframe contenant la bannière. Collez votre code Adsense et uniquement cela dans une page nommée annonce.html-->
</html>
Page de démonstration : http://www.patrickcleder.com/tuto_32.php
- Déroulez/enroulez vos bannières google adsense
- Google mpas - Forum PHP
- Pile ou face google - Forum Visual Basic 6
- Api google maps - Conseils pratiques -PHP
- Google length ✓ - Forum C# / .NET
- Générateur de bannières publicitaires - Forum Javascript / DHTML