Knapper på hjemmeside

Brug .gif- eller .png-format, og lav knapperne i præcis den størrelse, du ønsker. Hvorfor have knapperne i en anden størrelse, end den de bliver vist i?

Brug endelig ikke png, hvis de skal vises ordentligt. Internet Explorer 6 kan ikke vise det format ordentligt, og laver rod i farverne, både på 256-farvers og 24-bit png billeder..

Bortset fra det, så har apo ret. Sæt aldrig width og height i html til andet end billedets nøjagtige størrelse.

viperine > Jeg bruger selv .png-format til al min webgrafik, og har ikke oplevet de problemer du skriver om?

apo -> Jeg har bare haft en del problemer med dem. IE understøtter ikke Alpha-PNG, det er et almindeligt kendt faktum, og så vidt jeg ved virker PNG24 uden alpha-layer udmærket. Men der er også problemer med 256-farvers PNG billeder. Det er svært at se,  men der kommer en lille farveforskel, som jeg lagde mærke til engang, fordi jeg havde et ensfarvet billede, ved siden af en baggrund i samme farve - og de var ikke ens i IE, selvom de var ens i Firefox og i Photoshop.

PNG er et genialt format, men Microsoft skal jo altid ødelægge den slags.

Nu har jeg ikke helt styr på mulighederne med .png, men læste engang et sted at de var bedre, at bruge end .gif-filer (Derfor benytter jeg .png). Jeg mener ikke at jeg benytter mine .png'er, anderledes end jeg ville have gjort med .gifs - Altså uden nogen form for layers.

Jeg har dog bemærket at farverne virker lysere, men det er kun i FF. I IE, ser farverne ud præcis som de gør i mit grafikprogram.

PNG ville være bedre, hvis det virkede ordentligt.

Hvis det er omvendt hos dig, og billederne ser forkerte ud på Firefox, hvilket jeg dog lidt tvivler på, så er det jo stadig nok grund til ikke at bruge billedet.

GIF fungerer nøjagtigt lige så godt som 256-farvers PNG.

billedet = billedformatet.

Jeg har selv undret mig over farveforskellen i FF, men slog det hen med at det blot var en del af forskellen mellem IE og FF (Jeg kan huske fra Netscape, at farverne var anderledes end i IE).

Men jo, det er i FF, at farverne (lysstyrken) viger fra de oprindelige.

Okay så, jamen så vil jeg så benytte enten det ene eller det andet.. :) Tak for det.. jamen jeg havde prøvet at lave det originale billede større fordi jeg håbede dette kunne gøre grafikken lidt bedre, men nøps.. :)

Bortset fra det så mener jeg at kunne huske at man nogenlunde simpelt kunne lave en god onmouseover effekt, hvor linket ændrer sig til et lignende ikon, men måske lidt mørkere.. i ved nok hvad jeg mener.. Kan i huske koden til dette?

Og hvis man så skal lave det lidt mere avanceret, kan man så lave denne onmouseovet effekt lidt flottere, ved nærmest at "fade" fra det ene billede og over til det andet.. Ved ikke helt hvordan man forklarer dette, men i stedet for at køre det over 2 "frames" ku man køre det over en fem istedet så det bliver trinvis mørkere eller hvad man nu har ændret i ikon 2..?

Mvh Michael og tak indtil nu..

Nu jeg lige sad og tænkte over hvad mit problem egentlig også var med knap grafikken. I Photoshop hvor jeg har lavede knapperne indtil nu kunne jeg, allerede når jeg indsatte teksten, se at den blev utydelig grundet størrelsen. Har i et godt alternativ til et program hvor man kan lave nogen flotte knapper?

<img onmouseover="this.src='nytbillede.gif'" onmouseout="this.src='gammeltbillede.gif'" />

Det er den simpleste måde at gøre det på, selvom man helst skal gøre det lidt mere effektivt, med precaching.

Og hvis dine knapper bliver grimme i Photoshop, vil jeg vove den påstand at du bare ikke gør det ordentligt, for der er næsten intet det program ikke kan. Men jeg ved stadig ikke helt hvad du mener med "grundet størrelsen" osv.. ?

Altså jeg mener at jeg skal have lavet en knap der måske ikke skal være større end 25 * 100 pixels og når jeg så vil indsætte tekst på denne, kan det ikke være større end skriftstørrelse 6 eller deromkring og så bliver teksten lettere udtværet allerede dér.. Jeg ville gerne have en knap med lige så tydelig tekst som et almideligt link eller som den tekst vi skriver med her.

Precaching?? Den må du forklare nærmere.. Hvad er det og hvad kan man forbedre effektmæssigt ved dette?

Så vidt jeg kan forstå er precaching bare at jeg loaded billedne på min side et sted, hvor man ikke kan se dem i height/width=1px? Men bliver de ikke alligevel bare loaded så jeg åbner siden med knapperne? Eller er det billede 2,3 osv man loader på forhånd?

Ja, som standard er der antialiasing på i Photoshop, hvilket gør teksten udtværet, når den er lille. Det kan du slå fra i settings-baren øverst i vinduet. Ved siden af der hvor du vælger font osv, kan du også vælge en antialiasing stil. Sæt den til Sharp eller None (beklager hvis den ikke hedder præcis sådan - jeg har ikke lige Photoshop åben for at se efter).

Precaching af billeder betyder, at du loader alle de billeder du skal vise, ned på brugerens harddisk, sammen med at siden loades. Det gør at disse billeder kan vises med det samme, ved mouseover-effekten, i stedet for at de først skal hentes fra serveren, når de skal bruges, hvilket tager tid.

Men hvordan kan jeg gøre som jeg beskrev med at mere glidende overgang ved onmouseover? Kan jeg bruge et script eller skal jeg vise flere billeder og hvad ville koden så se ud som?

Undskyld alle disse spørgsmål men har rigtigt fået blod på tanden.. :D

Se, den er straks en del mere besværlig. Det kan gøres med transparency, men kun Internet Explorer og Firefox (af de browsere jeg bruger) understøtter transparency, og de gør det på to forskellige måder, så det er meget besværligt at skrive en ordenligt funktion til det.

Du kan også bruge flere billeder, men det øger sidens vægt og load-tid betydeligt.

Det mest effektive, vil nok være at lave det i Flash.

Jeg sidder faktisk lige og snakker med min fætter og at lave den i flash, men er total elndig til flash, så skal først have en grundig gennemgang i det.. men alt til sin tid.. :)

Jeg kan starte med det du har sagt indtil no.. har p.t. netop lavet en knap effekt med 60% opacity ved normal og 100% opacity ved onmouseover :)

Hvis du smider et svar .. og også apo.. så deler jeg bare pointsene hvis det er okay?
Så skal i have mange tak for hjælpen hidtil og så skriver jeg hvis jeg løber ind i mere skidt.. :)

grumfidum > Ellers tak :-) Jeg har ikke bidraget med noget særligt, så pointene må være viperines.

Okidoki.. så tilfalder de ham, men takker alligevel.. :)

Du råber bare højt hvis du løber panden mod muren :)