Mer om att använda Bilder på webb-sidor

Mer om hur man användar bilder, ikoner och fotografier på en webb-sida.

1. IMG kommandot
2. Transparenta bilder
3. Animerade GIF-bilder
4. Antal färger
5. IMAGEMAP kommandot

För att visa en bild på en webb-sida används <IMG> kommandot. Det behövs ingen </IMG> tagg.

Grafikfilerna brukar ha GIF eller JPEG format. GIF-format borde användas för bilder som du ritar själv (typ en ikon) och JPEG-format borde användas för fotografier.

<IMG SRC="bildnamn">

Detta är kommandot för att infoga en bild. SRC attribut måste användas för att specificera var bilden finns.
Exempel: <IMG SRC="min_ikon.gif">

<IMG ALIGN=LEFT el. RIGHT>

En ALIGN=LEFT bild kommer att placeras vid vänstra marginalen. Om vänstra marginalen är upptagen, kommer bilden att röra sig ner till nästa lediga plats. All följande text kommer att flyttas ut till höger av bilden. Samma sak gäller för ALIGN=RIGHT, där bilden rör sig till högra marginalen och texten flyttas till vänster.

<IMG ALIGN=TOP el. TEXTTOP el. MIDDLE el. ABSMIDDLE el. BASELINE el. BOTTOM el. ABSBOTTOM>

Med dessa attribut kan man välja bildens placering i förhållande till texten. Dessa attribut är ett sätt att rätta de problem i föregående implementation av HTML, utan att ta bort kompatibiliteten med befintliga webb-sidor. ALIGN=TOP är oförändrad; den placerar sig vid toppen av den högsta punkten på raden. ALIGN=TEXTTOP gör det som många trodde TOP skulle gjort; den placerar sig vid toppen av den högsta texten på raden. Det är oftast men ej alltid detsamma som TOP. ALIGN=MIDDLE är oförändrad; den placerar baslinjen av raden vid mitten av bilden. ALIGN=ABSMIDDLE gör det som MIDDLE borde har gjort; den placerar mitten av raden vid mitten av bilden. ALIGN=BASELINE och ALIGN=BOTTOM placerar baslinjen av raden vid botten av bilden. ALIGN=ABSBOTTOM placerar botten av raden vid botten av bilden.

<IMG WIDTH=punkter HEIGHT=punkter>

WIDTH och HEIGHT attributer talar om för webb-läsaren bildens vidd och höjd. De kom primärt för att snabba på webb-läsarens visning av sidor, då webb-läsaren ej behöver vänta för bilden att laddas för att veta bildens storlek. Om du har satt dessa attributer kommer texten att visas först så att besökaren kan läsa den under tiden som bilden/bilderna laddas ned.

<IMG BORDER=värde>

Men denna attribut kan storleken av bildens ram ändras. Se upp för att sätta BORDER=0 på en bild som är en länk. Bilden får ej en färgad ram, och användaren kanske ej ser att bilden är "klickbar".

<IMG VSPACE=värde HSPACE=värde>

Man vill kanske ej att texten kommer för nära en bild. VSPACE sätter den lediga plats ovan och under bilden och HSPACE sätter den lediga plats höger och vänster om bilden.

<IMG ALT="text">

Men denna attribut kan man skriva alternativa texter till bilden. Om man pekar på bilden med musen, kommer denna text att visas som en "tool tip". Om någon använder en text-baserad webb-läsare eller har bildfunktionen avstängd kommer denna text att visas istället för bilden.

<IMG ISMAP eller USEMAP>

Se imagemap kommandot.

Denna bild har alt="April System Design AB". Peka på den med musen!

Denna bild har ALIGN=MIDDLE.

Denna bild har ALIGN=ABSMIDDLE och HSPACE=10.

Denna bild har BORDER=5.

Denna bild har ALIGN=RIGHT. Gardenia är en krukväxt för den kunniga. Den tål inte kalk i jorden eller i vattnet. Den vill ha en jämn fuktighet både i luften och i jorden.

Denna bild har ALIGN=LEFT. Gardenia är en krukväxt för den kunniga. Den tål inte kalk i jorden eller i vattnet. Den vill ha en jämn fuktighet både i luften och i jorden.

Transparenta bilder

En färg i en GIF-bild kan göras genomskinlig. När bilden visas upp, syns bakgrunden igenom den "färg" som gjorts transparent. Det finns många verktyg för att jobba med GIF-bilder, för att göra om följande exempel har vi använt oss av MetalWorks från SoftQuad. Ett populärt "shareware" verktyg för att jobba med GIF-bilder är Lview Pro som även har möjlighet att göra en transparent bakgrund. Man kan också använda PhotoShop från Adobe eller PhotoPaint från Corel.

En bild med vanlig grå bakgrund:

Samma bild med transparent "grå" bakgrund:

Obs att bara en färg kan göras transparent. Det behöver inte vara bakgrunden som görs transparent, men ofta är det så.

För att skapa en sådan bild sätter man ihop ett antal vanliga GIF-bilder precis som när man gör en tecknad film.

Mellan varje bild finns ett "kontroll block" som specificerar pausen mellan bilderna (dvs hastigheten av rörelsen) och om bakgrunden är transparent eller ej. Man kan börja den animerade bilden med ett "loop block" som säger till webb-läsaren att visa upp bilden om och om igen.

Här ser man ett exempel av en ganska enkel animerad GIF-bild.

Denna bild skapades av 16 vanliga GIF-bilder, som satts ihop och visas upp en efter en. Varje bild har ytterligare en bokstav ändrad tills alla blir ändrade, och sedan har dom ändrats tillbaka igen en efter en. De vanliga bilderna ser ut så här:

med mera ...

Det är en ganska enkel effekt. Med hjälp av lite fantasi kan man skapa ganska imponerande bilder.

Det finns många verktyg som används för att bygga upp en animerad GIF-bild. Vi har använt oss av " The GIF Construction Set". På Internet finns ett "galleri" som visar animerade GIF-bilder. Den heter "The 1st Internet Gallery of GIF Animation".

Färre färger ger snabbare bilder

Vanligtvis har en GIF bild sparats i 8-bits 256-färg format. Om man vill göra GIF-filen mindre, kan man spara bilden med färre färger t.ex. i 6-bits 50-färg format eller 4-bits 16-färg format. Detta gör att bilden blir laddad ner ifrån internet mycket snabbare utan att förlora detaljer. Det finns många verktyg för att jobba med GIF-bilder, för att göra om följande exempel har vi använt oss av MetalWorks från SoftQuad. Ett populärt "shareware" verktyg för att jobba med GIF-bilder är Lview Pro som även har möjlighet att spara bilden med färre färger. Man kan också använda PhotoShop från Adobe eller PhotoPaint från Corel.

Jämföra två bilder i 4-bits 16-färg format (1430 bytes) och 8-bits 256-färg format (2262 bytes):

Följande exempel tar 86 870 bytes i 256-färg format men bara 56 098 bytes i 50-färg format.

Klicka här för att se en bild i 8-bits 256-färg format (86KB).

Klicka här för att se samma bild i 6-bits 50-färg format (bara 56KB).

Långt ifrån alla av dina besökare kommer att ha stöd för alla de 16 miljioner färger som man kan har i en JPEG bild.

Med hjälp av IMAGEMAP kommer man till olika webb-sidor beroende på var i bilden man klickar. Man definierar olika områden i bilden, varje område har sin egen länk. Dessa områden med deras tillhörande länkar kallas för en IMAGEMAP.

Server-Side och Client-Side IMAGEMAPs

På en Server-Side IMAGEMAP är område-och-länk information lagrad i en textfil på webb-servern. När man klickar på bilden skickas ett meddelande till webb-servern som talar om för webb-läsaren vilken sida den ska gå till.

På en Client-Side IMAGEMAP är område-och-länk information lagrad i det aktuella html-dokumentet. När man klickar på bilden bestämmer webb-läsaren vilken sida den ska gå till utan att behöva fråga webb-servern.

Det traditionella sättet: Server-Side IMAGEMAPs

   <A HREF="sida.html"><IMG SRC="bild.gif"></A>

   <A HREF="/Scripts/imagemap.map"><IMG SRC="bild.gif" ISMAP></A>

När man klickar på bilden ser webb-läsaren ISMAP attributen och skickar HREF URL:n till webb-servern tillsammans med mus positionen. I ovanstående exempel skulle följande URL skickas till webb-servern (i detta fall www.april.se) om musen klickades på position 30,20.

   http://www.april.se/Scripts/imagemap.map?30,20

Det förbättrade sättet: Client-Side IMAGEMAPs

Jämfört med server-baserade IMAGEMAPs, Client-Side IMAGEMAP är enklare att konfiguera och underhålla eftersom all information finns i html-filen.

En Client-Side IMAGEMAP ser nästan ut som en Server-Side IMAGEMAP men ISMAP attributen byts ut mot USEMAP attributen. USEMAP attributen pekar på en IMAGEMAP i samma html-dokument:

   <IMG SRC="bild.gif" USEMAP="#bildmap">

Client-Side IMAGEMAP formatet

Genom att lägga till USEMAP attributen till ett <IMG> kommando gör man den till en Client-Side IMAGEMAP. Värdet i USEMAP attribut talar om var denna IMAGEMAP finns. Det börjar med '#' om det ligger i samma HTML dokument, annars äe det en vanlig URL.

<img src="blueyellow.gif" width="200" height="100" border="0" alt="" USEMAP="#MAP1">

Bildens olika klickbara områden är definerade med MAP och AREA kommandon. Dessa kommandon beskriver varje klickbara område och talar om vad ska hända när man klickar. Basformatet är::

<MAP NAME="mapp_namn">
<AREA SHAPE="RECT" COORDS="vänster-x,topp-y,höger-x,bottom-y" HREF="URL">
</MAP>

Till exempel:

<MAP NAME="MAP1">
<AREA SHAPE="RECT" COORDS="1,1,100,100" HREF="blue.html">
<AREA SHAPE="RECT" COORDS="101,1,200,100" HREF="yellow.html">
</MAP>

NAME attributen ska vara det samma som i <IMG USEMAP="..."> attributen.

SHAPE attributen kan vara "RECT" (rektangel), "CIRCLE" (cirkel) eller "POLY" (polygon/månhörning). Om SHAPE ej används blir det automatiskt "RECT" (rektangel).

COORDS attributen specifiserar koordinaterna av arean i pixlar. För en rektangel är det COORDS="vänster-x,topp-y,höger-x,bottom-y". För en cirkel är det COORDS="mittpunkt-x,mittpunkt-y,radie". För en månghörning är det beskrivet med par COORDS="x1,y1,x2,y2,x3,y3...xn,yn".

HREF attributen specifiserar vart man kommer där man klicka.

NOHREF attributen används för att göra en del av en bild oklickbar.

Om två AREA överlappar varandra är det den som kommer först i MAP:en som gäller.

<MAP NAME="MAP2">
<AREA SHAPE="RECT" COORDS="1,1,100,100" HREF="blue.html">
<AREA SHAPE="RECT" COORDS="101,1,200,100" HREF="yellow.html">
<AREA SHAPE="RECT" COORDS="1,101,200,120" HREF="green.html">
</MAP>
<img src="blueyellow.gif" width="200" height="120" border="0" alt="" USEMAP="#MAP2">

Uppdaterad 19:e november 2000