https://de.contaowiki.org/index.php?action=history&feed=atom&title=MooTools_SnippetsMooTools Snippets - Versionsgeschichte2026-04-30T17:03:17ZVersionsgeschichte dieser Seite in Contao Community DocumentationMediaWiki 1.22.6https://de.contaowiki.org/index.php?title=MooTools_Snippets&diff=5531&oldid=prevFlex: Eine Sammlung von MooTools Code Snippets.2012-11-17T11:18:14Z<p>Eine Sammlung von MooTools Code Snippets.</p>
<p><b>Neue Seite</b></p><div>= MooTools Snippets =<br />
[[Category:Dev HOWTOS]]<br />
[[Category:Dev Snippets]]<br />
== Einführung ==<br />
<br />
Immer wieder komme ich an die Situation, dass ich ein wenig JavaScript schreiben muss, was ich leider nur leidlich beherrsche...<br />
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.<br />
<br />
<br />
== Snippets ==<br />
<br />
=== Bildwechsel bei Hover ===<br />
<source lang="javascript"><br />
window.addEvent('domready', function() {<br />
$$('.hover img').each(function(img) {<br />
var src = img.getProperty('src');<br />
var extension = src.substring(src.lastIndexOf('.'),src.length)<br />
img.addEvent('mouseenter', function() { img.setProperty('src',src.replace(extension,'-mo' + extension)); });<br />
img.addEvent('mouseleave', function() { img.setProperty('src',src); });<br />
});<br />
});;<br />
</source><br />
<br />
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.<br />
Das Bild wird dabei durch das gleichnamige Bild mit dem Zusatz "-mo" im gleichen Pfad ersetzt. <br />
Beispiel:<br />
tl_files/images/foobar.jpg => tl/files/images/foobar-mo.jpg<br />
<br />
Beachtet man dies bei der Namensgebung, so sollte das problemlos funktionieren...<br />
<br />
[http://davidwalsh.name/mootools-image-mouseovers Quelle]</div>Flex