Gernot Back: Sterne/Bewertungen

Beitrag lesen

Hallo Paul,

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.

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