IT-Academy Logo
Sign Up Login Help
Home - Programmieren - JavaScript - Roll-Over-Effekte mit Javascript



Roll-Over-Effekte mit Javascript

Dieses Tutorial zeigt wie Sie ganz einfach tolle Roll-Over-Effekte erstellen mit Javascript.


Autor: Patrick Faes (dreamer)
Datum: 03-08-2006, 08:14:38
Referenzen: siehe Text
Schwierigkeit: Anfänger
Ansichten: 18205x
Rating: Bisher keine Bewertung.

Hinweis:

Für den hier dargestellte Inhalt ist nicht der Betreiber der Plattform, sondern der jeweilige Autor verantwortlich.
Falls Sie Missbrauch vermuten, bitten wir Sie, uns unter missbrauch@it-academy.cc zu kontaktieren.

[Druckansicht] [Als E-Mail senden] [Kommentar verfassen]



Einführung

Früher reichten schon farblose Webseiten aus um den Internet-Surfer vom Hocker zu hauen. Heutzutage will das verwöhnte Auge aber ein bisschen mehr. Tolle Grafik-Effekte sollen her. Dieses Tutorial möchte zeigen wie auch Sie tolle grafische Effekte mit ein kleines bisschen Javascript erstellen können.

Mittels Javascript können Sie so genannte Roll-Over-Effekte erstellen. Dabei wird das Aussehen eines Seiten-Elements geändert wenn der User mit der Maus darüber fährt. Ein einfaches Beispiel sehen Sie hier:

fahren Sie mit der Maus hierüber

In diesem Beispiel wurden nur die Farben (Text- und Hintergrundfarbe) geändert. Mittels Javascript ist es aber ebenso möglich Grafiken zu ändern, den Cursortyp zu ändern, und vieles mehr. Die Möglichkeiten werden eigentlich nur von Ihrem eigenen Ideeenreichtum eingegrenzt.

Da die Möglichkeiten so umfangreich sind, beschäftigt sich dieses Tutorial nur mit den Grundlagen.
Dieses Tutorial besteht aus fünf Teilen:
  1. den Roll-Over-Effekt auslösen
  2. Style-Eigenschaften ändern
  3. andere Eigenschaften ändern
  4. den Effekt auf andere Elemente zugreifen lassen
  5. reine HTML-Alternativen erstellen
Hier ist aber erstmal der Code vom obigen Beispiel (aus Platzgründen wurde er über mehrere Zeilen verteilt, um gütiges Javascript zu schreiben, müssen Sie diese alle auf einer einzigen Zeile schreiben). Versuchen Sie schonmal ihn zu analysieren:
   <span style="color:yellow; background-color:darkblue;"
   onMouseOver="this.style.color='orange';
       this.style.backgroundColor='darkgreen';"
   onMouseOut="this.style.color='yellow';
       this.style.backgroundColor='darkblue';"
   >
   fahren Sie mit der Maus hierüber
   </span>
Wir verwenden hier ein SPAN-Element. Ein SPAN-Element dient einfach dazu ein bestimmtes Inline-Element einer Seite anders zu gestalten. Hier geben wir den Text die Textfarbe gelb (englisch: yellow) und die Hintergrundfarbe dunkelblau (englisch: darkblue). Dieses Element beinhaltet den Text und besitzt die verschiedene Attributen.


ein Roll-Over-Effekt auslösen

Ein Effekt wird in Javascript durch so genannte Ereignisse ausgelöst. Ein "Ereignis" ist dabei eine bestimmte Aktion des Users. Im obigen Beispiel nehmen wir dazu (wie bei Roll-Overs üblich) die Ereignisse "onMouseOver" (der User fährt mit der Maus über das Element) und "onMouseOut" (der User verlässt mit der Maus das Element wieder).

Die Prototyp-Syntax um dies zu verwirklichen sieht so aus:

Ereignis = "Element.Style.Eigenschaft = 'Wert';"

In unserem Beispiel ist das also:

onMouseOver="this.style.color='orange';"

Dieser Code wird beim überfahren eines Seitenelements mit der Maus die Textfarbe des betreffenden Seitenelements geändert. Beim Verlassen des Elements mit dem Mauszeiger bekommt der Text nicht automatisch wieder die ursprüngliche Farbe. Um das zu erreichen müssen wir das Ereignis onMouseOut verarbeiten:

onMouseOut="this.style.color='yellow';"

Beachten Sie auch dass wir hier immer "this" verwenden, wodurch das Javascript auf das aktuelle Element zugreift. Dies kann für Anfänger etwas verwirrend sein. Lesen Sie wenn nötig mehr dazu bei SelfHTML.

Anstatt den ganzen Code in der Elementdefinition selbst zu schreiben, können Sie natürlich eine Funktion aufrufen:
   <script type="text/javascript" language="javascript">
   function RollOver (element)
   {
       element.style.color = 'yellow';
   }
   </script>  

   <span onMouseOver="RollOver(this);">Text</span>
Sie rufen dann im onMouseOver-Ereignis des Elements die selbstdefinierte Funktion RollOver auf, indem Sie im onMouseOver-Attribut den Funktionsnamen gefolgt von runden Klammern mit der Referenz "this" schreiben. Dies ist praktisch wenn Sie sehr viele Style-Eigenschaften ändern wollen oder dieselbe Funktion für mehrere Links verwenden möchten. Aber es ist auch möglich um so extra Javascript-Code hinzuzufügen, z.B. um die Farbe von der Tageszeit abhängig zu machen, wie im folgenden Beispiel gezeigt wird:
   <script type="text/javascript" language="javascript">
   function RollOver (element)
   {
       var datum = new Date();
       var stunde = datum.getHours();
       var farbe = '';

       if (stunde <= 5) {farbe = 'red';}
       else if (stunde <= 8) {farbe = 'yellow';}
       else if (stunde <= 13) {farbe = 'pink';}
       else if (stunde <= 18) {farbe = 'orange';}
       else if (stunde <= 23) {farbe = 'cyan';}

       element.style.backgroundColor = farbe;
   }
   </script>  

   <span
     onMouseOver="RollOver(this);"
     onMouseOut="this.style.backgroundColor='blue';"
   >
     Text
   </span>
fahren Sie mit der Maus hierüber

Als kurze Erklärung:
In der Funktion wird in der Variable datum das aktuelle Datum gespeichert (das auf dem Computer eingestellt ist!). Daraus wird mit der Funktion getHours() die aktuelle Stundenzahl (von 0 bis 23) geholt. Danach wird in einer Fallunterscheidung entschieden welche Farbe ausgewählt wird, und diese wird dann am Element (mit der Referenz im Parameter element der Funktion) als Hintergrundfarbe zugewiesen. Mehr dazu finden Sie bei SelfHTML.

Wir verwenden in dieses Tutorial nur die Ereignisse onMouseOver und onMouseOut. Aber es gibt massenhaft Ereignisse: das Laden der Seite, ein Tastendruck, ein Klick mit der Maustaste, den Mauszeiger bewegen, und noch vieles mehr. So können Sie z.B. erreichen dass ein Text nach einem Klick eine dritte Farbe annimmt. Eine Auflistung der möglichen Ereignisse finden Sie bei SelfHTML.


Style-Eigenschaften ändern

Die Frage ist nun natürlich wie Sie die Farben ändern können. Nehmen wir unseren Beispielcode nochmal dazu:

onMouseOver="this.style.color='orange';"

Wie schon erwähnt wurde, wird über "this" zugegriffen auf das aktuelle Objekt. Jedes Objekt hat dabei das Unterobjekt "style", welches die Style-Eigenschaften besitzt. Beachten Sie dabei dass der Code "this.color='orange';" keine Fehlermeldung verursacht, jedoch keinen Effekt hat! Das liegt, wie schon erwähnt, daran dass das Unterobjekt "style" die Style-Eigenschaften besitzt. Der richtige Code ist also "this.style.color='orange';"

Um konform den HTML-Standard zu sein, müssen die Anweisungen in einem Ereignis zwischen doppelten Anführungszeichen stehen. Die Farbnamen müssen dann zwischen einfache Anführungszeichen stehen, da diese ansonsten als Variablennamen interpretiert werden. Des Weiteren müssen mehrere Anweisungen von Semikolonen getrennt werden. In unserem Beispiel ändern wir sowohl die Textfarbe als die Hintergrundfarbe. Diese werden von einem Semikolon getrennt und um ganz korrekt zu sein (wie unser Beispielcode) muss auf jeder Anweisung in Javascript ein Semikolon folgen.

Beachten Sie auch noch dass im Namen eines Javascript-Pendants einer CSS-Eigenschaft ein Bindestrich weggelassen wird und dass der erste Buchstabe des Worts hinter dem Bindestrich groß geschrieben wird. So wird aus "background-color" (CSS) "backgroundColor" (Javascript). Eine Übersicht finden Sie bei SelfHTML.

Bisher haben wir immer alle Style-Eigenschaften einzeln geändert. Wenn dies nur eins oder zwei sind, ist dies auch einfach. Wenn Sie jedoch z.B. mehrere Style-Eigenschaften gleichzeitig ändern wollen, dann wird dies recht umständlich. Nehmen wir folgendes Beispiel:

fahren Sie mit der Maus über diesen Text

Dieser Effekt ist schon etwas aufwendiger. Hier ist der verwendete Code (aus Platzgründen wiederum auf mehrere Linien verteilt):
   <span style="padding:3px; border:4px ridge blue;
      background-color:green; color:red; font-weight:bold; cursor:pointer;" 
   onMouseOver="this.style.padding=5; this.style.borderColor='grey';
      this.style.color='cyan'; backgroundColor='yellow';"
   onMouseOut="this.style.padding=3; this.style.borderColor='blue';
      this.style.color='red'; backgroundColor='green';"
   >
   fahren Sie mit der Maus über diesen Text
   </span>
Dieser Effekt erfordert also sehr viel Code. Besser wäre es meiner Ansicht nach hierfür einige CSS-Klassen zu erstellen um dann nur den Klassennamen ändern zu müssen.
   <style type="text/css">
   .normal {
   padding: 3px;
   border: 4px ridge blue;
   background-color: green;
   color: red;
   font-weight: bold;
   cursor: pointer;
   }
   .effekt {
   padding: 5px;
   border: 4px ridge grey;
   background-color: yellow;
   color: blue;
   font-weight: bold;
   cursor: pointer;
   }
   </style>
Danach reicht es aus um nur den Klassennamen zu ändern, wie im folgenden Beispiel gezeigt wird:
   <span class="normal"
   onMouseOver="this.className='effekt';"
   onMouseOut="this.className='normal';"
   >
   Text
   </span>
Dabei müssen Sie aber beachten dass Sie jede einzelne Style-Eigenschaft in beide Klassen aufnehmen. Wenn Sie also z.B. nur eins oder zwei von acht Style-Eigenschaften ändern möchten, lohnt es sich kaum. Es sei denn Sie haben die Möglichkeit von mehreren Klassen zu erben. Ein Beispiel:

span.a {font-size: 200%;}
span.b {color: red;}
span.c {color: blue;}

<span class="a b">roter Text</span>
<span class="a c">blauer Text</span>
Im obigen Beispiel stehen zwei Texte. Der Erste erbt Eigenschaften von der Klasse "a" und der Klasse "b". Der zweite Text dagegen erbt ebenfalls von der Klasse "a", kombiniert diese aber mit der Klasse "c". Das hat zu Folge dass beide Texte in doppelter Größe (im Vergleich zur normalen Textgröße) angezeigt werden) wegen die Eigenschaften in der Klasse "a", dabei aber der erste Text in roter Farbe (Klasse "b") und der zweite Text in blauer Farbe (Klasse "c") angezeigt werden. Im Javascript-Code müssten Sie den Klassennamen dann ändern in "a b", bzw. "a c".

Klassen dienen in CSS dazu um mehrere Seitenelementen ein uniformes Layout zu geben. Im Gegensatz dazu werden IDs dazu verwendet ein einziges Seitenelement zu stylen. Natürlich könnten Sie die ID auch ändern, jedoch ist davon abzuraten. Javascript greift auf Seitenelementen zu über die ID (oder den Namen). Wenn Sie die ID ändern für den Roll-Over-Effekt, dann können andere Javascripte eventuell nicht mehr auf das Element zugreifen.

Wenn Sie dieselben Style-Änderungen mit mehreren Seitenelementen vornehmen möchten, dann können Sie diese Änderungen in einer Funktion zusammenfassen. Dann müssen Sie nicht in jedes Element den ganzen Code wiederholen, sondern nur noch den Funktionsnamen und die Parameter-Werte schreiben.
function Stylen (element, textfarbe, hintergrundfarbe, rahmendicke)
{
	element.style.color = textfarbe;
	element.style.backgroundColor = hintergrundfarbe;
	element.style.borderWidth = rahmendicke + 'px';
}

Das macht den Code auch viel einfacher flexibler.


Andere Eigenschaften ändern

Neben Style-Eigenschaften bisitzen HTML-Elemente auch Attribute wie z.B. das Source-Attribut bei Grafiken. Auch diese können Sie ändern.

Ein solcher Effekt ist sehr einfach zu erreichen. Sie nehmen (genau wie oben schon) die Objekt-Referenz "this" und dann die Eigeschaft "src", welche Sie über das onMouseOver-Ereignis einen anderen Wert zuweisen.
   <img src="bild1.gif"
   onMouseOver="this.src='bild2.gif';"
   onMouseOut="this.src='bild1.gif';"
   >
Dies können Sie auf jede beliebige Eigenschaft eines Seitenelements anwenden. Aber eigentlich können Sie mit dem Element alles machen was Sie wollen, auch z.B. es löschen (also eigentlich alles dass Sie mit Javascript anstellen können, aber das würde uns hier zu weit führen).

Eine andere Möglichkeit möchte ich Ihnen auch noch zeigen:
   <img src="bild1.gif"
   onMouseOver="this.setAttribute('src' , 'bild2.gif');"
   onMouseOut="this.setAttribute('src' , 'bild1.gif');"
   >
Mit der Funktion setAttribute() können Sie die Attribute ändern, bzw. deren Werte. In machen Fällen streiken Browser wenn Sie versuchen bestimmte Attribute mit der erste Methode zu ändern. In dem Fall können Sie diese zweite Methode verwenden. (mehr dazu bei SelfHTML)


Auf andere Elemente zugreifen

Bisher haben Sie nur gesehen wie Sie zugreifen auf das Element wo Sie mit der Maus überfahren. Es ist aber auch möglich auf andere Seitenelementen zuzugreifen, wie im folgenden Beispiel:

fahren Sie hierüber mit der Maus



Aber es ist auch möglich um auf mehrere Elemente gleichzeitig zuzugreifen:

fahren Sie hierüber mit der Maus



Im ersten Beispiel haben Sie zugegriffen auf ein einziges Element mit einer einmaligen ID, während im zweiten Beispiel auf drei Elemente mit gemeinsamem Namen zugegriffen wurde. Nur ein einziges Element auf der Seite darf ein und dieselbe ID haben, während mehrere Elemente auf der Seite sich einen selben Namen teilen dürfen. Dieser Unterschied ist sehr wichtig wenn Sie über Javascript auf diese Elemente zugreifen möchten. Während Sie auf ein Element mit einer ID einfach zugreifen können indem Sie die ID des Elements an Javascript übergeben, fasst Javascript verschiedene Elemente mit demselben Namen in einem Array zusammen (ein Array ist eine Gruppe von Elemente die zusammen gehören), und müssen Sie diese in eine Schleife alle einzeln durchlaufen. Da bekannt ist wieviele Elemente es mit diesem Namen gibt, ist eine For-Schleife zu bevorzugen.

Es ist wohl einfach dies mit einem Beispiel zu demonstrieren:
   document.getElementById('A').style.color = 'blue';

   for (var i = 0; document.getElementsByName('B').length; i++)
   {
        document.getElementsByName('B')[i].style.color = 'blue';
   }
Wie Sie sehen können wird mit der Funktion getElementById() zugegriffen auf das Element mit der ID "A". Mit der Funktion getElementsByName() dagegen erhalten Sie also eine Gruppe von Elementen mit dem Namen "B". Letztere müssen alle nacheinander abgelaufen werden. Beachten Sie noch dass Sie dies auch so machen müssen wenn es nur ein Element mit diesem Namen gibt und dass die Elemente auch von verschiedenen Typen sein können (z.B. Links, Tabellen, I-Frames, usw.). Sie können natürlich auch noch die ID's von Seitenelementen die Sie alle gleich ändern wollen in eine Array zusammen fassen und diese dann in einer Schleife durchlaufen.

Dies alles erfordert ein bisschen Planung. Und alsob dies noch nicht genug wäre, verwenden manche Besucher noch ältere Browser die die Funktionen getElementById() und getElementsByName() nicht kennen, sondern nur die veralteten Syntaxen von Microsoft und Netscape. Microsoft verwendete früher das Objekt all, während Netscape Gebrauch machte von so genannten Layers. Beide geben ein Array zurück mit alle Objekte die den angegebenen Namen oder ID haben. Wenn es nur ein Element mit dem angegebenen Namen oder ID gibt, brauchen Sie diese nicht in eine Schleife zu durchlaufen. Oft wird dieses Problem gelöst indem getestet wird welche Methode der Browser unterstüzt und abhängig davon wird der Code ausgeführt. Jedoch sorgt diese Angehensweise für sehr langen Code der sehr wenig macht. Daher werden wir das Problem hier anders angehen: wir überprüfen welche Methode der Browser unterstützt und legen in einer Variable eine Referenz an:
   function Stylen (elementID)
   {
      var objekt = null;
        
      if (document.getElementById) {objekt = document.getElementById(elementID);}
      else if (document.all) {objekt = document.all[elementID];}
      else if (document.layers) {objekt = document.layers[elementID];}
        
      objekt.style.color = 'blue';
   }
Kurze Erläuterung:
die Funktion Stylen bekommt als Parameter die ID eines Seitenelements. Danach wird nacheinander geprüft ob der Browser die Methoden getElementById(), all[] oder Layers[] kennt (normalerweiser sollte jeder Browser zumindest einer davon kennen). Wenn der Browser eine Methode findet der er kennt, dann wird er diese Methode verwenden um auf das Seitenelement zuzugreifen und eine Referenz zu diesem Element in die Variable objekt zu speichern. Danach kann ganz einfach über diese Variable auf das Element zugegriffen werden.

Wenn Sie über den Namen auf ein oder mehrere Elemente zugreifen möchten, dann können Sie dies mit folgender Variante machen:
   function Stylen2 (elementenName)
   {
      var objekte = null;
        
      if (document.getElementsByName) {objekte = document.getElementsByName(elementenName);}
      else if (document.all) {objekte = document.all[elementenName];}
      else if (document.layers) {objekte = document.layers[elementenName];}
        
      for (var i = 0; i < objekte.length; i++) objekte[i].style.color = 'blue';
   }
Dabei müssen Sie also darauf aufpassen dass Sie die richtige Funktion aufrufen (hier also Stylen2), da Sie ansonsten eine Fehlermeldung zu Gesicht bekommen.

Es ist auch möglich mehrere Elemente mit unterschiedlicher ID oder Namen gleichzeitig zu ändern, dies erfordert aber eine spezial zugeschnittene Funktion, wie folgendes Beispiel demonstriert:

fahren Sie mit der Maus hierüber






Ach ja: Sie haben sicherlich schon bemerkt dass in den Beispielen oft die Farben der Ränder geändert wurden und dass diese einen 3D-Effekt haben. Wie Sie das machen, lesen Sie bei SelfHTML.

Jetzt der Code zu unserem obigen Beispiel:
  //die Funktion MultiFarbe() ist die zentrale Funktion
  //sie greift auf die einzelne Seitenelementen zu und ändert ihre Styleeigenschaften
  function MultiFarbe (ID1, ID2, Name1, Name2)
  {
     var objekt1 = ZugreifenID(ID1);
     var objekt2 = ZugreifenID(ID2);
     var objekte3 = ZugreifenName(Name1);
     var objekte4 = ZugreifenName(Name2);

     objekt1.style.borderColor = 'blue';
     objekt2.style.borderColor = 'red';

     for (var i = 0; i < objekte3.length; i++) objekte3[i].style.borderColor = 'orange';
     for (var i = 0; i < objekte4.length; i++) objekte4[i].style.borderColor = 'green';
  }

  //die Funktion Anfangsfarbe() stellt die Styleeigenschaften wieder zurück
  function AnfangsFarbe (ID1, ID2, Name1, Name2)
  {
     var objekt1 = ZugreifenID(ID1);
     var objekt2 = ZugreifenID(ID2);
     var objekte3 = ZugreifenName(Name1);
     var objekte4 = ZugreifenName(Name2);

     objekt1.style.borderColor = 'white';
     objekt2.style.borderColor = 'white';
 
     for (var i = 0; i < objekte3.length; i++) objekte3[i].style.borderColor = 'white';
     for (var i = 0; i < objekte4.length; i++) objekte4[i].style.borderColor = 'white';
  }

  //die Funktion ZugreifenID() liefert eine Referenz zu einem Objekt zurück
  //für das eine ID angegeben wurde
  function ZugreifenID (ID)
  {
     var objekt = null;
             
     if (document.getElementById) {objekt = document.getElementById(ID);}
     else if (document.all) {objekt = document.all[ID];}
     else if (document.layers) {objekt = document.layers[ID];}
        
     return objekt;
  }

  //die Funktion ZugreifenName() macht dasselbe wie die Funktion ZugreifenID()
  //dann aber, wie der Name schon sagt, für Elemente für denen ein Name angegeben wurde
  function ZugreifenName (Name)
  {
     var objekte = null;
        
     if (document.getElementsByName) {objekte = document.getElementsByName(Name);}
     else if (document.all) {objekte = document.all[Name];}
     else if (document.layers) {objekte = document.layers[Name];}
        
     return objekte;
  }

  <!-- die Buttons -->  
  <input type="button" value="AAA" id="A">
  <input type="button" value="BBB" id="B">
  <input type="button" value="CCC" name="C">
  <input type="button" value="CCC" name="C">
  <input type="button" value="CCC" name="C">
  <input type="button" value="DDD" name="D">
  <input type="button" value="DDD" name="D">
  <input type="button" value="DDD" name="D">
Wie Sie sehen haben wir hier acht Buttons, zwei mit einer ID (A und B) und zwei Gruppen von jeweils drei Buttons die sich einen Namen teilen (C und D). Die Buttons stehen hier alle zusammen, sie können in der Praxis aber an verschiedenen, beliebigen Stellen platziert sein. Die Funktionen ZugreifenID() und ZugreifenName() sind bekannt. Sie bekommen jeweils eine ID oder einen Namen als Parameter, und liefern eine Referenz auf diese Objekte zurück.

Dann gibt es noch die Funktionen MultiFarbe() und AnfangsFarbe(), die in unserem gelben Block aufgerufen werden.

Der Code der Ereignisse sieht so aus:
  onMouseOver="MultiFarbe('A', 'B', 'C', 'D');"
  onMouseOut="AnfangsFarbe('A', 'B', 'C', 'D');"
Der Roll-Over-Effekt wird ausgelöst indem die Funktion MultiFarbe() aufgerufen wird. Diese bekommt als Parameter die IDs und die Namen der Elemente auf denen Sie zugreifen möchten. Dabei müssen Sie unbedingt die richtige Reihenfolge einhalten, denn die Funktion wird die andere Funktionen aufrufen um eine Referenz auf die Elemente zu bekommen. Leider weiß der Browser nicht ob es sich um eine ID oder einen Namen handelt. Daher müssen Sie Ihre Funktionen genaustens planen.

Fortgeschrittene Programmierer können aber z.B. ein assoziatives Array an der Funktion übergeben, das die ID's und Namen enthält, etwas in der Art von:
//Array im Headbereich definieren
var gruppe = new Array();
gruppe['ID'] = new Array('A', 'B');
gruppe['Name'] = new Array('C', 'D');

<a href="javascript: Stylen(gruppe);">

function Stylen (gruppe)
{
	//die Gruppen gruppe['ID'] und gruppe['Name'] können jetzt beide in einer separaten Schleife durchlaufen werden
}
Wie schon gesagt wird die Funktion dann die bekommene Parameter weiterleiten an die andere Funktionen um eine Referenz auf das Element oder die Elemente zu bekommen. Danach wird er sie stylen wie oben schon gezeigt wurde.

Noch eine kleine Armerkung:
Prinzipiel können Sie auch auf ein Element zugreifen mit der Syntax document.ElementName, jedoch wird das Element dann nicht immer in jeden Browser erkannt. Ich würde daher von der Verwendung abraten.


Alternativen mit HTML und CSS

Für Besucher die einen Browser verwendet der Javascript nicht unterstützt bzw. ausgeschaltet haben, können Sie noch eine Alternative definieren die nur mit HTML und CSS auskommt. Dazu verwenden Sie die so genannte Pseudoklassen "hover" und "focus". Diese dienen normalerweise dazu Links grafisch zu gestallten, gelten aber auch für andere Elemente. Der CSS-Code könnte dann etwa so aussehen:
span.Klasse {color: red; background-color: black;}
span.Klasse:hover {color: black; background-color: red;}
Sie können damit aber nur das Aussehen des überfahrenen Elements ändern. Übrigens funktioniert die CSS-Variante bisher nicht im Internet Explorer.
Mehr über Pseudoklassen erfahren Sie bei SelfHTML.

Die Frage ist jetzt aber nur "Wie stell' ich es an dass der Besucher mit Javascript die JS-Variante zu sehen bekommt, und der ohne die CSS-Variante?". Nun das ist recht einfach zu erreichen. Sie schreiben über die write()-Funktion von Javascript den HTML-Code in der Seite. Dies geschieht dann nur bei Besuchern die Javascript (aktiviert) haben. Die CSS-Variante schreiben Sie zwischen <NOSCRIPT>-Tags, wodurch nur Besucher ohne (aktivem) Javascript die CSS-Variante zu sehen bekommen. Dabei bekommt die JS-Variante den Klassennamen "Klasse1" und die CSS-Variante den Klassennamen "Klasse2".
   <script type="text/javascript" language="javascript">
   document.write('<span  class="Klasse1" onMouseOver="this.color=\'blue\';">Text</span>');
   </script>
   <noscript>
   <span class="Klasse2">Text</span>
   </noscript>
Beachten Sie dabei die Regeln über Anführungszeichen in Javascript. (mehr dazu). Der dazugehörige CSS-Code könnte dann so aussehen:
span.Klasse1 {}
span.Klasse2 {}
span.Klasse2:hover {}
Beachten Sie dabei dass nur die zweite Klasse die Pseudoklasse "hover" hat und dass die JS-Variante von der ersten Klasse ist. Das ist deshalb so weil die JS-Variante zwar den JS-Code inm onMouseOver-Ereignis ausführt, jedoch auch seine Style-Eigenschaften ändert wenn die Klasse die Pseudoklasse "hover" enthält.


[back to top]



Userdaten
User nicht eingeloggt

Gesamtranking
Werbung
Datenbankstand
Autoren:04508
Artikel:00815
Glossar:04116
News:13565
Userbeiträge:16552
Queueeinträge:06245
News Umfrage
Ihre Anforderungen an ein Online-Zeiterfassungs-Produkt?
Mobile Nutzung möglich (Ipone, Android)
Externe API Schnittstelle/Plugins dritter
Zeiterfassung meiner Mitarbeiter
Exportieren in CSV/XLS
Siehe Kommentar



[Results] | [Archiv] Votes: 1147
Comments: 0