[html] bild über schrift

Seite 1 von 3 - Forum: Coding Stuff auf overclockers.at

URL: https://www.overclockers.at/coding-stuff/html_bild_ueber_schrift_136926/page_1 - zur Vollversion wechseln!

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.

ja das geht
du setzt einfach das div element auf position: absolute und schaltest es auf invisible
bei klick in die tabelle schaltest es auf visible
sollte also kein problem darstellen

http://de.selfhtml.org/html/text/bereiche.htm#block
hier findest mehr über div

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...)

<img src="x.jpg" style="display:none" id="x43">

onClick="javascript: document.tabelle.x45.style.display=inline"

Oder so ähnlich, wenig Schlaf gehabt

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>

Zitat von Sticker

<img src="x.jpg" style="display:none" id="x43">

onClick="javascript: document.tabelle.x45.style.display=inline"

Oder so ähnlich, wenig Schlaf gehabt

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 tomstig

Zitat von mat

sick! ich les deinen post, denk mir ich schau mal ins postkastel und was liegt da drin

Zitat

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.

onclick?

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.

ja das is mir schon klar
aber wenn ich den linkcursor haben will (sinn des void(0) )

hab ned immer lust die ******e per css einzubinden

wenn ihr mir wenigstens sagen könntet was wirklich falsch dran ist bzw. welche probleme auftreten können

edit:
hm ok
ich will jetzt als beispiel nichts verschleiern
angenommen ich habe ein menü, indem ich mit einem onclick per javascript ein kontextmenü aufschalte
in diesem fall würd ich bzw. mach ich ein href:javascript:void(0)

also sollte ich deiner meinung nach komplett auf den href verzichten und den cursor per css erzeugen?

edit2: aber danke für die links, die lösung mit dem popup gefällt mir persönlich ziemlich gut
werd mich mal näher wieder mit dem ganzen befassen und versuchen etwas w3c konformer unterwegs zu sein

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 sagst jetzt hier ich binde nur etwas per script ein
aber ich will dem benutzer ja auch klar machen wenn er drüberfahrt das da noch mehr dahinter steckt
deswegen is imho der cursor dafür schon recht wichtig, allein für die bedienerführung

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.

overclockers.at v4.thecommunity
© all rights reserved by overclockers.at 2000-2025