Fading Opacity mit 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 />
});
Tags: Fading, HTML, JavaScript, Mootools, Tutorial
Über den Autor
Dieser Artikel wurde am 18. Dezember 2008 von André geschrieben. André hat bereits 35 Artikel auf Chukki.de geschrieben.
Website: http://www.AndreTeich.de
6 Kommentare zu "Fading Opacity mit Mootools"
Johannes schrieb am 22. Januar 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 schrieb am 22. Januar 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 schrieb am 29. März um 23:32 Uhr:
Ich habe das Problem, dass zwar die Geschichte von Andre funktioniert, der Code von Johannes allerdings irgendwie nichts macht…
MASC schrieb am 29. März 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 schrieb am 13. April 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 schrieb am 21. Mai 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
Kommentar schreiben: