Archiv für Juli 2009
Javascript: CSS-Klasse bei MouseOver wechseln
Es gibt verschiedene Arten, Effekte umzusetzen, welche beim Überfahren mit der Maus aktiv werden. So kann man zum Beispiel die CSS-Klasse für ein Objekt mit Hilfe des MouseOver-Events und einer simplen JavaScript-Funktion wechseln.
Grundsätzlich sollte das wechseln allein mit CSS möglich sein:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>CSS-Beispiel : Effekt bei MouseOver</title>
<style type="text/css">
.standard { color:black; }
.standard:hover {
color:green;
border: 1px solid red;
background-color:yellow;
}
</style>
</head>
<body>
<span class="standard">
Fahren Sie mit der Maus über diesen Text
</span>
</body>
</html>
Das Beispiel nutzt das Pseudo-Element “:hover“, welches von allen gängigen Browsern interpretiert wird. Somit wechselt sich die Klasse automatisch, wenn der Mauszeiger das jeweilige Element erreicht.
Im Firefox läuft dieses Beispiel auch ohne weitere Probleme, der Internet-Explorer aktzeptiert auch in der neuesten Version das “:hover“-Pseudo-Element auschließlich bei “a“-Elementen (Hyperlinks).
Das ganze kann nun durch eine kleine Änderung in CSS und einer einfachen Javascript-Funktion dennoch umsetzbar gemacht werden.
Dazu wird bei MouseOver die CSS-Klasse des jeweiligen Objektes geprüft und entsprechend gewechselt. (toggle):
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>CSS-Beispiel : Effekt bei MouseOver</title>
<style type="text/css">
.standard { color:black; }
.standard_hover {
color:green;
border: 1px solid red;
background-color:yellow;
}
</style>
<script type="text/javascript">
function toggleCSS(obj) {
var cssclass = obj.className;
var stdclass = cssclass.replace("_hover", "");
if (stdclass == cssclass) {
obj.className = stdclass+"_hover";
} else {
obj.className = stdclass;
}
}
</script>
</head>
<body>
<span class="standard" onMouseOver="toggleCSS(this);" onMouseOut="toggleCSS(this);">
Fahren Sie mit der Maus über diesen Text
</span>
</body>
</html>
Diese Funktion wird nun aufgerufen, sobald der Mauszeiger über das Element fährt und nochmal, sobald er das Element wieder verlässt.
Beim Funktionsaufruf wird das betreffende Element mit “this” übergeben. Nun wird zuerst die aktuell gesetzte CSS-Klasse ausgelesen. Dannach wird geprüft, ob es sich dabei um die “_hover“-Klasse oder die Standard-Klasse handelt. Je nach dem, welche der beiden Klassen gesetzt wurde, wird die entsprechend andere Klasse gesetzt.
Somit ist der “MouseOver“-Effekt auch für den IE und andere Browser verfügbar.
Netbooks als Alternative zum Notebook
Sie möchten unterwegs im Internet surfen, ohne sich die Augen zu verrenken, oder wollen Ihre Mails abrufen, ohne immer nur fünf bis acht Wörter auf dem Handy-Display lesen zu können? Dann sollten Sie sich die neuen Netbooks anschauen!
Eigener Blog oder doch lieber Homepage?
Wer schon einmal darüber nachgedacht hat eine eigene Homepage ins Internet zu stellen, ist bestimmt in letzter Zeit auch häufiger über die Frage gestolpert, ob es nicht sinnvoll wäre einen Webblog wie etwa WordPress dafür zu nutzen.
Die Vorteile eines Blogs sind einfach erklärt: Diesen Beitrag weiterlesen »
Starke Rootserver zu günstigen Preisen
Wer eine eigene Homepage besitzt, hat sicherlich auch den Wunsch dort Massenandränge von Besuchern verzeichen zu können.In der heutigen Zeit des Web 2.0 ist das garnicht mal so einfach. Man bräuchte also eine Plattform auf der sich die Besucher treffen, untereinander austauschen und miteinander interagieren können. Vorraussetzung für eine solche Plattform ist nicht allein eine gute Idee, sondern auch das vorhandensein von Server-Sprachen wie PHP oder Datenbank-Server wie MySQL.
Viele Hoster bieten solche Features nur in Server-Verträgen, welche für private Homepage-Betreiber oft nicht bezahlbar sind. Einige Server-Anbieter haben jedoch die Nachfrage nach besseren Preisen in diesem Segment erkannt und ein passendes Angebot erstellt. Diesen Beitrag weiterlesen »
Senden...