Sterne/Bewertungen
Paul
- javascript
Hallo erstmal!
Ich hab mal ein bisschen rumgewerkelt und das hingekriegt:
http://pauls.pa.ohost.de/test.htm
Ich möchte das gerne für mehrer Videos auf meiner Homepage,
und natürlich mit weniger Javascript,
dass was ich dort gemacht habe ist ja purer Chaos usw.
Könnt ihr mir einen Link geben, wo es sowas leicht zum abgucken gibt,
oder mir weiterhelfen?
Hallo Paul,
Ich möchte das gerne für mehrer Videos auf meiner Homepage,
und natürlich mit weniger Javascript,
dass was ich dort gemacht habe ist ja purer Chaos usw.
Ja, was soll denn das ganze Tabellengefrickel?
Könnt ihr mir einen Link geben, wo es sowas leicht zum abgucken gibt,
oder mir weiterhelfen?
Das war ne nette Übung:
http://lernspielwiese.de/starrating/
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Sternebewertung</title>
<meta name="author" content="Gernot">
<meta name="generator" content="Ulli Meybohms HTML EDITOR">
<style type="text/css">
[code lang=css]
a.rating {
background:url(leer1.gif);
height:12px;
width:60px;
display:block;
overflow:hidden;
}
a.rating span {
background:url(voll.gif);
display:block;
height:100%;
width:0;
}
</style>
<script type="text/javascript">
//<![CDATA[
window.onload = function () {
var myLinks = document.getElementsByTagName('A');
for (i=0; i < myLinks.length; i++) {
myLinks[i].myActualRating = myLinks[i].getElementsByTagName('SPAN')[0];
myLinks[i].myHiddenInputValue = myLinks[i].getElementsByTagName('INPUT')[0].value;
myLinks[i].onmousemove = function (e) {
obj = this;
this.absXPos = obj.offsetLeft;
while (obj.offsetParent) {
obj = obj.offsetParent;
this.absXPos += obj.offsetLeft;
}
var e = e || window.event;
var relPos = e.clientX || e.pageX;
this.myActualRating.style.width = relPos - this.absXPos + 'px';
}
myLinks[i].out = function () {
this.myActualRating.style.width = 0;
}
myLinks[i].onmouseout = myLinks[i].out;
myLinks[i].onclick = function () {
this.onmouseout = function () {
this.myActualRating.style.width = this.myHiddenInputValue + '%';
};
this.myHiddenInputValue = parseInt(this.myActualRating.offsetWidth*100/this.offsetWidth);
if(this.myHiddenInputValue > 100)this.myHiddenInputValue = 100;
alert(this.myHiddenInputValue + '%');
}
}
}
//]]>
</script>
</head>
<body>
<form method="post" action="#">
<p><a href="#" class="rating"><span></span><input type="hidden" name="rating0" value="0" /></a></p>
<p><a href="#" class="rating"><span></span><input type="hidden" name="rating1" value="1" /></a></p>
</form>
</body>
</html>
[/code]
Gruß Gernot
Hallo nochmal,
//<![CDATA[
window.onload = function () {
var myLinks = document.getElementsByTagName('A');
for (i=0; i < myLinks.length; i++) {
if(myLinks[i].className =="rating" &&
myLinks[i].getElementsByTagName('SPAN')[0] &&
myLinks[i].getElementsByTagName('INPUT')[0]) {
// wie gehabt in der For-Schleife
}
}
Diese IF-Abfrage sollte da auf jeden Fall noch herumgebaut werden, denn höchstwahrscheinlich werden nicht alle Links in dem Dokument so aufgebaut sein wie diejenigen, die zur Bewertung dienen.
Gruß Gernot
--
[super me](http://community.de.selfhtml.org/my/visitenkarten/view.php?key=46)
Hallo Gernot.
Das war ne nette Übung:
Sieht gut aus, aber wenn man die Sterne von rechts überfährt, flimmert die Füllfarbe. Vielleicht weißt du dafür ja noch eine Lösung.
<p><a href="#" class="rating"><span></span><input type="hidden" name="rating0" value="0" /></a></p>
<p><a href="#" class="rating"><span></span><input type="hidden" name="rating1" value="1" /></a></p>
Sieht merkwürdig aus, ist aber offenbar korrekt. Ich frage mich dennoch, was hat ein Eingabefeld in einem Link zu suchen hat. Man kann (zumindest bei Fokussierung per Maus) doch gar nichts eingeben, ohne den Link zu aktivieren? Zumindest im Opera und Firefox ist das der Fall. Konqueror ignoriert den Link und IE tut nur so, als würde der Link aktiviert; die Zielressource wird jedoch nicht aufgerufen.
Einen schönen Samstag noch.
Gruß, Mathias
Hallo Mathias,
Sieht merkwürdig aus, ist aber offenbar korrekt. Ich frage mich dennoch, was hat ein Eingabefeld in einem Link zu suchen hat. Man kann (zumindest bei Fokussierung per Maus) doch gar nichts eingeben, ohne den Link zu aktivieren? Zumindest im Opera und Firefox ist das der Fall. Konqueror ignoriert den Link und IE tut nur so, als würde der Link aktiviert; die Zielressource wird jedoch nicht aufgerufen.
Also ein Flackern kann ich allenfalls bei Opera feststellen. Komischerweise gar nicht beim IE, obwohl der Bug bei diesem Browser doch bekannt ist, dass wenn einem A-Element Hintergrundbilder zugeordnet sind, der bei jedem Überfahren mit der Maus erneute Anfragen zum Server sendet, ob nicht mittlerweile eine neuer Version des Bildes vorliegt. Vielleicht sollte man deshalb gar nicht mit A-Elementen arbeiten.
Das Flackern bei Opera kriegt man glaube ich weg, wenn man inder FOR-Scheleife auch noch
myLinks[i].onmouseover = myLinks[i].onmousemove;
definiert.
Das Ignorieren des Links ist komisch, wahscheinlich dadurch bedingt, dass er gar keinen Inhalt hat, aber gar kein schlechter Nebeneffekt. Man könnte den aber mit einem return false;
am Ende der onclick-Funktion auch noch bewusst provozieren.
Mit beiden Änderungen habe ich es jetzt auch noch mal auf meine Spielwiese hochgeladen.
Gruß Gernot
Hallo Gernot.
Mit beiden Änderungen habe ich es jetzt auch noch mal auf meine Spielwiese hochgeladen.
Funktioniert gut. Fein gemacht.
Einen schönen Samstag noch.
Gruß, Mathias