Bilde som endrer farge i php

[Gabsterino]

Hei!

 

Se på finn.no

 

den knappen i midten der som endrer farge når en har musen over.

 

hvordan gjøres dette? Må en ha to stk bilder? Evt kan det gjøres slik?

 

eller?

[AlecTBM]

Først, ikke php

Der er det nå brukt javascript, teksten er css

[OIS]

Hei!

 

Se på finn.no

 

den knappen i midten der som endrer farge når en har musen over.

 

hvordan gjøres dette? Må en ha to stk bilder? Evt kan det gjøres slik?

 

eller?

Dette har ikke noe med PHP å gjøre ...

Ser ut som javascript som endrer farge på bakgrunnen. Hvis det ikke er en css eg ikke så.

[AlecTBM]

Det er 2 bilder som blir skifta på ja, mest sannsynlig javascript som styrer, men teksten er det nok css som endrer (teksten er ikke på bildet)

[h4ppy]

Dette kan også gjøres ved hjelp av CSS og posudo elementer. :hover. Du trenger da htchover filen (google "hover.htc") for at det skal fungere i IE. den bruker jeg fremfor JS, da mange faktisk har JS skrudd av.

[Gabsterino]

OKei, dette skjønner jeg ikke mye av...

 

Enkelt da, jeg har et bilde med 3 ting som skal bli merket med en rund grønn bakgrunn når musen er over, må jeg først få laget bildet, så 3 bilder hvor hver av tingene er merket som jeg ønsket?

 

Eller?

[cyclo]

Denne tråden var feilpostet og er blitt flyttet til riktig kategori.

[FrodeNilsen]

h4ppy: Takker så meget for hover.htc tipset.

 

...

Enkelt da, jeg har et bilde med 3 ting som skal bli merket med en rund grønn bakgrunn når musen er over, må jeg først få laget bildet, så 3 bilder hvor hver av tingene er merket som jeg ønsket?

...

 

Hold det enkelt. Begynn med ett bilde av en ting, og få ringen til å fungere på denne.

 

Bytte bakgrundsbildet

 

Det enkleste er rett og slett å bytte bakgrundsbilde med :hover.

 

Først definerer du ett bakgrundsbilde:

http://www.w3.org/TR/CSS21/colors.html#pro...ackground-image

 

Så definerer du ett annet bakgrundsbilde når du har musen over elementet (hover):

http://www.w3.org/TR/CSS21/selector.html#d...-pseudo-classes

 

Laste forsinkelse

 

Problemet med å benytte to forskjellige bakgrundsbilder, er at når du har musen over ett element, så må nettleseren laste ned bakgrundsbildet. Dette tar litt tid, slik at du får en tegnefeil inntil nettleseren har lastet ned bildet. Dette skjer kun første gang bildet lastes ned, altså skjer kun første gang du prøver. Hvis du sletter cachen til nettleseren, så skjer det igjen.

 

Forskyve bakgrundsbildet

 

For å unngå forsinkelsen, så kan du ta de to bakgrundsbildene og lime de sammen kan i kant. Det ene bildet til høyre og det andre til venstre. Du justerer bakgrundsbildet slik, at bare ett av bildene vises av gangen, og bruker background-position til å justere hva som vises:

 

http://www.w3.org/TR/CSS21/colors.html#pro...ground-position

 

Merk at du kan benytte negative verdier.

 

Trikset her er altså at du benytter ett bakgrundsbilde, slik at nettleseren laster dette ned, og så ber du nettleseren forskyve bakgrundsbildet når du har musen over bildet. Du bytter bilde ved å forskyve det.

 

Komplisert løsning

 

Gjør det over tre ganger, en gang for hver "ting". Ved å introdusere transparente bakgrundsbilder kan dette løses på ørten forskjellige måter, men de er i bunn og grunn en variasjon av temaet over, eventuelt også med en kombinasjon av foreldre elementet sin bakgrund.

 

Håper dette var til noen hjelp.

 

Frode

[Gabsterino]

hvilket bildeformat burde jeg bruke? som er raskt å laste og skarpt?

[FrodeNilsen]

jpeg når du ikke trenger tranparente bilder.

 

De fleste benytter jpeg til forgrundsbilder.

 

PNG for bilder med få farger eller når du trenger transparente bilder.(merk ie6 bug)

 

GIF har bedre støtte i eldre nettlesere enn PNG, men kan bare definere transparent ved å definere en farge som transparent. Jeg har det intrykket at PNG defakto har fortrengt GIF. "Spacer-gifs", særlig transparent 1*1px var trolig det mest brukte bildet i gamle dager.

 

Det var vel det hele, helt på sparket.

 

Frode

[Arve Systad]

Til typisk websidegrafikk er PNG eller GIF som regel dei beste alternativa, då desse formata er "lossless" - tapsfrie (GIF kun til og med 256 fargar, dog). JPG vil ofte føre med seg JPEG-artifacts (fargeforvrenging, ujevne former, "kornete" bilete). Mitt tips er å prøve med PNG og GIF først, og sjå kven av dei som gir minst filstorleik. Dersom biletet du skal bruke er svært komplisert (fotografi, for eksempel) vil dog JPEG vere ei god løysing.

 

Forsiktig med bruk av PNG dersom ein farge i biletet skal kunne gli over i bakgrunnsfargen på sida, då IE framleis slit litt med fargane i PNG.

 

Så, enkelt oppsummert som ein slags grunnregel:

 

Typisk webgrafikk = PNG eller GIF

Fotografi eller meir kompleks grafikk = JPEG

[FrodeNilsen]

Til typisk websidegrafikk er PNG eller GIF som regel dei beste alternativa, då desse formata er "lossless" - tapsfrie

...

 

PNG kan komprimeres lossy og lossless.

 

Det å benytte lossy komprimering er ett tradeoff mellom kvalitet og filstørrelse. Du får ikke rare artifaktene med jpeg hvis du benytter minst mulig komprimering, og ofte kan bildene komprimeres ganske kraftig uten at de egentlig forringes vesentlig.

 

Frode

[Arve Systad]

Til typisk websidegrafikk er PNG eller GIF som regel dei beste alternativa, då desse formata er "lossless" - tapsfrie

...

 

PNG kan komprimeres lossy og lossless.

 

Det å benytte lossy komprimering er ett tradeoff mellom kvalitet og filstørrelse. Du får ikke rare artifaktene med jpeg hvis du benytter minst mulig komprimering, og ofte kan bildene komprimeres ganske kraftig uten at de egentlig forringes vesentlig.

 

Frode

 

Det er sant, men som regel vil JPEG med "lossless" kvalitet ta større plass enn tilsvarande GIF eller PNG. Sjølvsagt, som regel lønnar det seg å berre prøve alle tre formata og sjå kva som tar minst plass men beheld ønska kvalitet. Så, der fins ingen fasit, berre veldig grove grunnreglar å gå etter

[FrodeNilsen]

... der fins ingen fasit, berre veldig grove grunnreglar å gå etter

 

Var vel akkurat det jeg også prøvde å si.

 

Mener du at at bilder av høy kvalitet vil tjene på å lagres som png? Jeg har rett og slett aldri lekt meg med dette, bare konstatert at jpeg er totalt dominerende blant fotografer.

 

Frode

[AlecTBM]

Raw er vell det som er domminerene, men for web så er det jpeg som er vanligst av fotografier

[Arve Systad]

... der fins ingen fasit, berre veldig grove grunnreglar å gå etter

 

Var vel akkurat det jeg også prøvde å si.

 

Mener du at at bilder av høy kvalitet vil tjene på å lagres som png? Jeg har rett og slett aldri lekt meg med dette, bare konstatert at jpeg er totalt dominerende blant fotografer.

 

Frode

 

Sjølvsagt, det ahr du heilt rett i. PNG til fotografi er bortkasta, då dette kun vil ta opp mykje meir plass enn nødvendig. Derimot, held grafikken seg innanfor dei begrensingane formatet har, så er det bedre enn JPG

 

AlecTBM:

RAW er ikkje rekna som eit bildeformat eingong, kun ei råfil med all eksponeringsdata.

Endret 19. februar 2009 av Arve Systad

[FrodeNilsen]

...

Derimot, held grafikken seg innanfor dei begrensingane formatet har, så er det bedre enn JPG

...

 

Jeg har forstått det slik, at hvis du har en begrenset fargepalett i bildet, det vil si at det er få forskjellige farger i bildet, så passer PNG godt. Grafikk med la oss si med kun 100 forskjellige farger totalt egner seg godt for PNG.

 

Jeg har ikke studert PNG i detalj, så det er mulig at jeg er helt på jordet. Dette er mitt uansett mitt inntrykk av formatet.

 

Bilder har typisk en stor fargepalett med svært mange unike farger. Jpeg benytter en 16*16px matrise (hvis jeg husker riktig) og komprimerer en og en slik matrise. Jpeg benytter ikke noen fargepalett for hele bildet.

 

Det er en stund siden jeg studerte dette, så jeg er litt rusten på temaet.

 

Frode

[Arve Systad]

Og det du skriv er heilt korrekt, så det er greit

[Gabsterino]

men skjønner ikke helt, trenger å vite dette nå til han som tegner bildet mitt:9

 

skal han tegne bildet og så ringe rundt en ting og så lagre bildet, osv?

 

kan det gjøres slik at alle bildene da lastes når siden starter, så en slipper å evt vente når en holder musa over?

[FrodeNilsen]

men skjønner ikke helt,

...

 

Det krever litt innstats for å skjønne. Som for eksempel å lese igjennom tidligere tråder i dette forumet, eller søke etter tråder som omtaler bakgrundsbilder.

 

Med så mye info som du har fått i denne tråden, så burde du klare å finne løsningene selv. Hvis du ikke gjør det, så er ikke webdesign noe for deg.

 

Frode