WuWei: Image-Tag mit Hintergrundbild

moin,

Um die Handhabung von Sprites* möglichst einfach zu gestalten (es arbeiten unterschiedlich stark html-versierte Leute mit / an dem Code), habe ich ein image Tag (weil: breite und höhe muss definiert sein und es soll sich wie ein normales Bild im Textfluss verhalten) mit style=background-image... versehen.

<img src="spacer.gif" class="card a s" title="Ace Spade" />

Statt 52 Spielkarten zu laden, wird lediglich der spacer und die Grafik mit /allen/ Kartengrafiken geladen und wunschgemäß positioniert.

Die Frage ist: gibt es einen eleganteren Weg, dasselbe zu erreichen? Wie gesagt, es muss leicht wartbar sein. Oder: gibt es sogar bedenken, weil image Tag mit Hintergrundbild vllt problematisch sein könnte.

Danke und Gruß

*das Ziel ist, die Anzahl der Requests gering zu halten

  1. Die Frage ist: gibt es einen eleganteren Weg, dasselbe zu erreichen? Wie gesagt, es muss leicht wartbar sein. Oder: gibt es sogar bedenken, weil image Tag mit Hintergrundbild vllt problematisch sein könnte.

    Warum nicht gleich ein anderes Element[1] und die Farbe der Karte mit einem entsprechenden Unicode-Zeichen darstellen (U+2660 bis U+2663 bzw. U+2667)?

    <dfn class="card a s">♠ Ass</dfn>

    [1] das dfn-Element ist nur als Idee gedacht, spontan fällt mir kein besseres ein.

    1. Warum nicht (…) die Farbe der Karte mit einem entsprechenden Unicode-Zeichen darstellen (U+2660 bis U+2663 bzw. U+2667)?

      Das ist auf jeden Fall ein guter Hinweis, danke :)

      Mit anderen Elementen probier ich auch gerade noch herum … – Unglücklich bin ich mit dem img-tag aber nicht: funktioniert und ist afaik auch kein Regelverstoß. Wenn nur der spacer nicht nötig wäre …

      1. Mit anderen Elementen probier ich auch gerade noch herum … – Unglücklich bin ich mit dem img-tag aber nicht: funktioniert und ist afaik auch kein Regelverstoß. Wenn nur der spacer nicht nötig wäre …

        Ja, aber wenn du da nur einen Spacer reinpackst, ist ein img-Element unsinnig. Ansonsten, wenn du tatsächlich einzelne Ressourcen einbindest, ist es sicher das beste Elemente für deinen Zweck.

        Im Übrigen solltest du dem dfn-Element (oder welches du auch wählst) ein title-Attribut verpassen.

        <dfn class="card a s" title="Pik Ass">♠ Ass</dfn>

        Oder auch so - wobei da schon etwas zu viel sein könnte :)
        <dfn class="card a s" title="Pik Ass"><span title="Pik"♠</span> Ass</dfn>