"Fussballfeld" in HTML mit Rollover

[JME]

Hallo allerseits,
Ich habe mal eine Frage zu einem Projekt welches ich gerade beginne. Mir ist es wichtig verschiedene Meinungen einzuholen damit ich den möglichst effektivsten Arbeitsaufwand habe.

Ersteinmal zum Projekt:
Geplant ist eine Seite in Form von einem Fussballfeld. Dieses Feld soll aus 522 Kästchen bestehen wobei jedes ca. 34x34 px groß ist. Fährt man mit der Maus über solch ein Kästchen so soll ein Popup mit Informationen aufgehen.
Das Fussballfeld wäre also aus 30 Kästchen Horizontal und 20 Kästchen Vertikal.

Die Frage:
Ich habe mir einige Gedanken gemacht, und hatte überlegt dies in Tabellen anzulegen, da ich mit Tabellen jedoch noch nicht soviel Erfahrung habe (weil Boxmodel Benutzer) wollte ich fragen wie groß der Arbeitsaufwand wäre und wie ich dieses am besten Programmiere, auch so das, dass feld später auch noch editiert werden kann.

Ich hoffe das waren nicht zuviele Informationen auf einmal!
Würde mich über eine Antwort freuen! Liebe Grüße JME.

 

[RaZ0oR]

Zu deiner Frage:
Ich würde es auch in Tabellen anlegen, und so kannst du später jede einzelne zelle bearbeiten, also meiner meinung nach das praktischste.
Ich hab mal eine Tabelle als txt date4i hochgeladen, du musst nur noch den border auf 0 stellen und kannst anfangen ;) (musst sie natürlich nicht benutezn^^)

 

[threadi]

Ich würde keine Tabellen verwenden. Habe etwas ähnliche schon mehrmals mit div/css erschaffen. Für beide Fälle würde ich einen normalen Texteditor empfehlen, per Copy&Paste kann man das Grundgerüst relativ schnell fertig bekommen.

Abgesehen davon: die Idee bei jeder Mausberührung ein Popup zu öffnen finde ich schlecht. Zum Einen, weil die meisten Browser solche Popups blocken werden. Zum Anderen würde kein Benutzer mit seiner Maus freiwillig in die Mitte des Feldes gehen da sich hierzu ja bei jedem der Felder die er "überfliegt" immer wieder ein Fenster öffnen würde. Das nervt mit der Zeit

 

[JME]

danke schon mal für die schnellern Antworten!
klar ich denke auch das ein Popup per klick besser wäre, aber das war halt erstmal so der wunsch des "Kunden"...
ist es dann so wenn ich es mit divs mache das ich für jedes Kästchen ein eigenes div anlege? Weil 522 mal copy&paste is ja auch ned soooo ohne ;).
oder gibt es eine andere Möglichkeit?

Die Idee ist halt das man Fussballplatzflächen "adoptieren" kann, damit soll der Fussballverein gefördert werden, man soll per Popup sehen wer welche Flächen gekauft hat, da dies ein relativ wichtiger Gesichtspunkt ist wäre da noch die Frage ob es eine möglichkeit gibt diese Popup blocker zu umgehen... :)
lg J.

 

[threadi]

Du könntest zur Erzeugung auch php verwenden, da legst du nur 1 Mal ein Kästchen an und lässt es dann halt 522mal erzeugen. Im Texteditor geht es natürlich auch - legst einmal an, kopierst z.B. 10 mal, dann markierst du alle 10 und kopiert diese wieder 10 mal - schon haste 100. Bei einem div-Aufbau solltest du nur für jedes Kästchen eine ID vergeben, ich habe bei meinen Projekten diese aus den X- und Y-Koordinaten aufgebaut, kannst aber auch einfach aufsteigende Zahlen nehmen.

Nettes Konzept. Würde an deiner Stelle aber das nicht als Popup sondern als Layer machen. Beispiel: fährst mit der Maus über eines der Felder und rechts vom gesamten Spielfeld wird in einem weiß hinterlegten Rahmen angezeigt wem es gehört. So könntest du auch ein weiteres Problem umgehen: was ist bei Besuchern ohne JavaScript. Die würden das von dir geplante Popup nicht sehen, könnte bei meiner Variante aber auf eines der Felder klicken woraufhin sich das Spielfeld neu aufbaut - aber eben mit der Info zu wem das Feld gehört rechts vom Spielfeld :idea:

 

[JME]

ok, also werde ich es wohl mit divs machen!
mit Layern ansich habe ich leider überhaupt keine erfahrung... aber der Vorschlag ist schonmal wesentlich besser als mit Popups.
Hast du einen tipp wo ich mich mal über Layer schlau machen kann?
(wie z.B. selfhtml)

Nochmal zum div, also siehts dann so aus dass ich 522 divs mache, und diese jeweils dann absolut positionieren muss (also jedes einzelnes) und jedem dann eine id gebe? Diese divs formatiere ich dann über ein css...
>Nur damit ich den Ansatz auch richtig verstehe ;)!

Liebe Grüße JME.

 

[threadi]

Ich würde sie nicht absolute positionieren, das macht mehr arbeit und sieht auch in jedem Browser anders aus vermutlich. Würde die Kästchen mit float aneinanderreihen.

Bei dem Layer musst du glaube ich nur noch wissen wie man deren Inhalt austauscht. Geht bei JavaScript mit innerHTML. Die IDs brauchst du nur, wenn du auch nochmal auf die Kästchen selbst per JavaScript zugreifen willst, ansonsten brauchst du die eigentlich nicht.

 

[JME]

hmm also würde ich einen "Layer mit Inhalt aus einer anderen Datei" bauen und diesen Inhalt über InnerHTML auf jedes Kästchen bezogen per Klick austauschen lassen?
Wenn ja, dann bräuchte ich doch noch für jedes Kästchen eine eigene .html Datei mit den jeweiligen Informationen?

Eine andere Möglichkeit wäre doch noch InnerHTML auf jedes Kästchen selbst zu verwenden oder?

Liebe grüße JME.

 

[RaZ0oR]

Wieso machst du nicht einfach, im jeden div/zellen bereich ein rolloverbild, oder sowas, wenn man über das bild fährt erscheint dann um was es scih handelt und dann beim klick kommst du dann auf die seite wo die infos stehen.

Edit: Ups das steht ja schon da so ungefair

Wenn ja, dann bräuchte ich doch noch für jedes Kästchen eine eigene .html Datei mit den jeweiligen Informationen?

Aber wenn du das vermeiden willst, würde sich php+mysql am besten eigenen

 

[JME]

hehe von php und mysql habe ich leider garkeine ahnung ;)
liebe grüße jme.