Tag zur Beschriftung für Grafiken gesucht
AirMax
- html
0 AirMax0 Felix Riesterer0 Steel0 AirMax
Hallo selfHTML-ler
Ich bin auf der Suche nach einem passenden HTML-Tag für folgendes Problemchen:
Ich habe eine Grafik, die ich beschriften will. Ich meine jetzt keinen Bilduntertitel, sondern kurz Schlagwörter, die ich mittels CSS absolut "auf" der Grafik positionieren will. Beispiel: Das Bild ist eine Europakarte, auf dem ich die Hauptstädte beschriften will:
<object data="europakarte.jpg" type="image/jpeg" id="objectimg">
<param name="src" value="europakarte.jpg" />
<span class="alt">Europakarte</span>
</object>
Meine Ideen:
<object data="europakarte.jpg" type="image/jpeg" id="objectimg">
<param name="src" value="europakarte.jpg" />
<span class="alt">Europakarte</span>
</object>
<label for="objectimg" class="foo">Berlin</label>
<label for="objectimg" class="foo">Rom</label>
<label for="objectimg" class="foo">Barcelona</label>
'Tschuldigung, bin aus Versehen auf den falschen Knopf gekommen. War noch garnicht fertig. Jetzt geht's noch weiter mit meinen Ideen:
<object data="europakarte.jpg" type="image/jpeg" id="objectimg">
<param name="src" value="europakarte.jpg" />
<span class="alt">Europakarte</span>
</object>
<p class="foo" id="bar1">Berlin</p>
<p class="foo" id="bar2">Rom</p>
<p class="foo" id="bar3">Barcelona</p>
Man könnte natürlich die Namen direkt in die Grafik integrieren. Aber das will ich nicht. Hat jemand eine bessere Idee?
Danke & Gruss
AirMax
Lieber AirMax,
Ich habe eine Grafik,
also <img />
die ich beschriften will.
Das ist momentan noch nicht trivial - leider. Aber in HTML5 soll das besser werden.
Ich meine jetzt keinen Bilduntertitel, sondern kurz Schlagwörter, die ich mittels CSS absolut "auf" der Grafik positionieren will.
Was spricht gegen eine http://de.selfhtml.org/html/grafiken/verweis_sensitive.htm#definieren@title=Image-Map mit <area />-Elementen, die ein befülltes title-Attribut besitzen?
<object data="europakarte.jpg" type="image/jpeg" id="objectimg">
[...]
Das <object />-Element finde ich für diesen Zweck das ungünstigste - wohlgemerkt in einem nicht-HTML5-Kontext. Das mag in HTML5 irgendwann anders sein, aber momentan gehe ich in meiner Argumentation noch immer von HTML4/XHTML1 aus.
> Meine Ideen:
> ~~~html
<label for="objectimg" class="foo">Berlin</label>
> <label for="objectimg" class="foo">Rom</label>
> <label for="objectimg" class="foo">Barcelona</label>
Das <label />-Element hat einen ganz bestimmten http://de.selfhtml.org/html/formulare/strukturieren.htm#label@title=Zweck, das "Beschriften" von Grafiken gehört jedoch definitiv nicht zu seinen Aufgaben.
Liebe Grüße,
Felix Riesterer.
Hi!
Das ist momentan noch nicht trivial - leider. Aber in HTML5 soll das besser werden.
Ich finds nciht so tragisch. Das img kommt in einen Container. Dazu absolut positionierte spans. Fertig. Damit sollte man die spans doch pixelgenau positionieren koennen.
Hallo Felix
Danke für Deine Antwort.
Ich habe eine Grafik,
also <img />
Ja. Ich lese immer, dass <img> ein Auslaufmodell ist. Aber bis dahin ist's wohl noch eine Weile. Erfahrungsgemäss hat <object> auch noch so seine Tücken.
Was spricht gegen eine http://de.selfhtml.org/html/grafiken/verweis_sensitive.htm#definieren@title=Image-Map mit <area />-Elementen, die ein befülltes title-Attribut besitzen?
So kompliziert soll es garnicht werden. Also ohne Verweise und so; einfach nur die Grafik und die passende Beschriftung dazu. Ohne verweissensitive Fläche kann man <area> bestimmt nicht verwende, oder?
Das <label />-Element hat einen ganz bestimmten http://de.selfhtml.org/html/formulare/strukturieren.htm#label@title=Zweck, das "Beschriften" von Grafiken gehört jedoch definitiv nicht zu seinen Aufgaben.
Ja, <label> gilt nur für Formulare. War ja nur mal so ne Idee. Und 5x die gleiche ID für die 5 <label>-Elemente verwenden hätte sowieso nicht funktioniert (das fiel mir aber erst später ein).
Gruss
AirMax
Ja. Ich lese immer, dass <img> ein Auslaufmodell ist.
Wer sagt das?
Aber bis dahin ist's wohl noch eine Weile. Erfahrungsgemäss hat <object> auch noch so seine Tücken.
object hat keine "Tücken", es wird nur absichtlich vernachlässigt und nun sogar zugunsten dämlicher Elemente wie audio, video und embed ad absurdum geführt.
Ja, <label> gilt nur für Formulare. War ja nur mal so ne Idee. Und 5x die gleiche ID für die 5 <label>-Elemente verwenden hätte sowieso nicht funktioniert (das fiel mir aber erst später ein).
Wieso? du kanst 100 label-Elemente mit demselben for-Attribut verwenden und das ist auch völlig ok.
Praktisches Beispiel:
<p><label for="datenweitergabe">Ich bin mit den</label> <a href="bedingungen.html">Bedingungen zur Weitergabe meiner Daten an Dritte</a> <label for="datenweitergabe">einverstanden.</label></p>
Ansonsten würde man bereits beim Klicken des Links eine vorhandene Checkbox mit der ID "datenweitergabe" aktivieren obwohl man das ggf. nicht will.
Hallo Suit,
Ja. Ich lese immer, dass <img> ein Auslaufmodell ist.
Wer sagt das?
Das habe ich falsch ausgedrückt. Es müsste heissen, dass <object> dafür ausgelegt ist, als Kontainer für unterschiedliche Inhalt verwendet zu werden. Das finde ich fortschrittlich.
Ja, <label> gilt nur für Formulare. War ja nur mal so ne Idee. Und 5x die gleiche ID für die 5 <label>-Elemente verwenden hätte sowieso nicht funktioniert (das fiel mir aber erst später ein).
Wieso? du kanst 100 label-Elemente mit demselben for-Attribut verwenden und das ist auch völlig ok.
Das habe ich nicht gewusst. Ich dachte bisher immer, dass "for" nur 1x auf ein Element mit genau dieser ID angewendet werden kann/darf. Wieder schlauer.
Praktisches Beispiel:
<p><label for="datenweitergabe">Ich bin mit den</label> <a href="bedingungen.html">Bedingungen zur Weitergabe meiner Daten an Dritte</a> <label for="datenweitergabe">einverstanden.</label></p>
Ansonsten würde man bereits beim Klicken des Links eine vorhandene Checkbox mit der ID "datenweitergabe" aktivieren obwohl man das ggf. nicht will.
Das mit dem ungewollten Anklicken finde ich plausibel. Ansonsten ist Dein Beispiel echt abgefahren :D
Gruss
Das habe ich falsch ausgedrückt. Es müsste heissen, dass <object> dafür ausgelegt ist, als Kontainer für unterschiedliche Inhalt verwendet zu werden. Das finde ich fortschrittlich.
Fand ich auch - Hixie und seine Google-Recken sehen das aber nicht so.
Fand ich auch - Hixie und seine Google-Recken sehen das aber nicht so.
Chrome & IE6-Verbannung war nur der Anfang. Mal sehen, was noch alles kommt:
Eine neue Dimension von Macht?!
Hi!
Was hast Du gegen ein img mit spans?
Hallo Steel
Was hast Du gegen ein img mit spans?
Nichts! <span> sagt sowieso alles und nichts. Und wenn es eh kein Element für meine Zwecke gibt, wäre es auch garnicht so schlecht. Ich probiers mal.
Gruss
AirMax