php-resource



Zurück   PHP-Scripte PHP-Tutorials PHP-Jobs und vieles mehr > Entwicklung > HTML, JavaScript, AJAX, jQuery, CSS, Bootstrap, LESS
 

Login

 
eingeloggt bleiben
star Jetzt registrieren   star Passwort vergessen
 

 

 


HTML, JavaScript, AJAX, jQuery, CSS, Bootstrap, LESS Probleme mit HTML5, Bootstrap oder jQuery ?

Antwort
 
LinkBack Themen-Optionen Thema bewerten
  #1 (permalink)  
Alt 17-07-2007, 14:56
prego
 PHP Senior
Links : Onlinestatus : prego ist offline
Registriert seit: May 2005
Ort: Herborn
Beiträge: 1.609
prego ist zur Zeit noch ein unbeschriebenes Blatt
Standard Bewertung mit Grafiken

Hi,

ich bastel gerade ein Bewertungsscript.

Es werden einfach 6 Grafiken geladen und beim drüber fahren wird bei allen von links bis zu dem wo ich drüber bin das Hintergrundbild entsprechend verschoben.

Ich habe die Anzahl der Punkte in das Alt-Attribut meines IMG-Tags geschrieben.

PHP-Code:
<img alt="0" src="/_images/shim.gif" height="15" width="16">
<
img alt="1" src="/_images/shim.gif" height="15" width="16">
<
img alt="2" src="/_images/shim.gif" height="15" width="16">
<
img alt="3" src="/_images/shim.gif" height="15" width="16">
<
img alt="4" src="/_images/shim.gif" height="15" width="16">
<
img alt="5" src="/_images/shim.gif" height="15" width="16"
shim.gif ist ein Spacer-Gif, da die eigentliche Bewertungsgrafik ja über den Hintergrund geladen wird. Die Elemente werden dynamisch erzeugt. Beim erzeugen hänge ich jedem Element ein Event auf mousevoer an.
Hier mal die Funktionen:

PHP-Code:
var rateRange 6;
var 
rateImg '/_images/img_rating_star.gif';
var 
rateImgWidth 16;
var 
rateImgHeight 15;
var 
spacerImg '/_images/shim.gif';

function 
initRating(){

    var 
rating document.getElementById('rating');

    for(var 
0rateRangei++){
        var 
img;
        
img document.createElement('img');
        
img.src spacerImg;
        
img.width rateImgWidth;
        
img.height rateImgHeight;

        
img.alt i;

        
img.style.backgroundImage  'url(' rateImg ')';
        
img.style.cursor 'pointer';

        
img.onmouseover rate;

        
rating.appendChild(img);
    }

}


function 
rate(){

    var 
val this.alt;
    var 
rating document.getElementById('rating').getElementsByTagName('img');

    
resetRating();

    for(var 
0<= vali++){
        
rating[i].style.backgroundPosition rateImgWidth 'px 0px';
    }

    
window.status val;
}


function 
resetRating(){
    var 
rating document.getElementById('rating').getElementsByTagName('img');
    for(var 
0rating.lengthi++){
        
rating[i].style.backgroundPosition '0px 0px';
    }


Nun zu meinem Problem - ich kann leider meine "info" welcher Bewertungspunkt denn nun gerade überfahren wird nicht im Alt-Attribut speichern, weil der IE das wiedas Title-Attribut behandelt und beim überfahren somit die "gespeicherte" Zahl anzeigt.

Eine Idee war das ganze mit Span zu machen und den Inhalt vom Span unsichtbar zu machen und da die Information zu speichern.

Mir schwebt aber was anderes vor und da ist die Frage ob das funktioniert.

Kann ich irgendwie das Element das ich gerade durchlaufe mit "this" vergleichen und schauen das aktuelle Element das ist, was das Event ausgelöst hat?

PHP-Code:
if(this == rating[i]) 
macht ja wenig Sinn, oder?


Besten Dank schonmal, so long, pm
Mit Zitat antworten
  #2 (permalink)  
Alt 17-07-2007, 15:45
wahsaga
  Moderator
Links : Onlinestatus : wahsaga ist offline
Registriert seit: Sep 2001
Beiträge: 25.236
wahsaga befindet sich auf einem aufstrebenden Ast
Standard Re: Bewertung mit Grafiken

Warum willst du sowas mit Bildobjekten machen?

Ein "normales" Rating-System verlangt geradezu nach Radiobuttons. Deren Value kannst du auch problemlos jederzeit auslesen.

Und die Hintergrundgrafik kannst du ja dort (padding & overflow), oder bei deren Label anbringen.



http://www.pseliger.de/testCases/cus...iobuttons.html
http://www.chriserwin.com/scripts/crir/
__________________
I don't believe in rebirth. Actually, I never did in my whole lives.
Mit Zitat antworten
  #3 (permalink)  
Alt 17-07-2007, 17:53
prego
 PHP Senior
Links : Onlinestatus : prego ist offline
Registriert seit: May 2005
Ort: Herborn
Beiträge: 1.609
prego ist zur Zeit noch ein unbeschriebenes Blatt
Standard

Hi,

danke schonmal für dein Tipps wahsaga. Natürlich hast du recht und das "richtige" Element dafür ist input type=radio.

Hab das auch mittlerweile so gemacht - vielleicht ein bischen umständlich, aber im Grunde funktionierts.

PHP-Code:
function initRating(){

    var 
rating document.getElementById('rating');

    var 
form document.createElement('form');

    for(var 
0rateRangei++){
        var 
input;
        
input document.createElement('input');
        
input.type 'radio';
        
input.name 'rating';

        
input.value i;
        
input.id 'rating_' i;
        
input.style.display 'none';

        
input.onclick doRate;

        
form.appendChild(input);

        var 
label document.createElement('label');
        
label.innerHTML '<span>' + (i+1) + ' Punkt(e)</span>';
        
label.style.cursor 'pointer';

        
label.style.display 'block';
        
label.style.cssFloat 'left';
        
label.getElementsByTagName('span')[0].style.display 'none';
        
label.style.overflow 'hidden';

        
label.style.width rateImgWidth 'px';
        
label.style.height rateImgHeight 'px';

        
label.onmouseover rate;

        
label.htmlFor input.id;

        
label.style.backgroundImage  'url(' rateImg ')';

        
form.appendChild(label);

    }

    
rating.appendChild(form);

}

function 
rate(){

    var 
val document.getElementById(this.htmlFor).value;
    var 
rating this.parentNode.getElementsByTagName('label');

    
resetRating(rating);

    for(var 
0<= vali++){
        
rating[i].style.backgroundPosition rateImgWidth 'px 0px';
    }

    
window.status val;

}

function 
doRate(){
    
alert(this.value);
}

function 
resetRating(rating){
    for(var 
0rating.lengthi++){
        
rating[i].style.backgroundPosition '0px 0px';
    }

Hatte anfangs gedacht, das ich beim Clicken den labels/onchange des Radio's einfach den onsubmit-Eventhander vom Form nehme und damit meine folgende abfackel, aber onsubmit wir ja nur ausgelöst, wenn man auf einen submit-Button klickt.

Wenn noch jemand Tipps hat, als her damit... danke aber schonmal.
Mit Zitat antworten
  #4 (permalink)  
Alt 17-07-2007, 20:17
tontechniker
 PHP Senior
Links : Onlinestatus : tontechniker ist offline
Registriert seit: Jul 2005
Beiträge: 1.972
tontechniker ist zur Zeit noch ein unbeschriebenes Blatt
Standard

Spontan fällt mit jQuery und das Plugin jQuery Star Rating Plugin (evtl. auch hier) dazu ein.
__________________
Die Regeln | rtfm | register_globals | strings | SQL-Injections | []
Mit Zitat antworten
  #5 (permalink)  
Alt 18-07-2007, 10:12
prego
 PHP Senior
Links : Onlinestatus : prego ist offline
Registriert seit: May 2005
Ort: Herborn
Beiträge: 1.609
prego ist zur Zeit noch ein unbeschriebenes Blatt
Standard

Hey tontechniker,

cool - hab ich noch garnichts von gewusst. Da ich aber das Dingen jetzt schon fertig habe, werd ich denke ich das eigene nehmen

Aber fürs nächste mal schau ich mir das jQuery Plugin an.

thnx
Mit Zitat antworten
  #6 (permalink)  
Alt 18-07-2007, 11:00
tontechniker
 PHP Senior
Links : Onlinestatus : tontechniker ist offline
Registriert seit: Jul 2005
Beiträge: 1.972
tontechniker ist zur Zeit noch ein unbeschriebenes Blatt
Standard

Zitat:
Da ich aber das Dingen jetzt schon fertig habe, werd ich denke ich das eigene nehmen
Hab mir die letztens mal angeschaut und dachte deswegen dran - über jQuery hat man dort halt eine komplette Trennung zwischen HTML und Javascript (Rating auch ohne JS möglich).
__________________
Die Regeln | rtfm | register_globals | strings | SQL-Injections | []
Mit Zitat antworten
Antwort

Lesezeichen


Aktive Benutzer in diesem Thema: 1 (Registrierte Benutzer: 0, Gäste: 1)
 

Themen-Optionen
Thema bewerten
Thema bewerten:

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are an


PHP News

ebiz-trader 7.5.0 mit PHP7 Unterstützung veröffentlicht
ebiz-trader 7.5.0 mit PHP7 Unterstützung veröffentlichtDie bekannte Marktplatzsoftware ebiz-trader ist in der Version 7.5.0 veröffentlicht worden.

28.05.2018 | Berni

Wissensbestand in Unternehmen
Wissensbestand in UnternehmenLebenslanges Lernen und Weiterbilden sichert Wissensbestand in Unternehmen

25.05.2018 | Berni


 

Aktuelle PHP Scripte

PHP Server Monitor

PHP Server Monitor ist ein Skript, das prüft, ob Ihre Websites und Server betriebsbereit sind.

11.09.2018 Berni | Kategorie: PHP/ Security
PHP WEB STATISTIK ansehen PHP WEB STATISTIK

Die PHP Web Statistik bietet Ihnen ein einfach zu konfigurierendes Script zur Aufzeichnung und grafischen und textuellen Auswertung der Besuchern Ihrer Webseite. Folgende zeitlichen Module sind verfügbar: Jahr, Monat, Tag, Wochentag, Stunde Folgende son

28.08.2018 phpwebstat | Kategorie: PHP/ Counter
Affilinator - Affilinet XML Produktlisten Skript

Die Affilinator Affilinet XML Edition ist ein vollautomatisches Skript zum einlesen und darstellen der Affili.net (Partnerprogramm Netzwerk) Produktlisten und Produktdaten. Im Grunde gibt der Webmaster seine Affilinet PartnerID ein und hat dann unmittelb

27.08.2018 freefrank@ | Kategorie: PHP/ Partnerprogramme
 Alle PHP Scripte anzeigen

Alle Zeitangaben in WEZ +2. Es ist jetzt 12:17 Uhr.