Fading Opacity mit Mootools

mootools
…oder auf Deutsch gesagt: Die Deckkraft von Bildern mit einem schönen Übergang verändern.

Sicherlich ist es möglich die Deckkraft einfach per CSS zu verändern und bei „:hover“ dann die volle Deckkraft zu nutzen. Ich erkläre jedoch den Vorgang in zusammenarbeit mit dem JavaScript Framework Mootools, welches viele schöne Effekte mit sich bringt und somit ein fließender Übergang zwischen den beiden Stufen der Deckkraft möglich ist.

Als erstes benötigen wird dafür die Javascript Dateien von Mootools, welche es hier zum Download gibt.

Die Datei wird in den Quelltext eingebunden. Dazu wird unter „src“ der Pfad zur .js Datei angegeben.

<script src="js/mootools-1.2-core.js" type="text/javascript">

Anschließend werden die beiden Werte für die Deckkraft angegeben:

<script type="text/javascript">
    var fade_in = 1;
    var fade_out = 0.5;
</script>
<body onload="$$('img').fade(0.5);">

Wenn die Grafik mit der Maus markiert wird soll Sie voll sichtbar sein, deswegen der Wert 1 bei fade_in. Wenn die Maus die Grafik wieder verlässt soll sie wieder leicht die Deckkraft verlieren, wofür der Wert 0.5 bei fade_out steht

Im „body“ wird dem Browser mitgeteilt das er beim laden der Seite alle Bilder eine Deckkraft von 0.5 geben soll. Sollten nicht alle Bilder diese Deckkraft bekommen, wird anstatt „img“ die für die Bilder genutzte CSS Klasse oder ID genutzt.

Der dritte und letzte Schritt wendet die Funktion auf die Bilder an. Dafür werden die Javascript Events onmouseover und unmouseout genutzt.

<img title="Chukki.de Logo" onmouseover="this.fade(fade_in);" onmouseout="this.fade(fade_out);" src="chukki.jpg" alt="Chukki" />

Die beiden Events lösen jeweils eine Funktion aus. In diesem Fall ist es „this.fade„. Beim MouseOver wird, wie oben beschrieben, der Wert von „fade_in“ genutzt und beim MouseOut der Wert von „fade_out„. Durch die angabe von „this“ vor dem „fade bezieht sich die Funktion nur auf sich selbst, also in diesem Fall das Bild.

So entsteht ziemlich schnell ein schöner Effekt für Bilder, welche nicht durchgehend angezeigt werden sollen oder als Link fungieren sollen.

// Update – Ein weiterer Vorschlag von Johannes, welcher den JavaScript Code vom HTML trennt:

window.addEvent(’domready’, function(){<br />
    $$(’img’).each(function(img){<br />
         img.set(’opacity’, 0.5).addEvents({<br />
            ‘mouseover’: function(){<br />
                 this.fade(1);<br />
             },<br />
            ‘mouseout’: function(){<br />
                 this.fade(0.5);<br />
             }<br />
        });<br />
    });<br />
});

Andre Teich

arbeitet als Webentwickler und Webdesigner bei der Firma Tintometer in Dortmund. Die Fachgebiete sind die Webentwicklung mit PHP, JavaScript, MySQL, CSS und die Designarbeiten mit der Adobe Creative Suite.

9 Kommentare zu "Fading Opacity mit Mootools"

Johannes 22. Jan 2009 um 09:44 Uhr

Schön, dass Du hier Mootools promotest, jedoch solltest Du Javascript und HTML strikt trennen und sog. „Unobtrusive JavaScript“ anwenden. Dein Beispiel würde ich folgendermaßen umsetzen:

window.addEvent(‚domready‘, function(){
$$(‚img‘).each(function(img){
img.set(‚opacity‘, 0.5).addEvents({
‚mouseover‘: function(){
this.fade(1);
},
‚mouseout‘: function(){
this.fade(0.5);
}
});
});
});

Andre 22. Jan 2009 um 10:11 Uhr

Hi Johannes.
Da geb ich dir recht… ist der bessere weg. Werd ich bei Gelegenheit zusätzlich einbinden.

Gruß Andre

MASC 29. Mrz 2009 um 23:32 Uhr

Ich habe das Problem, dass zwar die Geschichte von Andre funktioniert, der Code von Johannes allerdings irgendwie nichts macht…

MASC 29. Mrz 2009 um 23:52 Uhr

window.addEvent(‚domready‘, function() { alert(‚DOM is now ready.‘) });
window.addEvent(‚load‘, function() { alert(‚The page is now completely loaded.‘) });

Wenn ich dies als JS einbaue, kommt nur die zweite Meldung. :(

Andre 13. Apr 2009 um 10:57 Uhr

Also ich hab die Variante von Johannes nun mitlerweile in 1, 2 Projekten genutzt und funktioniert soweit eigentlich super.

Und das Event ‚domready‘ ist eigentlich sehr gängig und wird in fast allen Scripten genutzt.

Hast du evtl einen Link zu ner Testseite wo du die Probleme hast?

rene zierl 21. Mai 2009 um 11:00 Uhr

hi , suche dringend wen der meine webseite aktualisiert und neu macht , sehr dringend , bitte auch wer der sie pflegt , bitte melden , liebe grüße rene , tel. 0172-9315491 oder per email

su 15. Okt 2010 um 09:57 Uhr

hm das funktioniert nicht mit ner klasse
ich hab jetzt

anstatt

und da pssiert nichts.
eine idee warum?

katinka 15. Jan 2012 um 12:17 Uhr

Wenn ich den Code von Johannes einfüge, bekomme ich immer die Fehlermeldung das in zeile 6 ein Syntaxfehler sei. Ich find ihn aber nicht :(
kann mir jemand vielleicht helfen?

Katinka 15. Jan 2012 um 12:20 Uhr

Also eigentlich ist er in Zeile 3 :)

Kommentar schreiben