Det går inte att rendera bara en viss del av en bild som bakgrund till ett större lager va?

Tänk er att vi har ett lager på 100 x 100px och en bakgrundsbild på 100 x 100px...

Tänk er att jag i mitten av lagret vill ha en bakgrund på 10x10px som ska hämtas från en vald plats ur bakgrundsbilden.


Drömmen är alltså att kunna definiera en ruta.... rita ut en bakgrund i rektangeln här, och hämta data från en rektangel här.

Det finns inga bra knep för det där va? Antar att det inte finns, men lär passa på att fråga om det finns nåt geni som har nåt superknep i bakfickan.

Det jag experimenterar med är att lägga in massa webbrelaterade bilder i en enda fil, ungefär som man gör med speltexturer, sedan kan mina objekt använda information från en specifik plats i den filen. Det verkar inte vara görbart nu, men det hade vart en rätt bra optimering om det gick.

Någon som har tips tro? Just nu tror jag det är kört, men ändå

Jag är alltså väl införstådd i att om lagret som bakgrunden ska vara i är lika stor som det motiv man vill rita ut så är allt lugnt, men om jag klippa ut 10x10 px från en bild och klistra in det på ett ställe mitt i lagret.

Jag ska experimentera en hel del med detta koncept och se vad jag kommer fram till. Jag räknar med att skriva en rapport någonstans sen om vad jag kommer fram till, för jag ska se vad jag har att vinna. :)

Det går inte för tillfället, men det kommer att gå i CSS3.

Tjena :)

Det du vill göra kan annars åstadkommas med en serversidelösning.
Kolla in ImageMagick och kommandot "montage" i manualen.


mvh pa

Det går ju med Java…

Tack för svaren!

serversidelösning går bort, precis som java tyvärr, men tack för svaren alla.

CSS3 alltså, när kommer man kunna våga använda det på riktigt med tanke på hur lång tid det kommer ta innan IE6 går i graven... Om fem år i bästa fall? :)

Aja, skönt att det kommer, synd att jag inte har tid att vänta. :)

Tack ska ni ha mina vänner!

I många webbläsare kommer du säkert kunna göra inom rimlig framtid, men som du sa, ska det funka för dina IE-användare får du nog vänta ett bra tag.

annars kan du ju göra ett script som plockar fram en bit av bilden, och välja som bakgrund

image.php?image=bild.jpg&width=10&height=10&x=27&y =128 t.ex.

Finns massor av crop-script som kan göra det, både i asp och php

Det finns ju mängder med ASP/PHP/CGI alternativ till detta. Är detta ej möjligt?

Mvh Jim

Hmm... Sprites i CSS har funnits ett tag. Jag använder det alltid till menyer. Fast det kanske inte exakt är det du letar efter.

Kolla Alistapart: http://www.alistapart.com/articles/sprites/

Ett bra ställe att börja på kanske...

Egentligen borde det ju faktiskt gå även med css 2 och javaskript om man "fuskar" lite:

gör en kopia på "lagret" (jag antar att du menar en div eller annat element, lager var det länge sedan vi hade) och klipp ut rätt del med css clip: rect(); och positionera ut den där den skall vara.

Jag har helt enkelt nu gjort det på så vis att om elementet är större än bakgrundsbilden så får jag ha ett mindre lager inuti elementet som ska ha bilden. Lite ful lösning kanske, men den är i alla fall pålitglig då den fungerar för allt och alla.

Ja, när jag säger lager så syftar jag på div-element. :)

Det är rätt smidigt at arbeta såhär nu har jag märkt... När jag har bakgrund inom spelutveckling så är ju sånt här en självklarhet, men på webben har jag aldrig sett det användas förut så jag var tvungen att testa. Totala filstorleken minskas, samt att det blir smidigare för designern att jobba. För mig som kodare är det ungefär skitsamma ur produktionsperspektiv.

Jag kommer fortsätta med den här metoden för ikoner som "hör ihop". T.ex. om man har en verktygsrad med tio ikoner - då ska de tio ligga i samma fil. Ett paket med smileys ska ju t.ex. också ligga tillsammans, skitnice. Gott gott!

Jag borde inte gnälla men att använda lager för element (t ex div-element) är lite opraktiskt och ointuitivt eftersom det inte handlar om lager som ligger på varandra (som man då uppfattat som lager på lager) utan oftast bredvid varandra eller i varandra men sällan precis ovanpå varandra.

Det är därför bättre att använda divvar (lite suddigt) om det du kallar lager - eller mer korrekt använda termen element eller t ex ett dd-element i en dl. Blir klarare och lättare för alla förstå vad man menar.

Bra att det löste sig hur som helst! Man kan ju också använda positionering av bakgrunden med px och bredd, marginaler och padding för att "få fast" den delen av bakgrunden som man vill visa - om det nu bara handlar om en bakgrundsbild och inte innehållet av ett element för då krävs ju clip: rect();

Kul att du fått det att fungera. Men det är som sagt inget nytt. Jag har sett det i flera olika tappningar. De första dök väl upp runt 2004.
Det fungerar väldigt bra med AJAX när man vill skapa "skins" till en applikation och göra det enkelt för designern att göra nya "skins"!
Det vanligaste är ju att man lägger all grafik för menyelement i samma fil och sedan flyttar positionen för vanlig, hover och active.
Klart mycket effektivare än massa JS-preloads...

Mjo, jag har använt det i ett par år för hovereffekter, men när jag påbörjade detta projekt så lekte jag med tanken att ha ALL sitegrafik i samma fil... Precis allt. :)

Då minimerar man ju iaf overhead - om man använder det smart. Men när man jobbar med grafiker som är vana med att arbeta med t.ex. texturering så lär de sig ju att placera objekt smart.

Men det la jag ner, det var inte riktigt realistiskt. Men i css3 kanske det är det. Jag får testa igen om fem år. :)

Jag måste ju då skryta med att jag har en vän som faktiskt redan gör det här... ;)

aha. Vad tycker han om resultet då? Kan man få se nån site där det används?

Kör han med clip rect då eller?

Gå in på www.challenger.se så finns det en screencast i bloggen från den 29 december.
Det finns också en äldre demo som är tillgänglig via Challenger-fliken till höger.