Supportnet / Forum / Webseiten/HTML
Hilfe bei einem script
Frage
Hallo ihr lieben,
ich arbeite seit ein paar Wochen an meiner Homepage.
Bei einer Sache komme ich aber nicht weiter... Ich versuch euch einmal zu beschreiben was ich machen möchte :
Also im Prinzip möchte ich ein Bild mit vielen Kästchen überdecken... Jeder einzelne Pixel des Bildes soll mit einem Kästchen überdeckt werden. Das dürften dann zum Schluss so um die 10000 Kästchen oder Pixel sein . Wenn der Besucher mit der Maus auf einen Pixel geht, so soll sich die Farbe ändern.Der Besucher soll sich dann einen noch nicht aufgedeckten Pixel aussuchen können und wenn er das getan hat wird er auf eine neue Seite geleitet auf der in etwa sowas steht: "Herzlichen Glückwunsch, du hast dich für Pixel "X" entschieden. Löse folgende Aufgabe...." ( Jedes Kästchen soll einen individuellen Namen "X" haben der dann auf dieser Seite in diesem Zusammenhang erscheint) Die Aufgabe soll erstmal keine Rolle spielen. Wenn der Benutzer die Aufgabe gelöst hat, möchte ich dann,wenn ich möchte, den Pixel "X" aufdecken bzw dieses Kästchen verschwinden lassen, sodass man einen Teil des Bildes schonmal sehen kann.... So ist dann das Bild nach 10000 bestandenden Aufgaben komplett sichtbar. Wie kann ich das vernünftig anstellen?? Ich möchte nicht 10000 Kästchen bzw Pixel einzeln verlinken^^ Wenn es möglich ist möchte ich dieses Project selbst programmieren oder programmieren lassen(wenn es nicht allzu teuer ist ^^) Ich hoffe ich habe es halbwegs verständlich formuliert^^. Könnt ihr mir da weiter helfen? Danke im voraus!!
Antwort 1 von rfb
Was steht denn zur Verfügung? PHP? JavaScript wäre - aufgrund der Nichtvorhersehbarkeit dessen, was userseitig damit machbar ist, immer der letzte Ausweg.
Wie auch immer:
2 Forschleifen ineinander verschachtelt, die äußere geht durch die Bildzeilen, die innere durch die Spalten und aus den beiden Indizes wird der Link der Rätselseite kreiert (y-te Zeile, x-te Spalte: raetselxy.htm) und ein entsprechender area-Tag angelegt:
<area shape="rect" coords="x,y,x,y" href="raetselxy.htm" alt="raetselxy.htm">
und dynamisch in die Seite geschrieben.
Wie auch immer:
2 Forschleifen ineinander verschachtelt, die äußere geht durch die Bildzeilen, die innere durch die Spalten und aus den beiden Indizes wird der Link der Rätselseite kreiert (y-te Zeile, x-te Spalte: raetselxy.htm) und ein entsprechender area-Tag angelegt:
<area shape="rect" coords="x,y,x,y" href="raetselxy.htm" alt="raetselxy.htm">
und dynamisch in die Seite geschrieben.
Antwort 2 von Unwissenderder
Danke für die schnelle Antwort. hmm,.. ich dachte da an einen html oder script code. Leider bin ich noch ein blutiger Anfänger in diesem Gebiet. Das mit dem area-Tag verstehe ich, denk ich zumindest^^, aber wie mache ich denn diese 2 Forschleifen und verschachtel diese? Zitat:"JavaScript wäre - aufgrund der Nichtvorhersehbarkeit dessen, was userseitig damit machbar ist, immer der letzte Ausweg." Meinst du damit dass man die Aufgabe umgehen bzw schummeln kann und das bild schon vorher sieht, wenn man sich geschickt anstellt?
Danke
Danke
Antwort 3 von rfb
Hoppla, das mit der Farbänderung hatte ich glatt übersehen. dann wird's komplizierter. Viel komplizierter.
Es kommt dazu noch ein slice-Programm, das dir dein Bild zerlegt und gleichzeitig den Anzeige-Code generiert. Statt der area-tags brauchst du normale Links, du musst also den Anzeige-Code dann nochmals ändern. Per JavaScript nicht sooo das große Problem, mit PHP dennoch sinnvoller. Die Slice-Programme bauen aus den x-1000 Einzelbildchen eine Tabelle und die ergibt dann wieder das Bild, du müsstest in jede Tabellenzelle einen Link packen (bei JavaScript wäre es nur ein onclick-Attribut in jeder Tabellenzelle). Außerdem musst du natürlich anfänglich alle Pixel durch ein kleines schwarzes ersetzen und erst durch das Anklicken austauschen. Spätestens hier kommt leider doch JavaScript ins Spiel.
JavaScript hat den Nachteil, dass der User festlegt, was das Programm darf und was nicht. Es ist daher extrem unzuverlässig. Aber bei deinem Problem wohl unvermeidlich.
Besorg dir erst einmal ein slice-Programm, zerstückel dein Bild und danns ehen wir hier weiter wenn du den Anzeige-Code hast.
Es kommt dazu noch ein slice-Programm, das dir dein Bild zerlegt und gleichzeitig den Anzeige-Code generiert. Statt der area-tags brauchst du normale Links, du musst also den Anzeige-Code dann nochmals ändern. Per JavaScript nicht sooo das große Problem, mit PHP dennoch sinnvoller. Die Slice-Programme bauen aus den x-1000 Einzelbildchen eine Tabelle und die ergibt dann wieder das Bild, du müsstest in jede Tabellenzelle einen Link packen (bei JavaScript wäre es nur ein onclick-Attribut in jeder Tabellenzelle). Außerdem musst du natürlich anfänglich alle Pixel durch ein kleines schwarzes ersetzen und erst durch das Anklicken austauschen. Spätestens hier kommt leider doch JavaScript ins Spiel.
JavaScript hat den Nachteil, dass der User festlegt, was das Programm darf und was nicht. Es ist daher extrem unzuverlässig. Aber bei deinem Problem wohl unvermeidlich.
Besorg dir erst einmal ein slice-Programm, zerstückel dein Bild und danns ehen wir hier weiter wenn du den Anzeige-Code hast.