Chester, nice fail!
1.
spirits sind geister,
du meinst sprites!
<img/> tags setzt du ein wenn das bild das du einbindes z.b. zum inhalt des dokuments gehört. Du kannst dem img tag zusätzliche attribute geben wie den alt tag womit du beschreiben solltest was auf dem bild zu sehen ist. die information das auf einem bild, z.b. auf einer fußballseite, die gesammte mannschaft abgebildet ist ist sinnvoll. hier zu schreiben "geiles bild" wäre auch nicht richtig. diese informationen mögen dir gerade sinnlos vorkommen sind aber z.b. für das surfen mit textbrowsern, blinde, googlebots und andere fälle relevant und von interesse.
sprites solltest du benutzen um häufig genutzte oder viele kleine elemente zu gruppieren. ein großes bild herunterzuladen ist besser als viele kleine!
es reicht hierbei schon in deiner css dabei eine allgemeine klasse anzulegen in der du einmal background-image definierst. nun kannst du alle weiteren elemente die ein auf diesem bild abgebildetes objekt anzeigen sollen einfach zusätzlich mit background-position im element deiner wahl positionieren.
der erste wert repräsentiert immer x also die horizontale achse, der zweite immer y, also die vertikale.
einfache positionierungen wie right, left, center oder auch pixelangaben sind möglich.
<style>
.general_element{background-image:url(beispiel.png);}
.element_1 { background-position:-20px -10px; }
.element_2 { background-position:-50px -30px; }
</style>
<div class="general_element element_1"></div>
<div class="general_element element_2"></div>
bitte lies doch noch einmal eine ausführliche beschreibung zum thema css sprites damit dir die korrekte verwendung sowie die vorraussetzung der benutzung klar wird.
mehr infos hier
danke
So. 24.07.2011
03:39 Uhr
#1
Zitat geschrieben von Chester