[html] bild über schrift

ich bau grad zur jux und tollerei ein lotto. da checkboxen relativ fad sind, wollte ich das anders lösen, indem ich eine tabelle mach mit 45 kasterl, und wenn man draufklickt, dann erscheint ein rotes kreuzerl (zu sehen hier).

hier hab ich es gelöst, indem ich ein background-image erstellt hab, und vor diesem einfach ein leeres gif (spacer.gif) durch das hackerl (x.gif) austausch.

nur ist das recht umständlich, weil ich müsst mich jetzt hinsetzen und 45 hintergrundbilder erstellen - relativ mühsam. jetzt hab ich mir überlegt, dass in dem tabellenfeld eine zahl steht und man drüber ein div "aufspannen" könnte (position: absolute?), in dem dann die bilder getauscht werden. nur hab ich noch nie mit divs gearbeitet (ja, schande über mich...) und wüsste gerne a. ob das geht und b. wie das geht.

die antwort hilft mir ehrlich wenig...

soweit - wie der link zu selfhtml - war ich auch schon und ich bräuchte halt eben die attribute, damit das div in jedem tabellenfeld total ausgefüllt ist (afair macht position: absolute das nicht - da müsste ich immer die position mit margin angeben...)

In der Zelle machst ein DIV mit position: relative, dann schreibst die Zahl hin, danach noch ein DIV mit position absolute top/left 0 und darin das Bild, dass wird dann ueber der Zahl angezeigt:

Code:

<table border="1">
	<tr>
		<td>
			<div
			style="width: 20px; height: 20px;
			text-align: center; position: relative; cursor: pointer;"
			onclick="
				var domDiv = document.getElementById('bild');
				if (domDiv.style.display == 'block') {
					domDiv.style.display = 'none';
				} else {
					domDiv.style.display = 'block';
				}
			">
				1
				<div id="bild"
					style="position: absolute; top: 0; left: 0; display: none;">
					<img src="http://www.8ung.at/tommi/lotto/x.gif">
				</div>
			</div>
		</td>
	</tr>
</table>

Warum position: relative und darin position: absolute benoetigt wird, steht hier http://www.w3.org/TR/CSS21/visuren.html#q28 , der Paragraph unter dem Bild.

thx rektal... good work

aber eine frage hab ich:
bei selfhtml.de steht: "block = Erzwingt einen Block - das Element erzeugt eine neue Zeile."

ist hier neue zeile als "\n" oder als "<br />" gemeint?


und nochwas: bei <img> ist das attribut "alt" erforderlich (siehe hier)

Zitat von Rektal

Dein Syntax ist ein Relikt fuer href="javascript:" das man schon seit 4 Jahren nicht mehr verwenden sollte.

könntest mir das mal bitte genauer erklären?

was is so schlimm dran wenn ich nen href="javascript:void(0)" mach?
oder was soll ich stattdessen machen?

Was macht ein Browser der kein Javascript kann? Wie sollen andere Computergesteuerte Software diesen Link interpretieren? Warum bekommst man als Benutzer dass Gefuehl, es wird einem etwas verschleiert wenn man in die Browser-Statusleiste sieht und dort nur javascript:void(0) sieht?

javascript:void(0) ist zum Glieck nicht ganz so daemlich wie href="#", laeuft einem heutzutage immer noch ueber den Weg.

Warum ists so schwer, direkt den Link dort hin zu setzen, wo man hinzeigen will, den Rest in dort erledigen, wo es Sinn macht: im Javascript-Handler.

Beispiel:
<a href="diese_seite_im_popup" target="popup" onclick="window.open(this.href, this.target, ''); return false;">Oeffne mich im Popup</a>

Wenn hier Javascript aus irgendeinem Grund versagt: nix passiert, die Seite geht trotzdem auf und auch noch in einem neuen Fenster. Das wird nicht 1:1 dem Popup entsprechen, aber man hat keinen Veraergerten Benutzer der sich wunder, warum nix geht.

Schon mal die Spezifikation gelesen, was href machen sollte? -> http://www.w3.org/TR/REC-html40/str....html#adef-href

Zitat

href = uri [CT]
This attribute specifies the location of a Web resource, thus defining a link between the current element (the source anchor) and the destination anchor defined by this attribute.

Mit href="javascript usw. kann ich das nicht nachvollziehen.

Ja ich weiss, lesen ist schwer. Von 10 Bewerbern wissen 5 nicht , dass es sowas gibt, 4 wissen nicht wo, und der einer ders weiss hat noch nie reingeschaut. Und solche Leute wollen Jobs im Webentwicklungsbereich? -> Go Home oder zeig Lernbereitschaft. Meine Meinung.

Weiterfeuhrende Lektuere:
http://tom.me.uk/scripting/popups.asp und google

Zitat von userohnenamen

Zitat von Viper780

@ccr der handymarkt in ÖSterreich is a graus, sogar bei one oder A1 habens nur schrott!

ich hol ma jährlich mei telering gutschrift (da ich auf mei nummer und den doch end so schlechten vertrag ned verzichten mag) und kauf ma die Handys gebracuht in deutschland.

Du verwendest einen Link, wenn du eine Relation von diesem Dokument zu einer anderen Resource machst. De-facto machst du dass hier nicht, du willst nur per Scripting irgendwas zu Rande bringen.

Ja mir faellt auch auf, dass viele Leute mit dem Auge HTML umsetzen, daher kommen auch die vielen Table-Layouts: ich nehms, weils so aussieht.

Dass es aber verkehrt und falsch ist, und es noch anderen Wege und Moeglichkeiten gibt, ueber den Tellerrand wollen viele nicht blicken.

Cursor = Praesentation = CSS.

Link = Relation = Eine Resource mit einer anderen verbinden = was ganz anderes. Es bedient sich der Praesentation eines Cursors, "macht" aber etwas anderes.