[Erledigt] td-Element mit Bild überlagern

EG2011 · 04.09.2011, 17:07

Moin,

Ich habe eine Tabelle mit mehreren td-Elementen.
Jedes td-Element besitzt bereits eine textNode (siehe Code).
Nun möchte ich diese node jedoch verbergen indem ich ein Bild darüber lege.

Folgende DOM-Struktur habe ich hierzu angelegt:

Code:

				var td = document.createElement("td");
				var tdtext = document.createTextNode(neu[i]);
				td.appendChild(tdtext);
				// Mit Hütchen-Bild überlagern
				var huetchen = document.createElement('img');
				huetchen.src = "images/huetchen.jpg";
				with (huetchen.style) {
					position="absolute";
					padding="0px";
					top="0px";
					left="0px";
					width="100%";
					height="100%";
				}
				td.appendChild(huetchen);
				var tr = document.getElementById(zaehler)
				tr.appendChild(td);

Leider überlagert das Bild meine gesamte Seite und nicht nur das kleine td-Element. Lasse ich die style-Einstellungen weg, so wir das Bild korrekterweise im td-Element eingefügt (überlagert natürlich nur nix).

Hat jemand einen Lösungsvorschlag?

Gruß, Seb

ChrisB · 04.09.2011, 17:11

Zitat:

Zitat von EG2011

Folgende DOM-Struktur habe ich hierzu angelegt:

Das ist keine „DOM-Struktur“, sondern JavaScript-Cocde.
Bitte gewöhne dir ab, aus Faulheit oder warum auch immer nicht einfach kurz verbal zu beschreiben, was Sache ist, sondern immer nur Code hin zu klatschen.

Zitat:

Hat jemand einen Lösungsvorschlag?

Beschäftige dich damit, wie absolute Positionierung funktioniert.
Wonach sie sich ausrichtet, kannst du bei SELFHTML nachlesen.

EG2011 · 04.09.2011, 17:20

Starke Antwort.

Postet man keinen Code, so wird man als Faulpelz beschimpft, der nicht selber entwickeln, sondern entwickeln lassen will.
Postet man Code, so wird man als Faulpelz bezeichnet, weil zu wenig Text drum herum steht.

Okay, nächstes Mal gibts nen 4 Seiten Roman, den dann hoffentlich keiner durchliest...

Zitat:

Das ist keine „DOM-Struktur“, sondern JavaScript-Cocde.

Du gehörst wohl auch zu denen, die sich darüber streiten, ob JavaScript objektorientiert oder objektbasiert ist...

Gruß, Seb

ChrisB · 04.09.2011, 17:24

Zitat:

Zitat von EG2011

Postet man Code, so wird man als Faulpelz bezeichnet, weil zu wenig Text drum herum steht.

Es sollte nicht zu viel verlangt sein, dass du kurz verbal beschreibst, was du erreichen möchtest und mit welcher HTML-Struktur und welchem CSS.
Das JavaScript, mit dem du das ganze letztendlich erzeugst/Eigenschaften setzt, ist dabei erst mal vollkommen uninteressant.

Und ja, wenn du stattdessen einfach nur Code hier reinklatschtst, „hier, schaut euch das und findet gefällgst selber heraus, was ich damit eigentlich bezwecken will“ - dann bist du in der Hinsicht ein Faulpelz.

Wenn du hier Hilfe bekommen willst – dann leiste bitte wenigstens in vernünftigem Maß deinen eigenen Anteil.

EG2011 · 04.09.2011, 17:32

Dann sag doch einfach, dass anhand meiner Beschreibung noch nicht ganz klar ist was genau gemeint ist und alles ist gut. Dann rück ich auch sofort mehr Infos raus. Will nur eben eine ellenlange Prosa vermeiden, die eher abschreckende Wirkung hinterlässt und von keinem gelesen wird.

ontopic:
Ich habe eine Tabelle mit einer tr und eben mehreren td.
Jedes dieser td hat - wie man im Code sieht - eine TextNode in der eine Zahl steht.
Nun möchte ich diese Zahl aber durch ein Bild verbergen/überlagern, sodass der User sie nicht sieht.
Dazu lege ich einen weiteren Knoten des Typs img an.

Das Ganze soll letztlich so eine Art Memory-Spiel werden. Der User klickt auf das Bild in einer td, dieses verschwindet und er sieht die Zahl darunter.

Hilft das schonmal weiter in Sachen erklärung?

ChrisB · 04.09.2011, 17:39

Zitat:

Zitat von EG2011

Dann sag doch einfach, dass anhand meiner Beschreibung noch nicht ganz klar ist was genau gemeint ist und alles ist gut. Dann rück ich auch sofort mehr Infos raus.

Es geht nicht darum, ob es „nicht klar“ ist, sondern wie viel Mühe du dir gibst, dein Problem anderen Leuten zu beschreiben.
Hingerotzter Code, „da, erklärt sich doch von selber“ empfinde ich dabei als Frechheit.

Zitat:

Ich habe eine Tabelle mit einer tr und eben mehreren td.
Jedes dieser td hat - wie man im Code sieht - eine TextNode in der eine Zahl steht.
Nun möchte ich diese Zahl aber durch ein Bild verbergen/überlagern, sodass der User sie nicht sieht.
Dazu lege ich einen weiteren Knoten des Typs img an.

Das waren jetzt sogar weniger Zeilen, als dein vorher geposteter Scriptcode - nix mit „ellenlanger Prosa“. Also, warum bitte nicht gleich so?

Zum weiteren – siehe meine erste Antwort.

EG2011 · 04.09.2011, 17:56

Zitat:

Es geht nicht darum, ob es „nicht klar“ ist, sondern wie viel Mühe du dir gibst, dein Problem anderen Leuten zu beschreiben.
Hingerotzter Code, „da, erklärt sich doch von selber“ empfinde ich dabei als Frechheit.

Eine sachliche Darstellung bedingt, dass man die Sätze kurz und bündig formuliert.
Die goldene Mitte zwischen zu wenig Text und zu viel ist nicht immer einfach zu finden und wird nicht zuletzt durch das subjektive Empfinden eines jeden Einzelnen beeinflusst. Was dir zu wenig ist ist manch anderem schon zu viel

. Das hat aber nix mit Faulheit zu tun. So, Ende damit.

Ich habe mir gemäß deines Hinweises nun die Beschreibung von position absolute nochmal genau angesehen.
Meine td Elemente haben wohl als default position static, weshalb das Bild zwecks Positionierung auf das body-Element zurückgreift. Wenn ich dem td nun aber position relative oder absolute zuweise komme ich immernoch nicht zum gewünschten Ergebnis. Muss ich die Position Eigenschaft auf tr oder gar table-Ebene ändern?

ChrisB · 04.09.2011, 18:10

Zitat:

Zitat von EG2011

Wenn ich dem td nun aber position relative oder absolute zuweise komme ich immernoch nicht zum gewünschten Ergebnis.

Ja, das war zu erwarten – siehe Beschreibung bzgl. relative unter http://www.w3.org/TR/CSS21/visuren.html#choose-position

EG2011 · 04.09.2011, 18:26

Danke schonmal.

Ich bin jetzt auf folgendes gestoßen:
http://css-tricks.com/8242-absolutel...-a-table-cell/

Da ich in JQuery aber noch nicht den Durchblick habe suche ich gerade noch danach, wie ich das Plugin einbinde.

UPDATE: Habs hinbekommen =).

ChrisB · 04.09.2011, 18:36

Zitat:

Zitat von EG2011

Da ich in JQuery aber noch nicht den Durchblick habe suche ich gerade noch danach, wie ich das Plugin einbinde.

Am besten gar nicht …

Das macht doch nichts weiter, als den Inhalt der Tabellenzelle in ein weiteres DIV zu verpacken (das kann nämlich relativ positioniert werden, und damit als Bezugspunkt für die absolute Positionierung von Nachfahren dienen).
Ein weiteres DIV zu erzeugen, das solltest du aber auch problemlos in deinen bereits vorhandenen Code eingebaut bekommen …

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Thema bewerten
Thema bewerten:

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
Bild in Bild überblenden	mentalman	JavaScript, Ajax und mehr	14	23.05.2011 19:20
imagecreatefromjpeg() "Allowed memory size exhausted"	peter silie	PHP Tipps 2010	17	04.05.2011 14:25
Fusszeile verschwindet, Leerzeile fehlt	ariane	PHP Einsteiger	4	17.04.2011 18:21
[Erledigt] Bild ausgeben solange das Script läuft	favo	PHP-Fortgeschrittene	6	17.09.2010 13:34
[Erledigt] Bild erstellen, speichern und gespeichertes Bild anzeigen	Garog	PHP Tipps 2009	26	11.07.2010 18:01
Element erstellen, in Quelltext einfügen und auf dieses zugreifen können	R4v3r	JavaScript, Ajax und mehr	8	18.12.2009 11:33
Bildeffekte berechnen (Bild in den Hintergrund anschregen)	Frank	PHP-Fortgeschrittene	2	28.11.2009 02:20
Bild in enuem Fenster öffnen?	K3HLIM	JavaScript, Ajax und mehr	6	10.04.2009 20:43
[Erledigt] Bild auf Bild anzeigen bei x/y	Screeze	JavaScript, Ajax und mehr	2	19.01.2009 19:40
Transparentes Bild über Bild legen update gelöst	Broadcast	PHP-Fortgeschrittene	11	04.02.2008 15:27
[Erledigt] Bild aus Datei in Bild einfügen		PHP Tipps 2005-2	1	07.08.2005 23:36
[PHP«Image] Bild in ein anderes Bild einsetzen		PHP Tipps 2005-2	4	07.08.2005 19:39
[Erledigt] Tabelle mit Bild überlagern		PHP Tipps 2005	4	28.04.2005 11:10
Bild größe hat prob mit umbenennung.	JEGO	PHP Tipps 2004	1	08.07.2004 16:30

04.09.2011, 17:07
EG2011 Erfahrener Benutzer Registriert seit: 11.04.2011 Beiträge: 141 PHP-Kenntnisse: Anfänger	[Erledigt] td-Element mit Bild überlagern Moin, Ich habe eine Tabelle mit mehreren td-Elementen. Jedes td-Element besitzt bereits eine textNode (siehe Code). Nun möchte ich diese node jedoch verbergen indem ich ein Bild darüber lege. Folgende DOM-Struktur habe ich hierzu angelegt: Code: var td = document.createElement("td"); var tdtext = document.createTextNode(neu[i]); td.appendChild(tdtext); // Mit Hütchen-Bild überlagern var huetchen = document.createElement('img'); huetchen.src = "images/huetchen.jpg"; with (huetchen.style) { position="absolute"; padding="0px"; top="0px"; left="0px"; width="100%"; height="100%"; } td.appendChild(huetchen); var tr = document.getElementById(zaehler) tr.appendChild(td); Leider überlagert das Bild meine gesamte Seite und nicht nur das kleine td-Element. Lasse ich die style-Einstellungen weg, so wir das Bild korrekterweise im td-Element eingefügt (überlagert natürlich nur nix). Hat jemand einen Lösungsvorschlag? Gruß, Seb


Mister Ad PHP Code Flüsterer Registriert seit: 21.08.2005 Beiträge: 4682 PHP-Kenntnisse: Fortgeschritten

04.09.2011, 17:32
EG2011 Erfahrener Benutzer Registriert seit: 11.04.2011 Beiträge: 141 PHP-Kenntnisse: Anfänger	Dann sag doch einfach, dass anhand meiner Beschreibung noch nicht ganz klar ist was genau gemeint ist und alles ist gut. Dann rück ich auch sofort mehr Infos raus. Will nur eben eine ellenlange Prosa vermeiden, die eher abschreckende Wirkung hinterlässt und von keinem gelesen wird. ontopic: Ich habe eine Tabelle mit einer tr und eben mehreren td. Jedes dieser td hat - wie man im Code sieht - eine TextNode in der eine Zahl steht. Nun möchte ich diese Zahl aber durch ein Bild verbergen/überlagern, sodass der User sie nicht sieht. Dazu lege ich einen weiteren Knoten des Typs img an. Das Ganze soll letztlich so eine Art Memory-Spiel werden. Der User klickt auf das Bild in einer td, dieses verschwindet und er sieht die Zahl darunter. Hilft das schonmal weiter in Sachen erklärung?

04.09.2011, 18:26
EG2011 Erfahrener Benutzer Registriert seit: 11.04.2011 Beiträge: 141 PHP-Kenntnisse: Anfänger	Danke schonmal. Ich bin jetzt auf folgendes gestoßen: http://css-tricks.com/8242-absolutel...-a-table-cell/ Da ich in JQuery aber noch nicht den Durchblick habe suche ich gerade noch danach, wie ich das Plugin einbinde. UPDATE: Habs hinbekommen =). Geändert von EG2011 (04.09.2011 um 18:35 Uhr).