12. April 2010 in Browser, Tutorials von Leo
Kürzlich musste ich für einen Event eines Kunden etwas Javascript schreiben, um ein paar div Elemente (HTML) mit einem MouseOver und MouseOut Effekt versehren, welche dem div Element z.B. eine neue Hintergrundfarbe geben.
Eigentlich kann das ganze in Browsern wie Firefox, Google Chrome und Safari (?) ganz simpel mit einem div:hover gemacht werden, jedoch würde dies im Internet Explorer (mal wieder) nicht funktionieren. Deshalb musste Javascript her, welches das ganze nun in allen Browsern ermöglicht.
Und so wird es gemacht:
1. Zuerst muss Prototype (aktuell 1.6) heruntergeladen und auf seinen Server hochgeladen werden. Ansonsten würde das Javascript nicht funktionieren.
2. Nun erstellt man eine neue Javascript Datei (.js) und ladet diese auch auf seinen Server. Im HTML File müssen die beiden Javascript Files nun noch eingebunden werden:
<script src="scripts/prototype.js" type="text/javascript"></script>
<script src="scripts/dein-effekt.js" type="text/javascript"></script>
Der Pfad und Dateiname muss natürlich noch durch den eigenen ersetzt werden.
3. Zu erst erstellen wir ein HTML Gerüst aus div’s:
<div class="content">
<div class="team">
<div class="tools">Anmelden!</div>
</div>
</div>
Hierbei handelt es sich nun um ein Turnier, bei dem man sich Anmelden kann. Der Link zur Anmeldung erscheint jedoch nur, wenn man mit der Maus über das div “team” fährt.
4. Im Javascript schreiben wir nun folgendes:
var act = 0;
Event.observe(window, 'load', function() { //wenn das Fenster geladen hat
var team = $('content').select('div.team'); //Hier wir dem JS das div gezeigt
Gleich darunter:
team.each(function(team){ //hierbei wird das div.team ausgewählt
Event.observe(team, 'mouseover', function() { //mouseover div.team
mouseOver(team);
});
Event.observe(team, 'mouseout', function() { //mouseout div.team
mouseOut(team);
});
});
});
Danach kommt zuerst einmal die Funktion mouseOver:
function mouseOver(team){
children = team.childElements(); //die Unterelemente werden gewählt
tool = children[0]; // das nullte Unterelement (als das gleich darauf folgende
tool.style.display='block'; //jetzt wird das div (div.tools) angezeigt
team.addClassName('act');
//tool.addClassName('act');
}
Und die Funktion mouseOut:
function mouseOut(team){
children = team.childElements();
tool = children[0];
tool.style.display='none';
team.removeClassName('act');
tool.removeClassName('act');
}
Im CSS müssen nun noch die Class definiert werden. Die Class .act, für active (aktiv), welche sagt dass das Element aktiv ist, also die Maus gerade auf dem Element ist.
Das Javascript versteckt und zeigt lediglich ein div Element und gibt bzw. nimmt ihm eine neue CSS Class.
Das Javascript sollte wie folgt aussehen:
var act = 0;
Event.observe(window, 'load', function() {
var team = $('content').select('div.team');
team.each(function(team){
Event.observe(team, 'mouseover', function() {
mouseOver(team);
});
Event.observe(team, 'mouseout', function() {
mouseOut(team);
});
});
});
function mouseOver(team){
children = team.childElements();
tool = children[0];
tool.style.display='block';
team.addClassName('act');
//tool.addClassName('act');
}
function mouseOut(team){
children = team.childElements();
tool = children[0];
tool.style.display='none';
team.removeClassName('act');
tool.removeClassName('act');
}