Billede som funktion af opløsning

Det kan du ganske enkelt gøre med screen.width og screen.height. Du kan så eksempelvis teste om screen.width = 1024. Her kan du selvfølgelig også teste med < og > så du kan "runde op".

Der er to meget store problemer i det her som bør stoppe dig. Det ene er naturligvis at du ikke kan vide hvor meget plads der rent faktisk er i browser-vinduet. Nogle browsere giver mere plads til hjemmesiden end andre og du er ikke sikker på at vinduet er maksimeret hos modtageren.
En anden ting er at din side bliver alt for tung hvis der skal være et fuldskærms-billede i de størrelser du nævner. Et baggrundsbillede er simpelthen ikke nødvendigt nok til at du bør bruge så meget af brugerens tid/båndbredde på at det skal hentes ned.

jeg har faktisk overvejet begge ting.

mht til det med størrelsen så er det ikke et problem. I starten brugte jeg billeder der rent faktisk forestillede noget - men det indså jeg jo hurtigt var en dårlig ide fordi en stol(/whatever) ser lidt kikset ud når den bliver skåret midt over. Derfor har jeg som sagt pt kun billeder som sagtens kan tåles at skäres over - fx en himmel.

Det andet er også lidt värre, og netop gruden til jeg efterlyser dette script. Jeg har fået komprimeret mine billeder ned på ~200kb (i bedste opløsning), men tanken var netop - hvis en brugere nu kun kører 800x600 er der ingen grund til at han/hun skal loade et stort billede på 1600x1200, hvorfor det ville väre smart hvis man kunne spare på båndbreden og loade samme billede, bare i dårligere kvalitet (=mindre).

Ja - man kan måske også diskutere om 200kb er for meget, men da det ikke er en stor firmaside som skal väre optimeret til folk fra ungarn med 22k modem tror går det nok.

Men jeg har desvärre ikke nogen erfaring med javascript - så jeg har ingen ide hvordan man laver et sådant script.

Stadig vil du altså fulstændig slagte en modem-bruger med en stor skærm. Vi taler altså stadigvæk lige godt halvdelen af de danske internetforbindelser som er gennem modem, og generelt bryder folk sig ikke om at man sviner med deres båndbredde. Set i forhold til at et baggrundsbillede er det mest ligegyldige på siden (ja, det betyder da noget for udseendet, men intet for indholdet forstås), så bør et baggrundsbillede aldrig være større end 30 kB.
Jeg har fundet en side med et lille javascript som viser én side til folk med opløsning på 1024x768 og en anden side til andre. Det er nok et passende sted at starte, hvis du vil eksperimentere lidt med det: http://www.pageresource.com/jscript/jscreen.htm

Hvad med nogle mindre billeder som bliver gentaget nogle flere gange i stedet? Det kan du sagtens gøre med en himmel.

Nu er det som sagt ikke en side hvis målgruppe er alle og enhver, men derimod en side for en lille gruppe kampnørdede D&D nørder (hvoraf de fleste endda sidder i sverige med minimum 10MBit).
Jeg kan selvfølgelig ikke udelukke at der findes en modembruger som kunne finde noget brugbart på siden, men arrogant det end lyder, så er det ikke noget jeg vil tage mig af.

Anyway - for nu at vende til bage til mit spørgsmål. Det jeg faktisk er mest i tvivl om er ikke hvordan jeg får lagt navnet på den mappe jeg ønsker i et variabel - men derimod hvordan jeg får skrevet det ud.
Jeg ved godt man udskriver med document.write() - men fordan fåregår det når man befinder sig inde i et <style type="text/css">-tag ?

følgende virker jo ikke umiddelbart.


<SCRIPT language="JavaScript">
if (screen.width<1024)
{
var folder = '800';
}
if (screen.width<11280)
{
var folder = '1024';
}
if (screen.width<1600)
{
var folder = '1280';
}
else
{
var folder = '1600';
}

document.write('div#content h2 {background: #CBB196 url(images/'+folder+'/Living_Mushrooms.jpg) 0 0 no-repeat fixed; color: white; padding: 0.5em; margin: 0 -12px 0.5em; border-color: #963; border-width: 1px 0; border-style: solid;}');
</SCRIPT>

<ole>

Al trafik på WWW skal betales ... om ikke af den ene bruger, så af den anden. Når man laver sine sider ekstremt tunge - måske 8-10 gange større end nødvendigt - så er der nogen, der skal betale for al den ekstra trafik.

Betaler du personligt for al anvendt trafik, er dine betragtninger ikke spor arrogante.
Gør du derimod ikke det, vil de brugere, der betaler dit frådseri nok give dig fuldstændig ret i, at de forekommer _meget_ arrogante ... og det er jo så alle os andre  ;o)

/mvh
</bole>

Siden bliver hosted på en af spillernes egen server i sverige, så man kan vel ikke påstå at jeg betaler for båndbreden.
Men arrogant eller ej - nogen der kan hjälpe med at få det til at virke?

btw - kan det passe at javascript ikke har nogen "elseif" syntaks?

Ja, det hedder nemlig else if !-)

Så f.eks.

<script type="text/javascript">
var folder;
if (screen.width<1024){
  folder = '800';
}else if (screen.width<1280){
  folder = '1024';
}else if (screen.width<1600){
  folder = '1280';
}else{
  folder = '1600';
}

document.write('<style type="text/css">div#content h2 {background: #CBB196 url(images/'+folder+'/Living_Mushrooms.jpg) 0 0 no-repeat fixed; color: white; padding: 0.5em; margin: 0 -12px 0.5em; border-color: #963; border-width: 1px 0; border-style: solid;}</style>');
</script>

-- iøvrigt er jeg enig i, at du under ingen omstændigheder bør bruge så store billeder, og f.eks. i Photoshop er der en funktion (gem til web eller sådan noget !-), hvor man kan se hvor relativ lille forringelse af billedet man får ved at komprimere meget, så dine billeder burde sgatens kunne kamme ned under 50Kb !o]

Lukketid ?-)