Bild neben Inputfeld

[Anonymus]

Hallo,
ich will neben einem Inputfeld ein Bildchen machen, das bei einem Klick eine Javascript-Funktion aufruft.
Das Bild habe ich in einem <a>-Block und der klick wird in einem Script abgefangen.

Komischerweise wird das Bild viel größer dargestellt , als es eigentlich ist. Bzw. es wird nicht größer dargestellt, da es gar nicht in die Größe die ich bei <a> definiert habe passt. Das Bild ist im Original 22 Pixel groß aber erst bei einem <a>-Block der Größe 45x45 wird es komplett angezeigt. So sieht die Zeile aus
<input>...</input> <a href="#" id="button" style="display: inline-block; height: 22px; width: 22px; background: url('./bild.png') no-repeat center center; text-decoration: none;">&nbsp;</a>

Lasse ich display: inline-block weg, wird es, egal welche Größe ich einstelle, als ein 2x15 Pixel (geschätzt) Streifen angezeigt.

Weiß wer, warum es sich anders verhält wie ich es mir vorstelle?

Danke

[ChrisB]

Hi,

Weiß wer, warum es sich anders verhält wie ich es mir vorstelle?

Anhand der dürftigen Beschreibung allein kann ich das nicht zweifelsfrei erkennen.

Ein Online-Beispiel (bitte auf das Wesentliche reduziert) wäre hilfreich, um das ganze nachvollziehen zu können.

MfG ChrisB

[Felix Riesterer]

Lieber Anonymus,

das Bild hat ohne JavaScript keinen Sinn, stimmt's? Dann sollte es auch mittels JavaScript ins Dokument geschrieben werden und ansonsten nicht auftauchen.

Ich stelle mir ein "leeres Element" vor (z.B. <span class="klickbild" onclick="return meineFunktion()"></span>). Mittels CSS wird das Element mit einer Höhe und Breite versehen (sonst ist es null Pixel hoch bzw. breit) und erhält das gewünschte Bild als Hintergrundbild.

Wie Du das nun mittels JavaScript in Dein Dokument bekommst, kann man Dur erst dann erklären, wenn man sieht, wie das bei Dir überhaupt aussieht (siehe ChrisB).

Liebe Grüße,

Felix Riesterer.

[Kai345]

[latex]Mae  govannen![/latex]

Ich stelle mir ein "leeres Element" vor (z.B. <span class="klickbild" onclick="return meineFunktion()"></span>). Mittels CSS wird das Element mit einer Höhe und Breite versehen (sonst ist es null Pixel hoch bzw. breit) und erhält das gewünschte Bild als Hintergrundbild.

Ein Element mit der Funktionalität „anklickbar“? Da würde ich <button…>…</button> wählen.
Ansonsten wie von dir erwähnt per CSS stylen. Auch per JS Eingefügtes darf sematisch sein :)

Stur lächeln und winken, Männer!
Kai