tryk på rate midt på siden og kig i popup vinduet.
den orange bar er den det hele handler om. Dem består af 10 billeder som alle repræsentere 1 point hver..
når man kommer ind på siden skal den vise 10 tomme pics. altså 10 stks af dem her: <img src="../gif/rate/tom.jpg" width="10" height="15">
når man trækker musen over billedet nr 5 i rækken skal billede 1-2-3-4 og 5 skifte til henholdsvis billede 1.jpg, 2.jpg osv => 5.jpg så længe man har musen over. ( en mouseover effekt )
når man så trykker på 5 skal de forblive skiftet uden at gå tilbage til tom.jpg.
har selv prøvet at få det til at fungere med php men må opgive nu, da det ikke kan laves ser det ud til i php.. må derfor gå til javasvript som jeg ikke har megen forstand på..
Jeg mener ikke at man begynder at hive php ind i det - det vil kun betyde en rundtur til server og genindlæsning af siden -- hvilket nok ville virke lidt forstyrende...
Jeg er igang med en JS løsning - men giv lige lidt tid :-))
det er kun mouse-over, som virker pt.... man kan ikke klikke på et rate for at låse raten ... er igang med at lave en mouseOut-procedure, som fjerner raten, hvis man rykker musen væk igen...
jo - men hver gang man rykker musen, så skal der loades 10 billeder ind --- og de bliver pt. _HVER_ gang loadet fra serveren - også selvom man måske allerede har alle 11 billeder i hukommelsen...
jo... - men det skal lige knyttes sammen med mit script... tror ikke at det pt er minded på preloadede billeder --- og bemærk at du har en fejl i 6.jpg - (der mangler en bund-linie)
ok -- prøv at kigge nu -- har også lige indført en feature, som gør at man kan se (mens man scroller) hvilken rating, som er valgt på nuværende tidspunkt...
.. derpå kan jeg så submitte det med min knap som ser sådan her ud: <a href="#" onclick="opener.location.href='../index.php?side=artikler_liste&sprog=alle';self.close()" ><img src="../gif/rate/stem.jpg" width="50" height="15" border="0"></a>
hvis du har et hidden field som vi kalder result så kan du overføre værdien med (bruges i onClick funktionen) document.getElementById("result").value = cellId;
men hvis du har flere topics, så skal du have et hidden-felt for hver - f.eks. en topic1rating, topic2rating osv....
yes.... Dvs. at det er nok bare at oprette et Image objekt med den rette source -- man skal ikke til at henvise til ens array, når man så skal bruge billedet ....
jeg har pt. følgende kode... function preloadImgs() { for(i=1; i<=10; ++i) { imgs[i] = new Image(); imgs[i].src = ""+i+".jpg"; } imgs[0] = new Image(); imgs[0].src = "tom.jpg"; }
åbenbart -- men selvom jeg tror at jeg får oprette de forskellige billeder i imgs arrayet, så vælger den stadigvæk at hente billedet ind fra ny på serveren, når jeg bruger pic.src = ""+i+".jpg";
jeg plejer altså jeg skrive i++ og ikke ++i i php.. for(i=1; i<=10; ++i) { <=== skal nok rettes til i++ imgs[i] = new Image(); imgs[i].src = ""+i+".jpg"; <=== hvorfor +i+
om du skriver ++i eller i++ er i denne sammenhæng ligemeget - det handler om pre-increment eller post-increment og om hvilken værdi i skal returnere ...
men som sagt - i denne sammenhæng lige meget - da i ikke bruges til noget i samme statement, som den bliver incremeret...
Har lige lavet nogle ændringer - så det virker mere dynamisk -- men desværre virker det kun i Mozilla pt (hvor jeg foriøvrigt ingen problemer har med preloaderen :-))))) ...
Det handler om at tildele events til et DOM-oprettet element --- Jeg vil i aften finde ud af, hvordan jeg får det til at virke med IE --- men for dem, som har Moz, så kan de jo kigge på linket - og kigge i koden - selv synes jeg at det er er meget rart med en "on-the-fly"-måde at generere rate-bars på :-))
ok ... jeg regner så med at lægge det ud i en selvstændig JS fil, så man bare behøver at inkludere den ...
Og så kom jeg lige på en ide med at de form-felter (input hidden)-felterne dynamisk blev genereret når man trykkede submit - for min fejler i øjeblikket, hvis den ikke kan få fat i f.eks. <input type="hidden" id="raterTopic1Result" ...>
// FØLGENDE FIRE LINIER UDKOMMENTERES HVIS MAN IKKE VIL HAVE RATE-GUIDER r1 = document.getElementById("raterTopic"+topicId+"Rating1"); if( r1.current ) { currentPic = document.getElementById("raterTopic"+topicId+"Rating"+r1.current); currentPic.src = ""+r1.current+".jpg"; }
med
// FØLGENDE FIRE LINIER UDKOMMENTERES HVIS MAN IKKE VIL HAVE RATE-GUIDER r1 = document.getElementById("raterTopic"+topicId+"Rating1"); if( r1.current ) { currentPic = document.getElementById("raterTopic"+topicId+"Rating"+r1.current); currentPic.src = imgs[r1.current].src; }
så kan du omskrive preloadImgs() til function preloadImgs() { for(i=1; i<=10; ++i) { imgs[i] = new Image(); imgs[i].src = "../gif/rate/"+i+"_0.jpg"; } imgs[0] = new Image(); imgs[0].src = "../gif/rate/tom.jpg"; }
Jeg antager at "tom.jpg" fortsætter med at hedde "tom.jpg"
det var ik lige det jeg mente.. det pic som bliver ståede tilbage ved tryk på baren også selvom man rykker musen.. det ene pic ville være fedt hvis det kunne være det pic der hedder fx. fade.jpg der blev loadet..
primært HTML-KIT (www.chami.com) - men også notepad eller UltraEdit --- dvs jeg bruger ganske almindelige notepads
Synes godt om
Ny brugerNybegynder
Din løsning...
Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.
