Weboldalon szeretnék képeket elhelyezni az alábbi módon. Hogyan lehetséges?

Az ilyen képet úgy hívják css sprite vagy image sprite.

Elég sok olyan oldal van, ahol különálló képekből el tudod készíteni a saját sprite-odat, és letöltheted a szükséges css kódlappal együtt.

Ezt az oldalt tudom ajánlani:

[link]

Sok egyéb css generátor is van rajta, ami segíthet az oldal felépítésében.

OFF: Az utolsó válaszolónak köszönöm a hasznos linket! :)

Egyébként igen, megnézed hogy melyiknek hol van a pozíciója a képen, aztán background-position. :)

#6: ha jól van optimalizálva, akkor nem.

1db 1MB -os képet is gyorsabban leszed, mint 100db 10KB -osat.

Meg ha a képrészek nem hely pazarlóan vannak összeállítva, akkor akár az 1kép mérete kisebb lehet mint a sok kis képé.

(persze ha nagy JPG -t bevágunk PNG-kkel és PNG lesz a kimenet, akkor nem lesz kisebb, sőt...)

#6 nem. A sprite használata több dolgot is megold. Egyrészt egy helyen megvan minden képanyagod (legalább is a sokszor használt ikon jellegű képekről), másrészt egyszer kell betöltenie a böngészőnek a képeket, így az előtöltés problémája megoldott, harmadrészt maga a betöltési procedúra is felgyorsul, hiszen egy fájlról van szó.

Viszont a sprite-ot nem lehet használni olyan háttérképként, amihez ismétlődés szükséges, vagy csak speciális esetben (vizszintes elrendezésű sprite-ot függőleges ismétlődésnél és vice versa)

<OFF> kis help designereknek

Viszont ikonok esetén célszerűbb speciális fontkészletet használni, mivel könnyebben átállítható a szín, és a méret. Ld.:

[link]

</OFF>