Mer om bilder

Bildlänkar

Eftersom man skall vara försiktig med hur mycket bilder man lägger upp på sin web-sida är det vanligt att man gör miniatyrer av de riktiga bilderna. Genom att ha miniatyrbilderna som "klickningsbara" länkar, är det tänkt att man ska kunna göra länkar till de motsvarande bilderna i full storlek. Det är en smart metod som gör att nätsurfaren inte behöver ödsla tid på att överföra en mängd stora bilder denne inte är intresserad av. Istället kan hon eller han välja att titta nogrannare på några bilder.

Exempel på klickningsbar bild

<P><A HREF="gifs/html/tarning.gif"><IMG SRC="gifs\tarning.gif" WIDTH=100 HEIGHT=70 ALT="tärningar" ALIGN=LEFT></A> Denna bild visas i 100x70 bildpunkters storlek klicka på den så visas den i full storlek.

Bilder som länkar

För att förbättra utseendet på en webbsida kan man ha länkar i form av "knappar", alltså bilder som det går att klicka på. Det är inte svårt att åstadkomma - man behöver bara lägga in en bild i ett ankare. Om man vill lägga in en knapp med namnet res.gif som föreställer en knapp med texten "Till ressidan" skriver man:

<A HREF="resor.htm"><IMG SRC="res.gif" ALT="Till ressidan"></A>

Det är extra viktigt att man är noga med alternativtexter om man lägger in bilder med länkar, för om man inte kan se bilderna ser man inte vart länkarna leder. Man kan även lägga in en textlänk till samma ställe bredvid bilden om man vill vara säker på att alla ska kunna följa länken.

De flesta webbläsare ramar automatiskt in bilder som ingår i länkar. Man kan om det är tydligt att det rör sig om en länk ta bort ramen runt bilden genom att använda attributet BORDER=0.

Exempel på knapp med och utan ram.

<HTML>
<HEAD>
<TITLE>Knappar</TITLE>
<BODY>
<H1>Knappar</H1>
<P>En knapp med<A HREF="resor.htm"><IMG SRC="buttons\res.jpg"
ALT="Till ressidan"></A> och utan
<A HREF="resor.htm"><IMG SRC="buttons\res.jpg"
ALT="Till ressidan" BORDER=></A>ram</P>
</BODY>
</HTML>

Resultat i webläsarfönstret:

Knappar

En knapp med och utan ram

Tips: Använd VSPACE och HSPACE för att texten inte ska hamna för nära knapparna, få mer luft runt dom.

Bakgrundsbilder BACKGROUND HTML 2.0

För att lägga in bakgrundsbilder i HTML-dokumentet, ger man märket <BODY> attributet BACKGROUND med en URL som värde. Webbläsaren "tapetserar" sedan hela sidan med den bild man anger i URL-strängen, precis som när man väljer ett skrivbordsmönster till Windows eller på en Mac. Dom webbläsare som inte har stöd för bakgrunder, påverkas inte eftersom webbläsaren hoppar över dom märken den inte känner igen. Man bör hålla sig till formaten GIF och JPEG, som med vanliga bilder, dessutom bör man hålla bilfilerna små.

Exempel på bakgrundsbild

Så här skriver man i BODY-märket för att använda bilden som bakgrund i ett HTML-dokument.

<HTML>
<HEAD>
<TITLE>Bakgrund</TITLE>
<BODY BACKGROUND="bground/html/barml.jpg">
</BODY>
</HTML>

Bra och dåliga bakgrunder

En bra bakgrund förhöjer sidans utseende utan att försvåra läsandet. För att inte ska bli svårt att se texten, bör bakgrundsbilden inte ha för stora färgvariationer eller kontraster. För att det ska vara lätt att urskilja bokstäverna, bör bakgrunden också ge en tillräcklig kontrast mot texten. Personer som har nedsatt syn eller är färgblinda, kan tycka att det är mycket frusterande att försöka en intresssant men en i det närmaste osynlig text.

Om man på ett enkelt sätt vill få en webbsida att se intressantare ut, kan man göra en bakgrund som bara är ett par punkter hög men mycket bred (2000 punkter eller mer). Om bilden är enfärgad men har en annan färg längst till vänster blir det en kolumn med den färgen i sidans vänsterkant. Eftersom bilden är bredare än alla normala webbläsares fönster kommer det bara att bli en kolumn på sidan.

Exempel på kolumn som bakgrundsbild

Bilden tar bara en plats på 0,411 kb och för att lägga in den på din webbssida skriver du.

<HTML>
<HEAD>
<TITLE>Bakgrund</TITLE>
<BODY BACKGROUND="bground/html/mback.gif">
</BODY>
</HTML>

Attributet BGPROPERTIES IE3

Microsoft har hittat på Attributet BGPROPERTIES. Om attributet BGPROPERTIES=FIXED anges ligger sidans bakgrund när texten rullas. FIXED är det enda möjliga värdet man kan ge detta attributet. Det hade kanske varit mer logiskt om man hade valt ett attribut utan värde, förslagsvis FIXEDBACKGROUND, vilket hade varit lättare att förstå.
Men för att använda dig av detta attribut skriver du i BODY-märket:

<BODY BACKGROUND="whitemarble.jpg" BGPROPERTIES=FIXED>

Att lägga in en bildtext

För att lägga in en bildtext t.ex under en bild, kan man med fördel använda sig av tabeller. I dom flesta fall justeras tabellens celler automatiskt efter bilden, under förutsättning att den inte är för stor.

Exempel på bildtext:

<TABLE>
 <TR>
  <TD><IMG SRC="photos/html/askog1.jpg"
      ALT="Bild från Åskog"></TD>
 </TR>
 <TR>
  <TD ALIGN=CENTER><EM>Bilden visar
      snickarverkstaden</EM></TD>
 </TR>
</TABLE>¨

Bilden visar snickarverkstaden

Att göra en ram runt en bild

För att göra en ram runt en bild, gör man en tabell med en ram. Man lägger heltenkelt till attributet BORDER="ramens tjocklek". vill man ha en annan färg på ramen lägger man också till attributet BORDERCOLOR="önskad färg".

Exempel på bildram:

<TABLE BORDER=10>
 <TR>
  <TD>
  <IMG SRC="photos/html/askog1.jpg"
      ALT="Bild från Åskog"></TD>
 </TR>
</TABLE>

Galleri med miniatyrbilder

Om man har ett antal bilder som man vill göra ett galleri med miniatyrer, där man vill att läsaren själv ska kunna välja vilken bild han eller hon, vill se i större storlek, kan man använda sig av en tabell. Bilderna ska vara lika stora och sedan gör man en tabell där man lägger in en bild i varje cell. Tabellramen kan tas bort genom att man i TABLE skriver BORDER=0, och mellanrummet mellan bilderna tas bort med kommandorna CELLSPACING=0 och CELLPADDING=0. Då läggs bilderna tätt ihop. Detta är väl mer användbart om bildminiatyrerna inte är tänkta att fungera som länkar.

Exempel på bildgalleri med klickningsbara bilder.

<TABLE BORDER BGCOLOR="blue" CELLSPADDING=0 ALIGN=CENTER>
 <TR>
  <TD><P><A HREF=photos\cairns2.jpg"><IMG SRC="photos\cairns2a.jpg"
      ALT="Cairns Reef Casino"></A>
  <TD><P><A HREF="photos\reef3.jpg"><IMG SRC="photos\reef3a.jpg"
      ALT="Krokodil på Green Island"></A>
  <TD><P><A HREF="photos\kurand1.jpg"><IMG SRC="photos\kurand1a.jpg"
      ALT="Kuranda tågstation"></A>
  <TD><P><A HREF="photos\tjapu1.jpg"><IMG SRC="photos\tjapu1a.jpg"
      ALT="Aborginer i Tjapukai"></A>
  <TD><P><A HREF="photos\morgan1.jpg"><IMG SRC="photos\morgan1a.jpg"
      ALT="Mount Morgans Museum"></A>
  <TD><P><A HREF="photos\road1.jpg"><IMG SRC="photos\road1a.jpg"
      ALT="Ödslig väg i outback"></A>
 </TR>
</TABLE>

Resultatet blir detta, pröva att klicka på bilderna.

Att lägga in en avgränsare

Man kan skapa en avgränsare med kommandot <HR>. Men man kan också skapa lite mer effektfulla och snyggare avgränsare. För att kunna göra det använder man sig av väldigt små bilder, som bar är en eller ett par pixlar höga, och kopierar in dem för att få färgade, rutiga, prickiga osv, avgränsare.

I ett ritprogram kan du skapa en bild med bar en eller ett par pixlar. Nedanstående bild är bara 2 x 15 pixlar.

För att kunna visa bilden som en avgränsare, måste man få browsern att kopiera den. Det gör man genom att skriva:

<IMG SRC="gifs/html/avgrens.gif" WIDTH="400" HEIGHT="15">

Bredden i pixlar bestäms av WIDTH och höjden bestäms av HEIGHT, på avgränsaren. Resultatet kan du se med nedanstående bild.

Vad är det för vits med att göra en liten bild, istället för att göra en större bild direkt? Jo, anledningen är den att en större bild tar längre tid att ladda. En liten bild går fortare att ladda än en stor och när den lilla bilden väl är laddad går det mycket fortare att kopiera den för browsern, än att ladda den igen.

LOWSRC-kommandot N2

Detta kommando är ett av Netscapes uppfinningar, men det stöds numera av de flesta webbläsarna. Man använder LOWSRC om man har stora bilder på sin webbsida, som tar lång tid att ladda ner, men om man ändå vill visa något annat än en tom ruta på skärmen, kan man använda sig av en lågupplöst variant och LOWSRC-kommandot:

Man sparar först en kopia av bilden och gör den mindre informationsrik genom att anvånda gråskala eller färre färger. Meningen är att den ska bli avsevärt mindre, i Kb räknat. Den måste dock ha samma WIDTH- och HEIGHT-;.
I IMG-elementet skriver du sedan LOWSRC="kopians.filnamn" så att det står något i stil med:

<IMG SRC="riktiga.bildfilens.namn" WIDTH="X" HEIGHT="Y" ALT="bildtext" LOWSRC="kopians.namn">
När sidan sedan laddas ner hämtar browsern först LOWSRC-bilden och visar den ihop med texten. När den riktiga bilden har laddats, läggs den på själva kopian och ersätter den.

Exempel på LOWSRC:

Bild från Åskog

Bilden till vänster som man skriver efter LOWSRC är svartvit och har en kompressionsnivå på 90. Bilden till höger som laddas in efter LOWSRC är i färg och har en kompressionsnivå på 50. Den svartvita bilden tar 3 Kb i anspråk, medans färgbilden tar 10 Kb i anspråk. Om man har större bilder blir givetvis skillnaden betydligt större.

Klicka på knapparna för att backa tillbaka eller för att läsa vidare om HTML-guiden.