CodeS-SourceS
Rechercher un code, un tuto, une réponse

Déroulez/enroulez vos bannières google adsense

Novembre 2017

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&nbsp;ici&nbsp;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

Adresse d'origine
Publié par pjcleder.
Ce document intitulé «  Déroulez/enroulez vos bannières google adsense  » issu de CodeS-SourceS (codes-sources.commentcamarche.net) est mis à disposition sous les termes de la licence Creative Commons. Vous pouvez copier, modifier des copies de cette page, dans les conditions fixées par la licence, tant que cette note apparaît clairement.
Ajouter un commentaire

Commentaires

Donnez votre avis
Animation en boucle avec jquery
Gestion dynamique du z-index + divers effets en jquery