MooTools Snippets

Einführung

Immer wieder komme ich an die Situation, dass ich ein wenig JavaScript schreiben muss, was ich leider nur leidlich beherrsche... Deshalb dachte ich mir, lege ich mal eine Sammlung von Snippets an, die ich so benutze und vielleicht auch andere Leute brauchen könnten bzw. eigene hinzufügen wollen.

Snippets

Bildwechsel bei Hover

window.addEvent('domready', function() {
    $$('.hover img').each(function(img) {
      var src = img.getProperty('src');
      var extension = src.substring(src.lastIndexOf('.'),src.length)
      img.addEvent('mouseenter', function() { img.setProperty('src',src.replace(extension,'-mo' + extension)); });
      img.addEvent('mouseleave', function() { img.setProperty('src',src); });
    });
});;

Dieses Snippet ersetzt die Bilder bei einem Mousehover. Es kann einfach per Hinzufügen der Klasse "hover" an das jeweilige Bildelement (oder Textelement) eingebunden werden. Das Bild wird dabei durch das gleichnamige Bild mit dem Zusatz "-mo" im gleichen Pfad ersetzt. Beispiel: tl_files/images/foobar.jpg => tl/files/images/foobar-mo.jpg

Beachtet man dies bei der Namensgebung, so sollte das problemlos funktionieren...

Quelle