Unter Verwendung von Sprites mit IMG-Tag?

StackOverflow https://stackoverflow.com/questions/4335957

Frage

Ich verstehe, wie Sprites zu verwenden, ist jedoch kein „src“ -Attribut für IMG-Tags erforderlich? Ich kann immer einen SPAN oder anderen Tag verwendet, und stellen Sie den Hintergrund / Breite / etc, aber es wird nicht semantisch korrekt sein.

Im Grunde würde Ich mag die SRC für einen IMG-Tag verzichten und nur Sprites verwenden, aber bin besorgt über die HTML nicht, weil es technisch gültig zu sein. Danke.

War es hilfreich?

Lösung

über semantische Korrektheit:

Wenn ein Bild semantische Bedeutung hat, so berücksichtigt wird, zufrieden sein, einen IMG-Tag , ohne Sprites, und richtig eingestellt ALT.

Wenn ein Bild ist nur Dekoration, wie der Hintergrund einer Box, Hintergrund einer Schaltfläche Hintergrund einer Menüoption usw. es keine semantische Bedeutung hat, so können Sie einfach es als Hintergrund verwendet einen SPAN, DIV usw. von CSS. Sie können Sprites in diesem Fall verwendet werden.

Andere Tipps

Sprites verwenden, nicht unbedingt, dass Sie sie in CSS Hintergründe definieren müssen. Sie können auch IMG-Tag Sprites verwenden, zu tun, so dass Sie im Grunde Ihr Bild trimmen müssen. Es gibt zwei gute Artikel, die Technik zu erklären:

http://tjkdesign.com/articles/how-to_use_sprites_with_my_Image_Replacement_technique.asp

http://www.artzstudio.com/2010/04/img-sprites- mit hohem Kontrast /

Beide CSS und IMG Methoden sicher, ihre eigenen Vorteile haben, so dass Sie Figur müssen aus dem man Ihnen passt besser.

Ich benutze einen 1x1 transparent gif (sogenannten Spacer) für das src. das Hintergrundbild für den img-Tag mit der entsprechenden bg Position dann eingestellt. Auf diese Weise können Sie die Geschwindigkeit von Sprites nutzen sind und die semantische Ihres Codes zu halten (Sie immer noch das alt-Attribut verwenden können)

  

ich immer einen SPAN oder anderen Tag verwenden könnte und stellen Sie den Hintergrund / Breite / etc, aber es wird nicht semantisch korrekt sein

Eigentlich gibt es nichts falsch über CSS mit dem Hintergrund einer Spanne oder div einzustellen. Es wäre eigentlich falsch syntaktisch sein, die src aus einem Bild zu unterlassen, wie der ganze Sinn des Tags ist. Es gibt nichts in den Normen sagen Sie Text innerhalb einer Spanne zu setzen haben. Syntaktisch gesehen, auf einem Elemente den Hintergrund zu modifizieren würde den meisten „richtigen“ Weg, es zu tun.

Hier ist der Schiedsrichter auf img-Tags über W3C: http : //www.w3.org/TR/html401/struct/objects.html#h-13.2

Und ein wenig extra Lesen: http: // www.w3.org/TR/html4/struct/global.html#h-7.5.3

  

Diese Elemente definieren Inhalt inline zu sein (SPAN) oder Blockebene (DIV), aber keine anderen Präsentations-Idiome auf den Inhalt verhängen. So können Autoren diese Elemente in Verbindung mit Stylesheets verwenden, das lang-Attribute usw. zu schneidern HTML, um ihre eigenen Bedürfnisse und den Geschmack.

Sie können entweder CSS Hintergründe, oder HTML Canvas Elemente dynamisch schöpfen. Mit Leinwand ist Ihnen die Möglichkeit, leicht Subset Bilder haben, und führen Sie Mischmoduseffekte .

Sie dieses Problem lösen, indem Sie Ihre Optionen neu zu denken.

Erstellen Sie einen definierten Bereich mit einem <a> mit display:block; oder <div> und Verwendung overflow hidden; zu verbergen Überlauf und position:relative;.

Dazu platzieren Sie Ihre <img> Bild Sprite innen absolut positioniert, was möglich ist, da Sie die übergeordnete positioniert.

Dann :hover auf dem Bild zu ändern Position verwenden.

Jetzt ist Ihr Sprit basiert auf einem img-Tag, so dass Sie Ihren alt Text verwenden können.

Das folgende Beispiel basiert auf einer Facebook-Sprite mit zwei Versionen des Symbols auf der jeweils anderen, jeder 50px 50 Pixel, Gesamthöhe des Bildes ist 100px: 

<!DOCTYPE html>
<html>
<head>
<style>
.icon {
    display:block;
    position:relative;
    width:50px;
    height:50px;
    border:1px solid red;
    overflow:hidden;
}
#fb {
    position:absolute;
    top:0;
    left:0;
}
#fb:hover {
    position:absolute;
    top:-50px;
    left:0;
}
</style>
</head>

<body>
<a href="https://facebook.com" class="icon" title="Facebook">
<img src="sprite-facebook.png" id="fb" width="50" height="100" alt="Facebook">
</a>
</body>
</html>
Lizenziert unter: CC-BY-SA mit Zuschreibung
Nicht verbunden mit StackOverflow
scroll top