Veröffentlicht 17. Juli 200817 j hallo leutz, also folgendes problem.ich habe ein pixelraster und möchte es per ajax machen,das man jedes pixelkästchen makieren kann und dann ein feld erscheint wo denn infos drin stehen... wär cool wenn ihr mir helfen könnt
18. Juli 200817 j Was hast du bisher gemacht? Woran bist du gescheitert? Wie weit gehen überhaupt deine AJAX-Kenntnisse? Oder erwartest du, dass dir jemand eine fertige Lösung präsentiert?
18. Juli 200817 j ich bin grad dabei javascript zu lernen(am anfang)...kann ich das überhaupt mit einer jpg datei,wo die pixelkästchen drauf sind(10x10)gesamtgröße der jpg:1000x2000 machen???also im moment hab ich nur das raster.jpg...also ein script mit erklärung wäre nicht schlecht...hab auch schon gegooglet,find aber keins...
18. Juli 200817 j Wiederholung: - was hast du bisher gemacht? - Was willst du eigentlich das dein Script tut?
18. Juli 200817 j bisher noch garnichts,weil ich wie gesagt nich weiß ob das mit einer einzigen*.jpg datei funktioniert.Das script soll bei einem maus klick das angeklickte pixel kästchen makieren und bei einem klick auf ein anderes pixelkästchen(das waagerecht oder senkrecht zum anderen liegt) sollen die ganzen kästchen da zwischen auch makiert werden. siehe Million Pixel Homepage www.pixelklicks.de
18. Juli 200817 j Wenn du schon eine Beispielseite hast, schau dir doch die Quellcodes da mal an, vielleicht findest du dann eine Lösung für das Clientseitige (also den JS Teil vom AJAX)
18. Juli 200817 j Also... ich hab mir die Seite mal angesehen. Ich denke du meinst den kasten, der dort langsam horizontal und vertikal läuft und in dem du einen Bereich markieren kannst. Dazu brauchst du kein Ajax, das kannst du einfach mit JavaScript lösen. Definiere eine Tabelle mit X Spalten breite und Y Zeilen Höhe. Jede Zelle bekommt eine ID wie z.B. id="sX_zY" (X und Y stehen dabei für die Spalten bzw. Zeilennummer) damit hast du dann alle Zellen eindeutig in ihrer Position in der Tabelle gekennzeichnet. Beim klick auf eine dieser zellen übergibst du X und Y position an eine Funktion, und merkst es dir in einer Variablen als Punkt 1 Beim 2. klick das selbe nur eben, dass du dann Punkt 2 hast Mit den werten für Punkt 1 und 2 hast du dann einen Bereich, den du in einer schleife durchlaufen, und dem entsprechend die Zellen farbig hervorheben kannst.
18. Juli 200817 j Sicher, grade mal fertig gemacht <html> <head> <style type="text/css"> .normal { background-color: #cccccc; height: 20px; width: 20px; } .aktiv { background-color: #ffcccc; height: 20px; width: 20px; } </style> <script language="javascript"> var p1X = null; var p1Y = null; var p2X = null; var p2Y = null; function setzePunkt(px, py) { if ((p1X == null) && (p1Y == null)) { p1X = px; p1Y = py; document.getElementById('s'+px+'_z'+py).className = 'aktiv'; } else { p2X = px; p2Y = py; markiereBereich(); } } function markiereBereich() { if (p1X > p2X) { pTemp = p1X; p1X = p2X; p2X = pTemp; } if (p1Y > p2Y) { pTemp = p1Y; p1Y = p2Y; p2Y = pTemp; } for (x = p1X; x <= p2X; x++) { for (y = p1Y; y <= p2Y; y++) { document.getElementById('s'+x+'_z'+y).className = 'aktiv'; } } } </script> </head> <body> <table style="border: 1px solid #000000;"> <tr> <td id="s0_z0" class="normal" onclick="setzePunkt(0, 0);"> </td> <td id="s1_z0" class="normal" onclick="setzePunkt(1, 0);"> </td> <td id="s2_z0" class="normal" onclick="setzePunkt(2, 0);"> </td> <td id="s3_z0" class="normal" onclick="setzePunkt(3, 0);"> </td> <td id="s4_z0" class="normal" onclick="setzePunkt(4, 0);"> </td> </tr> <tr> <td id="s0_z1" class="normal" onclick="setzePunkt(0, 1);"> </td> <td id="s1_z1" class="normal" onclick="setzePunkt(1, 1);"> </td> <td id="s2_z1" class="normal" onclick="setzePunkt(2, 1);"> </td> <td id="s3_z1" class="normal" onclick="setzePunkt(3, 1);"> </td> <td id="s4_z1" class="normal" onclick="setzePunkt(4, 1);"> </td> </tr> <tr> <td id="s0_z2" class="normal" onclick="setzePunkt(0, 2);"> </td> <td id="s1_z2" class="normal" onclick="setzePunkt(1, 2);"> </td> <td id="s2_z2" class="normal" onclick="setzePunkt(2, 2);"> </td> <td id="s3_z2" class="normal" onclick="setzePunkt(3, 2);"> </td> <td id="s4_z2" class="normal" onclick="setzePunkt(4, 2);"> </td> </tr> <tr> <td id="s0_z3" class="normal" onclick="setzePunkt(0, 3);"> </td> <td id="s1_z3" class="normal" onclick="setzePunkt(1, 3);"> </td> <td id="s2_z3" class="normal" onclick="setzePunkt(2, 3);"> </td> <td id="s3_z3" class="normal" onclick="setzePunkt(3, 3);"> </td> <td id="s4_z3" class="normal" onclick="setzePunkt(4, 3);"> </td> </tr> <tr> <td id="s0_z4" class="normal" onclick="setzePunkt(0, 4);"> </td> <td id="s1_z4" class="normal" onclick="setzePunkt(1, 4);"> </td> <td id="s2_z4" class="normal" onclick="setzePunkt(2, 4);"> </td> <td id="s3_z4" class="normal" onclick="setzePunkt(3, 4);"> </td> <td id="s4_z4" class="normal" onclick="setzePunkt(4, 4);"> </td> </tr> </table> </body> </html> gestestet im IE
18. Juli 200817 j ja so was mein ich... also muss ich das in einer tabelle machen...hatte nämlich eigentlich vor wie gesagt ein jpg datei zu nehmen...achso wie krieg ich das jetzt hin das die kästchen auch 10x10 groß sind...hab das im css schon height und width auf 10 gemacht...is aber immer noch kein quadrat
18. Juli 200817 j ersetz einfach das durch ein transparentes gif der größe 1px x 1px dann kannst du die Zellen bis auf 1 px schrumpfen (natürlich nur wenn du cellpadding auch auf 0 setzt. Grafiken direkt zu schreiben ist immer ein wenig aufwendiger. hier könnte man z.B. mit einer imagemap arbeiten, wo man ja eh X und Y position hat. Beim setzen des 2. Punktes, müsstest du jedoch die grafik neu erstellen, oder halt mit einem Java-Applett arbeiten.
18. Juli 200817 j erstmal schon mal danke könntest du mir auch sagen wie ich noch während des markierren immer ein kleines fenster da hab wo drin steht wieviel pixelkästchen ich ausgewählt hab und welche ???
18. Juli 200817 j du speicherst alle markierten Koordinaten in einem Objekt und füllst z.B. ein Div-Layer mittels getElementById() und .innerHTML mit dem Text den du anzeigen willst.
18. Juli 200817 j Jop, hab den Code mal ein wenig erweitert. <html> <head> <style type="text/css"> .normal { background-color: #cccccc; height: 20px; width: 20px; } .aktiv { background-color: #ffcccc; height: 20px; width: 20px; } </style> <script language="javascript"> var p1X = null; var p1Y = null; var p2X = null; var p2Y = null; var zeigen = true; function setzePunkt(px, py) { if ((p1X == null) && (p1Y == null)) { p1X = px; p1Y = py; document.getElementById('s'+px+'_z'+py).className = 'aktiv'; } else { p2X = px; p2Y = py; markiereBereich(); zeigen = false; zeigeInfo(px, py, 1); } } function markiereBereich() { if (p1X > p2X) { pTemp = p1X; p1X = p2X; p2X = pTemp; } if (p1Y > p2Y) { pTemp = p1Y; p1Y = p2Y; p2Y = pTemp; } for (x = p1X; x <= p2X; x++) { for (y = p1Y; y <= p2Y; y++) { document.getElementById('s'+x+'_z'+y).className = 'aktiv'; } } } function zeigeInfo(px, py, flag) { if (((zeigen == true) && (p1X != null) && (p1Y != null)) || (flag == 1)) { spalten = 0; zeilen = 0; if (p1X > px) { spalten = p1X - px; } else { spalten = px - p1X; } if (p1Y > py) { zeilen = p1Y - py; } else { zeilen = py - p1Y; } gesamt = (spalten + 1) * (zeilen + 1); document.getElementById('info').innerHTML = 'gewählte Pixel = '+gesamt+'<br>von Zelle: '+p1X+', '+p1Y+'<br>bis Zelle: '+px+', '+py; } } </script> </head> <body> <div id="info"> gewählte Pixel = 0<br>von Zelle: <br>bis Zelle: </div> <table style="border: 1px solid #000000;"> <tr> <td id="s0_z0" class="normal" onclick="setzePunkt(0, 0);" onmouseover="zeigeInfo(0, 0, 0);"> </td> <td id="s1_z0" class="normal" onclick="setzePunkt(1, 0);" onmouseover="zeigeInfo(1, 0, 0);"> </td> <td id="s2_z0" class="normal" onclick="setzePunkt(2, 0);" onmouseover="zeigeInfo(2, 0, 0);"> </td> <td id="s3_z0" class="normal" onclick="setzePunkt(3, 0);" onmouseover="zeigeInfo(3, 0, 0);"> </td> <td id="s4_z0" class="normal" onclick="setzePunkt(4, 0);" onmouseover="zeigeInfo(4, 0, 0);"> </td> </tr> <tr> <td id="s0_z1" class="normal" onclick="setzePunkt(0, 1);" onmouseover="zeigeInfo(0, 1, 0);"> </td> <td id="s1_z1" class="normal" onclick="setzePunkt(1, 1);" onmouseover="zeigeInfo(1, 1, 0);"> </td> <td id="s2_z1" class="normal" onclick="setzePunkt(2, 1);" onmouseover="zeigeInfo(2, 1, 0);"> </td> <td id="s3_z1" class="normal" onclick="setzePunkt(3, 1);" onmouseover="zeigeInfo(3, 1, 0);"> </td> <td id="s4_z1" class="normal" onclick="setzePunkt(4, 1);" onmouseover="zeigeInfo(4, 1, 0);"> </td> </tr> <tr> <td id="s0_z2" class="normal" onclick="setzePunkt(0, 2);" onmouseover="zeigeInfo(0, 2, 0);"> </td> <td id="s1_z2" class="normal" onclick="setzePunkt(1, 2);" onmouseover="zeigeInfo(1, 2, 0);"> </td> <td id="s2_z2" class="normal" onclick="setzePunkt(2, 2);" onmouseover="zeigeInfo(2, 2, 0);"> </td> <td id="s3_z2" class="normal" onclick="setzePunkt(3, 2);" onmouseover="zeigeInfo(3, 2, 0);"> </td> <td id="s4_z2" class="normal" onclick="setzePunkt(4, 2);" onmouseover="zeigeInfo(4, 2, 0);"> </td> </tr> <tr> <td id="s0_z3" class="normal" onclick="setzePunkt(0, 3);" onmouseover="zeigeInfo(0, 3, 0);"> </td> <td id="s1_z3" class="normal" onclick="setzePunkt(1, 3);" onmouseover="zeigeInfo(1, 3, 0);"> </td> <td id="s2_z3" class="normal" onclick="setzePunkt(2, 3);" onmouseover="zeigeInfo(2, 3, 0);"> </td> <td id="s3_z3" class="normal" onclick="setzePunkt(3, 3);" onmouseover="zeigeInfo(3, 3, 0);"> </td> <td id="s4_z3" class="normal" onclick="setzePunkt(4, 3);" onmouseover="zeigeInfo(4, 3, 0);"> </td> </tr> <tr> <td id="s0_z4" class="normal" onclick="setzePunkt(0, 4);" onmouseover="zeigeInfo(0, 4, 0);"> </td> <td id="s1_z4" class="normal" onclick="setzePunkt(1, 4);" onmouseover="zeigeInfo(1, 4, 0);"> </td> <td id="s2_z4" class="normal" onclick="setzePunkt(2, 4);" onmouseover="zeigeInfo(2, 4, 0);"> </td> <td id="s3_z4" class="normal" onclick="setzePunkt(3, 4);" onmouseover="zeigeInfo(3, 4, 0);"> </td> <td id="s4_z4" class="normal" onclick="setzePunkt(4, 4);" onmouseover="zeigeInfo(4, 4, 0);"> </td> </tr> </table> </body> </html>
18. Juli 200817 j sorry, aber gerade als totaler neuling solltest du dringend lernen dir das selbst bei zu bringen. Wenn du dann nicht weiterkommst, dann kannst du fragen, aber es wird dir nicht immer jemand deinen Code vortippen (an sich hast du glück das tweety hier so viel zeit hat) Es ist ja nicht so das du der erste bist oder das was du lernen willst eine Geheime Technologie ist, Material gibt es im internet zu hauf.
18. Juli 200817 j Galileo Computing :: JavaScript und AJAX Sorry, aber ich kann nicht verstehen wo der Lerneffekt ist, wenn man alles vorgegeben bekommt. Deshalb der Link. Lesen und Lernen
21. Juli 200817 j Sorry, aber ich kann nicht verstehen wo der Lerneffekt ist, wenn man alles vorgegeben bekommt. Deshalb der Link. Lesen und Lernen Also ich muss sagen, dass ich vor meiner Ausbildung auch viel gelernt habe, grade WEIL ich mir viele codes angesehen habe, und versucht habe zu verstehen, was diese machen. Darum habe ich ja auch immer zuerst einen ansatz gepostet, und später erst den Code ^^ Ok vielleicht hätte ich ihn etwas mehr zapeln lassen sollen, aber sowas tippste ja mal eben in 5 minuten runter, also nicht wirklich zeitintensiv Mache es ja quasi täglich, nur halt in ganz anderem Umfang. Aber habt schon recht... alles vorkauen zu lassen, ist nicht gut, darum ist der Code ja auch noch suboptimal... (Testen dann seht ihr die Bugs ) Für mich war lernen immer sehen ausprobieren, umschreiben, verstehen
Archiv
Dieses Thema wurde archiviert und kann nicht mehr beantwortet werden.