✔ background-image vs <img>

[Psychodelics]

Hey,

ich steh gerade vor so nem kleinen Dilemma.

Die Website, an der ich aktuell arbeite, besteht aus vielen Bildern. Ist es okay, wenn ich komplett alle einfach als Background-Image lade oder sollte ich zum Beispiel "Links" als IMG laden, weil ich da ja noch einen Alternativtext vergeben kann?!

Ich bin mir um ehrlich zu sein, grad nicht so sicher, ob ich die beste Variante verfolge, wenn ich so vorgehe:

<a href = "blabla">
     <div id = "link1"></div>
</a>

Der leere div-Container hier hat dann eine vorgegebene Breite und Höhe und ein Hintergrundbild und ist ein Link. Weiß jemand, ob diese Vorgehensweise einen Nachteil hat?

Oder weiß jemand, ob es überhaupt irgendeinen Nachteil hat, ein Bild als Background-Image zu laden, statt als IMG? Ich wüßte zum Beispiel nicht, wie textbasierte Computer dann die Seite später darstellen, weil der Link ja n leerer div-Container ist. Oder sollte ich vllt unsichtbaren Text auf das Hintergrundbild schreiben, weil textbasierte Computer display: none; ignorieren, soweit ich weiß.

Gruß, Adnan


EDIT:
Hab das jetzt schon soweit verändert, dass ich dem Link einen Alternativtext vergebe. Aber die Frage ist nach wie vor, hat es für irgendwen Nachteile? Wenn ich zum Beispiel bei mir im Browser den Stil deaktiviere, war's das. Keine Navigation mehr möglich.

<a href = "blabla" title="Alternativtext"><span id = "link1"></span></a>

 

[zer0]

Also ich arbeite grundsätzlich mit Background-Images. Warum machst du den den Div-Container in ein a-element rein? Den selben Style den du dem Div zugewiesen hast, kannst du auch dem a-Element zuweisen und solltest es wahrscheinlich noch als Block Element setzen mit display:block; sodass es auch die volle größe annimmt.

Kleines Beispiel: http://www.css4you.de/trickkiste/tr00023.html

 

[SilentWarrior]

Die Website, an der ich aktuell arbeite, besteht aus vielen Bildern. Ist es okay, wenn ich komplett alle einfach als Background-Image lade oder sollte ich zum Beispiel "Links" als IMG laden, weil ich da ja noch einen Alternativtext vergeben kann?!

Das ist eigentlich weniger eine technische, sondern vielmehr eine semantische Frage. Du musst dir einfach überlegen, ob das Bild auch dann zu sehen sein soll, wenn sämtliches Design von deiner Website verschwunden ist. (Im Firefox kann man das z.B. wunderbar über „Ansicht“ ? „Webseiten-Stil“ ? „Kein Stil“ erreichen.) Und wenn ja, dann füg es als img ein, andernfalls als Hintergrundbild.

 

[Psychodelics]

Danke,

@zer0
da hatte ich überhaupt nicht dran gedacht gehabt, der div-Tag ist völlig unnötig.

@SilentWarrior
genau das war ja mein Problem, dass es ohne Webseitenstil nix zu sehen gibt. Und mir ist Barrierefreiheit schon sehr wichtig.




Aus dem Grund habe ich eine geniale Variante gefunden, die mich vollkommen zufrieden stellt^^ So wie zer0 gesagt hat, schreibt man direkt alles in den a-Tag.

<a href = "blabla" id = "startseite">Startseite</a>

a#startseite{ 
     width: 100px; 
     height: 25px; 
     background: url(img/startseite.jpg); 
     text-indent: -999em;
}

Wenn man nun so wie SilentWarrior gesagt hat, den Stil ausschaltet, hat man den Linktext^^

Gruß, Adnan


EDIT: Diese Variante nennt sich übrigens die Phark-Methode

 

[Maik]

Moin,

<a href = "blabla">
     <div id = "link1"></div>
</a>

Der leere div-Container hier hat dann eine vorgegebene Breite und Höhe und ein Hintergrundbild und ist ein Link. Weiß jemand, ob diese Vorgehensweise einen Nachteil hat?

Gemäß der HTML-Elementreferenz für Inline-Elemente dürfen diese überhaupt keine Block-Elemente enthalten.

mfg Maik

 

[Psychodelics]

Moin,Gemäß der HTML-Elementreferenz für Inline-Elemente dürfen diese überhaupt keine Block-Elemente enthalten.

mfg Maik

Hi,

genau aus dem Grund hatte ich den Beitrag dann kurz darauf editiert und die "div"-Tags gegen "span"-Tags ersetzt.

Gruß, Adnan

<a href = "blabla" title="Alternativtext"><span id = "link1"></span></a>