PHP Tutorials, PHP lernen, PHP Forum, PHP Community and more ... MyWebsolution.de!

Sidebar

Home News Tutorials Workshops Tipps Artikel Gästebuch Sitemap Unicode

Suche

Members

Forum Login Registrierung

Statistik

Statistikbereich
Jetzt2
Heute257
Gestern293
Gesamt1512592

Ratingbar erstellen

Autor Flitze
Klicks 18954
Bewertungen 57
Rating 7.2
Stand 15.04.2010
Keywords:
Ratingbar, Bewertungsbalken, 5 Star, 5 Sterne, Bewertunsbalken mit hover-Effekt, Ratingbar mit hover Effekt, Bewertungsbalken Effekt Maus

Amazon: HTML von Kopf bis Fu�
Breadcrumb:
Tipps » Ratingbar erstellen
Seite : 1 Bewerten
Article Wizard - deutscher Article Spinner

Gliederung


  1. Einleitung
  2. Die Hintergrundgrafiken
  3. Die Schachtelung der Container
  4. Die Formatierung und der Hover-Effekt mittels CSS
  5. Dynamische Anzeige mit JavaScript

1. Einleitung


Wie in meinem Tutorial für ein Ratingsystem angekündigt, folgt an dieser Stelle ein Tipp zur Erstellung eines Bewertungsbalkens, optisch ähnlich dem von youtube.com oder favoriten.de ist. Der Balken wird mittels geschachtelter span-Container erstellt, die mit einem hover-Effekt versehen werden. Im Hintergrund der Container werden Sterne angezeigt, die beim Überfahren mit der Maus zu "leuchten" beginnen. Als kleines Gimmick werde ich am Ende noch ein bisschen JavaScript-Code hinzufügen, der es erlaubt den Bewertungsbalken dynamisch zu halten. Was ich damit meine erfahrt ihr im entsprechenden Abschnitt ;)

2. Die Hintergrundgrafiken


Das zu Grunde liegende Ratingsystem umfasst eine mögliche Punktzahl von 1 bis 5 pro Bewertung. Für jeden Punkt gibt es einen leuchtenden Stern, während die nicht erreichten Punkte ausgegraut bleiben. So sieht das Ganze beispielweise für eine 3-Punkte-Bewertung aus.

Bewertungsbalken 3 Sterne Beispiel

Ich verwende die folgenden beiden Grafiken:

Stern aktiv
stern_active.gif

Stern inaktiv
stern_inactive.gif

3. Die Schachtelung der Container


Damit die Sterne beim Hovern mit der Maus leuchten können, müssen sie in einer bestimmten Art geschachtelt werden. Dazu muss man sich überlegen, unter welcher Bedingung welcher Stern leuchtet. Wenn der User mit der Maus über den ersten Stern fährt, dann soll nur dieser leuchten, fährt er allerdings über den 5., so sollen auch die 4 vorigen Sterne leuchten. Das erreicht man, indem man den span-Container des ersten Sternes sämtliche andere Container umschließen lässt. Der Container des 2. Sternes umschließt alle Sterne außer dem ersten, der des 3 alle außer dem ersten und dem zweiten, etc...

Als HTML-Quellcode sieht das ganze dann wie folgt aus:

Code:
<!-- 1. Stern -->
<span class="star">1
 <!-- 2. Stern -->
 <span class="star">2
  <!-- 3. Stern -->
  <span class="star">3
   <!-- 4. Stern -->
   <span class="star">4
    <!-- 5. Stern -->
    <span class="star">5
    <!-- 5. Stern Ende-->
    </span>
   <!-- 4. Stern Ende-->
  </span>
  <!-- 3. Stern Ende-->
 </span>
 <!-- 2. Stern Ende-->
 </span>
<!-- 1. Stern Ende-->
</span>


Ich formatiere die Klasse star nun folgendermaßen:

Code:
.star{
 height:50px;
 display:block;
 margin-left:50px;
 border:solid 1px black;
}


Der height-Wert entspricht dabei der Höhe der Grafik, die wir später als Hintergrund einsetzen und der margin-left-Wert sorgt dafür, dass die Box des folgenden Sterns erst in einem 50px Abstand zur vorigen beginnt - was wiederum der Breite der Hintergrundgrafik entspricht.
Den border-Wert setze ich lediglich, damit man die einzelnen span-Elemente besser unterscheiden kann.

Auf dem Browser sieht dass dann so aus, das sollte euch einen Eindruck der Schachtelung geben:

Bewertungsbalken Step1 - unformatiert

Wie man erkennt, sind die einzelnen Boxen "verschoben". Das liegt daran, dass jedes neue span-Element einen eigenen Block erzeugt und deshalb unterhalb der Zahl dargestellt wird. Außerdem sind alle Boxen so breit wieder komplette Bildschirm, was später recht ungünstig wäre, da wir einen Hover-Effekt einsetzen werden und dieser dann auch außerhalb des benötigten Bereichs aktiviert werden würde. Deshalb wird der HTML-Code wie folgt angepasst:

Code:
<!-- 1. Stern -->
<span class="star" style="width:250px; margin:0px">
<span class="spacer">1</span>
 <!-- 2. Stern -->
 <span class="star" style="width:200px;">
 <span class="spacer">2</span>
  <!-- 3. Stern -->
  <span class="star" style="width:150px;">
  <span class="spacer">3</span>
   <!-- 4. Stern -->
   <span class="star" style="width:100px;">
   <span class="spacer">4</span>
    <!-- 5. Stern -->
    <span class="star" style="width:50px;">
    <span class="spacer">5</span>
    <!-- 5. Stern Ende-->
    </span>
   <!-- 4. Stern Ende-->
  </span>
  <!-- 3. Stern Ende-->
 </span>
 <!-- 2. Stern Ende-->
 </span>
<!-- 1. Stern Ende-->
</span>


Ich habe nun zum einen eine feste breite für jede Box vergeben und ich habe die Zahl in ein weiteres span-Element der Klasse spacer gepackt. Also wird auch die .css Datei erweitert und sieht nun so aus:

Code:
.star{
 height:50px;
 display:block;
 margin-left:50px;
 border:solid 1px black;
}

.spacer{
 display:block;
 float:left;
 width:50px;
 height:50px;
}


Das Gesamtergebnis könnt ihr in dieser Datei bewundern:

Bewertungsbalken Step2 - Breite und Schachtelung

Anmerkung
Lasst euch nicht dadurch verwirren, dass die Boxen noch immer leicht verschoben sind. Das kommt daher, dass der Rahmen nicht überlappend dargestellt werden kann. Später werden wir sowieso keinen Rahmen verwenden, also soll’s uns nicht weiter stören :D

4. Die Formatierung und der Hover-Effekt mittels CSS


Nachdem die Schachtelung korrekt erstellt wurde, können wir uns nun um Design kümmern. Dazu werden folgende Style-Definitionen verwendet:

Code:
.star{
 height:50px;
 display:block;
 margin-left:50px;
 background:url(stern_inactive.gif) left no-repeat;
}

.active {
 background:url(stern_active.gif) left no-repeat;
}

.star:hover{
 background:url(stern_active.gif) left no-repeat;
}

.spacer{
 display:block;
 float:left;
 width:50px;
 height:50px;
}


Den Rahmen habe ich aus star entfernt und dafür das Hintergrundbild gesetzt. Dieses ist links angeordnet, da ja die vorderen Boxen die hinteren umschließen. Die Klasse active kennzeichnet Sterne, die bereits vorausgefüllt sind. Wie man das einsetzt zeige ich gleich im Beispielcode. Zuletzt wurde noch ein Hover-Effekt für die Klasse star hinzugefügt, der den "Stern zum Leuchten bringt" ;)
Der zugehörige Code für einen Ratingbalken, bei dem 3 Sterne bereits leuchten sieht so aus:

Code:
<!-- 1. Stern -->
<span class="star active" style="width:250px; margin:0px">
<span class="spacer">&nbsp;</span>
 <!-- 2. Stern -->
 <span class="star active" style="width:200px;">
 <span class="spacer">&nbsp;</span>
  <!-- 3. Stern -->
  <span class="star active" style="width:150px;">
  <span class="spacer">&nbsp;</span>
   <!-- 4. Stern -->
   <span class="star" style="width:100px;">
   <span class="spacer">&nbsp;</span>
    <!-- 5. Stern -->
    <span class="star" style="width:50px;">
    <span class="spacer">&nbsp;</span>
    <!-- 5. Stern Ende-->
    </span>
   <!-- 4. Stern Ende-->
  </span>
  <!-- 3. Stern Ende-->
 </span>
 <!-- 2. Stern Ende-->
 </span>
<!-- 1. Stern Ende-->
</span>


Die Zahlen wurden durch erzwungene Leerzeichen ersetzt, damit das leere span-Element auch auf jeden Fall angezeigt wird.

In der folgenden Datei habe ich einige Beispiele für Bewertungen eingefügt:

Bewertungsbalken Step3 - Sterne und Hover-Effekt

Daran könnt ihr die Funktionsweise testen und erkennt auch gleich das Problem, dass sich beim ausschließlichen Verwenden von CSS ergibt. Es ist nicht möglich, das Leuchten der Sterne (resultierend aus dem bestehenden Rating) mittels eines Hover-Effektes wieder zu entfernen. Genauer bedeutet das, dass wenn etwas mit 3 Sternen bewertet wurde, die ersten 3 Sterne leuchten. Wenn nun ein User nur einen Stern vergeben will, so leuchten dennoch weiterhin alle Sterne, da die Klasse des leuchtenden Sterns aktive ist. Natürlich kann man nun auch für aktive einen eigenen Hover-Effekt definieren, aber auf Grund der Schachtelung ist es unmöglich sowohl Ausgegraute in Leuchtende als auch Leuchtende in Ausgegraute zu verwandeln. Dazu müsste man die Schachtelung nämlich genau umgekehrt realisieren. Abhilfe schafft hier nur die Verwendung von JavaScript. Das meine ich übrigens mit der in der Einleitung erwähnten Dynamik :)

5. Dynamische Anzeige mit JavaScript


Das Problem der Unflexibilität der Sterne entsteht dadurch, dass die leuchtenden Sterne eine andere Klasse haben, als diejenigen, die nicht leuchten. Deshalb muss man einfach mittels JavaScript dafür sorgen, dass die Klasse beim Hovern zurückgesetzt wird. Dazu dient der folgende JavaScript-Code:

Code:
elements = new Array();
function getElementsByClass(searchClass,node,tag) {
        var classElements = new Array();
        if ( node == null )
                node = document;
        if ( tag == null )
                tag = '*';
        var els = node.getElementsByTagName(tag);
        var elsLen = els.length;
        var pattern = new RegExp("(^|\s)"+searchClass+"(\s|$)");
        for (i = 0, j = 0; i < elsLen; i++) {
                if ( pattern.test(els[i].className) ) {
                        classElements[j] = els[i];
                        j++;
                }
        }
        return classElements;
}

function removeActive(){
    elements = getElementsByClass("star active");
    for(var i = 0; i< elements.length; i++)
         elements[i].className = "star";
}

function resetActive(){
    for(var i = 0; i< elements.length; i++)
         elements[i].className = "star active";
}

JavaScript bietet leider keine Funktion, eine Tag anhand seiner Klasse auszuwählen. Deshalb müssen wir die Funktion getElementsByClass selbst definieren. Ich habe sie selbst nur kopiert, weiß aber nicht mehr genau von welcher Quelle. Aber wenn ihr nach dem Funktionsnamen googlet, findet sich einiges dazu. Grob gesagt sucht sich die Funktion einfach alle Tags raus und prüft das Klassenattribut anhand eines RegExp. Alle zutreffenden Elemente werden dann in einem Array gespeichert.
Genau das benötigen wir, denn dadurch können wir den problematischen Klassenzusatz active beim Hovern entfernen (mittels removeActive), wodurch die Ursprungsfunktionalität wieder hergestellt wird. Sobald die Maus den Bewertungsbalken verlässt, wir der Klassenname einfach wieder resettet (mittels resetActive) – die entsprechenden Elemente sind ja JavaScript noch bekannt (in der globalen Variable elements zu Beginn des Script-Bereiches gespeichert). Der HTML-Code muss nun nur noch so ergänzt werden, dass die Box des ersten Sternes diese Funktionen bei onMouseIn und onMouseOut aufruft. Siehe hier:

Code:
<!-- 1. Stern -->
<span class="star active" style="width:250px; margin:0px" onMouseOver="removeActive();" onMouseOut="resetActive();">
<a href="#?rate=1"><span class="spacer">&nbsp;</span></a>
 <!-- 2. Stern -->
 <span class="star active" style="width:200px;">
 <a href="#?rate=2"><span class="spacer">&nbsp;</span></a>
  <!-- 3. Stern -->
  <span class="star active" style="width:150px;">
  <a href="#?rate=3"><span class="spacer">&nbsp;</span></a>
   <!-- 4. Stern -->
   <span class="star" style="width:100px;">
   <a href="#?rate=4"><span class="spacer">&nbsp;</span></a>
    <!-- 5. Stern -->
    <span class="star" style="width:50px;">
    <a href="#?rate=5"><span class="spacer">&nbsp;</span></a>
    <!-- 5. Stern Ende-->
    </span>
   <!-- 4. Stern Ende-->
  </span>
  <!-- 3. Stern Ende-->
 </span>
 <!-- 2. Stern Ende-->
 </span>
<!-- 1. Stern Ende-->
</span>

Ich habe außerdem die einzelnen spacer-span-Elemente mit einem Link umrandet, dadurch kann später auch eine Funktionalität eingebaut werden, wenn man als Linkziel z.B. ein verarbeitendes PHP-Skript angibt.
Das Ganze gibt’s auch nochmal als Beispieldatei:

Bewertungsbalken fertig inklusive JavaScript

Anmerkung
Wenn ihr mehrere Bewertungsbalken auf der gleichen Seite verwendet, dann hat die Umsetzung in JS, wie sie oben genannt ist, einen Nachteil. Da die Funktion getElementsByClass sämtliche Tags mit diesem Klassennamen auswählt, werden auch bei allen die Klassen entfernt. Dadurch verschwinden beim onMouseIn-Event alle leuchtenden Sterne, auch die aller anderen Bewertungsbalken. Wenn man das umgehen möchte, muss man den JavaScript Code wohl etwas anpassen, aber das bleibt dem geneigten Leser überlassen ;) - oder siehe unten...

UPDATE
Das genannte Problem lässt sich recht einfach lösen, in dem man einfach den Suchbereich der Funktion getElementsByClass einschränkt. Diese hat ja einen Parameter namens node, durch den man festlegen kann, für welchen Bereich des Dokumentes die Funktion gilt. Standardmäßig wird hier 'document' ( "Suche überall" ) verwendet, was zum o.g. Bug führt. Um das zu lösen, verändert man die removeActive Funktion folgendermaßen:

Code:
function removeActive(element){
    elements = getElementsByClass("star active", element);
    for(var i = 0; i< elements.length; i++)
         elements[i].className = "star";
}

Jetzt ist es möglich, von dem HTML Dokument aus den Bereich auf eine Ratingbar zu beschränken, in dem man eine Selbstreferenz mittels this übergibt. Dazu passt man den HTML Code wie folgt an:
Code:
onMouseOver="removeActive(this);"

so dass man insgesamt folgenden HTML Code erhält:
Code:
<!-- 1. Stern -->
<span class="star active" style="width:250px; margin:0px" onMouseOver="removeActive(this);" onMouseOut="resetActive();">
<a href="#?rate=1"><span class="spacer">&nbsp;</span></a>
 <!-- 2. Stern -->
 <span class="star active" style="width:200px;">
 <a href="#?rate=2"><span class="spacer">&nbsp;</span></a>
  <!-- 3. Stern -->
  <span class="star active" style="width:150px;">
  <a href="#?rate=3"><span class="spacer">&nbsp;</span></a>
   <!-- 4. Stern -->
   <span class="star" style="width:100px;">
   <a href="#?rate=4"><span class="spacer">&nbsp;</span></a>
    <!-- 5. Stern -->
    <span class="star" style="width:50px;">
    <a href="#?rate=5"><span class="spacer">&nbsp;</span></a>
    <!-- 5. Stern Ende-->
    </span>
   <!-- 4. Stern Ende-->
  </span>
  <!-- 3. Stern Ende-->
 </span>
 <!-- 2. Stern Ende-->
 </span>
<!-- 1. Stern Ende-->
</span>

Natürlich gibt's auch hier ein Beispiel: Bewertungsbalken fixed JavaScript Bug

  Bewerten

»» Zurück zum Menu

Suchmaschinenoptimierung

Suchmaschinenoptimierung (SEO - Search Engine Optimization)

Ranking

Tutorials (13)

8.6
8.4
8.1

Workshops (3)

8.8
8.7
7.6

Tipps (12)

7.2
6.7
6.5

Artikel (24)

8.4
7.2
6.4

RSS Feeds

Full Feed Tutorials Workshops Tipps Artikel

Twitter

Follow me on Twitter

Partner & Links


Valid HTML 4.01 Transitional
Valid CSS
nach oben

Diese Seiten unterstützen MyWebsolution:
 
© MyWebsolution.de
2006-2016