Div mit Gitter überziehen, dass IDs für jQuery-Funktionen bereitstellt

JaffaCoder · 7. August 2011, 22:15

Hallo,
ich suche eine Möglichkeit eine Div mit einem Gitter zu überziehen, dessen Bereiche mir dann die IDs für jQuery Animationen geben.

Klick auf Gitter A1 --> Aktion A wird ausgeführt
....

Jetzt hab ich schon einiges ausprobiert. Immer auf die oberste Div (Divs überlagern) ein Netz gelegt. Einmal per einer durchsichten png-Datei und die jeweiligen Koordinaten dann angegeben und den Areas eine ID gegeben. Hat nicht funktioniert. Dann hab ichs mit einer Tabelle probiert und den einzelnen Zellen auch wieder IDs gegebn... Hat auch wieder nicht funktioniert.

Habt ihr ne Ahnung, wie man das machen könnte?

Torben Brodt · 8. August 2011, 00:58

Also ein Gitter klingt irgendwie nach einer Tabelle. Wenn die Elemente floaten sollen, wenn bestimmte Zellen verschwinden, dann vielleicht doch lieber DIVs.
Aber was konkret hast du mit jquery vor?

"dessen Bereiche mir dann die IDs für jQuery Animationen geben"
ich kann mir hinter dem Satz nichts vorstellen. Was willst du animieren? Wenn das Event selbst die Animation auslöst,kannst du übrigens auch einfach mit einer this Referenz arbeiten und bist nicht auf IDs angewiesen.

<td onclick="$(this).hide()"></td>

JaffaCoder · 8. August 2011, 10:04

Sorry, etwas unverständlich :whistling:

Ich machs mal mit Bildern

Also, ich hab ein Gesamtbild:
[Blockierte Grafik: http://img34.imageshack.us/img34/6891/hauptbild.png]

Über dieses Bild werden später andere PNGs mit exakt den selben Masen gelegt, wie dieses hier:
[Blockierte Grafik: http://img718.imageshack.us/img718/7276/fensteru.png]
Sieht jetzt etwas seltsam aus, da der Hintergrund normalerweise anders ist und fast alle teile des Bildes einen gewissen Alphaanteil haben

Jetzt möchte ich dieses Hauptbild (s.o) in verschiedene Bereiche aufgliedern. Ein Bereich um das Feld "Übersicht" noch eins um "Energie" noch eins um dieses Gatefenster unten rechts.... Auf den Klick dieser einzelnen Bereiche soll dann dieses zweite Bild eingeblendet werden, das vorher nicht sichtbar war. In dieser Div befindet sich dann eine andere Div mit dem Inhalt.

Hoffe so ists verständlich

Torben Brodt · 8. August 2011, 11:14

Hm, aber das Problem daran verstehe ich noch immer nicht. Du willst ja nicht das Spielfeld Gitter überschreiben. Du willst doch einfach nur ein Element über das Spielfeld legen.
Das Element das du platzieren willst, machst du mit position:absolute und fertig.

Und die Menü Buttons haben ja auch nichts in dem Gitter zu suchen, das Menü solltest du genauso mit position:absolute unabhängig vom Spielfeld platzieren.

Lg

JaffaCoder · 8. August 2011, 11:31

Achso,mit position: absolute funktionierts.... Danke :thumbup:

Div mit Gitter überziehen, dass IDs für jQuery-Funktionen bereitstellt

Div mit Gitter überziehen, dass IDs für jQuery-Funktionen bereitstellt

Teilen

Tags