Le but est d'utiliser le composant présenté ici : forum.mootools.net : YOUR SCRIPTS » MOOGNIFY - AN ENLARGE IMAGE CLASS
Remarque : Une bonne nouvelle
Faire un fichier lié au composant et mootools :
Tester le code suivant :
<!-- Charge la libraire mootools (+element +window)--> <script src="../javascript/mootools-release-1.11.element_window_fx.js" type="text/javascript" charset="utf-8"></script> <!-- Le composant Moognify http://gravita.se/mootoolsEnglish.php --> <script src="MoognifyFor1.1.js" type="text/javascript" charset="utf-8"></script> <style type="text/css" media="screen"> .zoom { width:50px; height:30px; } </style> ... <p><img src="image.jpg" class="zoom" alt=""onclick='new Moognify(this)' /></p>
Le but : enlever les gestionnaires d'événement sur les balises. Le remplacer la classe 'zoom'
<p><img src="image1.jpg" class="zoom" alt="" /></p> <p><img src="image2.jpg" class="zoom" alt="" /></p>
Dans un fichier JavaScript, écrire le code suivant (à compléter) :
// Quand la page est chargée (domready) // Pour toutes les balises ayant la class : 'zoom' // quand on clique sur l'image // Ajouter l'effet Moognify
Remarque :
.zoom
Le but est de vous montrer comment écrire du code sous forme d'un composant.
Écrire le code JavaScript réalisant la tâche suivante :
survole
changer la couleur (#FF0) de fond des éléments de classe couleur_fond
.survole
enlever la couleur de fond (transparent)Tester avec le code suivant HTML:
<p id="survole">avant</p> <p> Lorem <span class="couleur_fond">ipsum</span> dolor sit amet, consectetur,<br ///> sed do eiusmod <span class="couleur_fond">tempor</span> incididunt ut. </p>
Dans un fichiers JavaScript, écrire le code suivant (à compléter) :
window.addEvent('domready', function() { var survole = ____________; var elements = _______________; survole.addEvent('mouseenter',function() { _________________________________________ }); survole.addEvent('mouseleave',function() { __________________________________________ }); });
Modifier votre code de la façon suivante :
// fonction ajoutant l'effet à l'élément d'id et aux éléments correspondant au sélecteur : function effet_survole (id,selecteur) { } window.addEvent('domready', function() { // exécution de la fonction effet_survole('survole','.couleur_fond'); });
Le but est de changer la fonction en Class pour pouvoir ajouter des fonctionnalités.
Modifier votre code de la façon suivante :
<code javascript> EffetSurvole = new Class({ initialize:function (id,selecteur) { ... } }); window.addEvent('domready', function() { // création de l'effet new EffetSurvole('survole','.couleur_fond'); });
Vous pouvez ainsi tirer parti de Option pour fixer la couleur par exemple :
EffetSurvole = new Class({ options:{color:'#FF0'}, initialize:function (id,selecteur,options) { this.setOptions(options); .... } }); EffetSurvole.implement(new Options); window.addEvent('domready', function() { // création de l'effet new EffetSurvole('survole','.couleur_fond'); });
Remarque : si vous avez le message this.options has no properties
.
Essayer :
var color = this.options.color; .... elements.setStyle('background-color',color);
Mais surtout regarder avec FireBug, ce qu'est this
dans un gestionnaire d'événement.