Le but est d'utiliser le composant présenté ici : forum.mootools.net : YOUR SCRIPTS » MOOGNIFY - AN ENLARGE IMAGE CLASS

• Télécharger :
  • Le composant
  • La version correspondante de la librairie

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 :

• Tester le sélecteur ($$) permettant de trouver les éléments ayant la class .zoom
• Vous pourrez utiliser forEach pour appliquer un traitement à tous.

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 :

• Quand on survole l'élément d'id survole changer la couleur (#FF0) de fond des éléments de classe couleur_fond .
• Quand le curseur quitte l'élément d'id 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.

• Si vous avez fini le slider, le mettre sous forme de composant
  • ex. : Accordion pour les arguments et autres fonctions possibles