Till Startsidan
JavaScript.nu / HTML-kurs / Bilder

Bilder 

I detta kapitel:
Spara bilder
Ladda ner bilder
Infoga bilder
L�nka till en bild
Bild med ram
Text mellan bilder
Bild i mitten
Bilden p� olika kanter
Text p� bild
Storleken
L�ng tid att ladda
M�nga l�nkar (image map)
�ndra en bild med musen
Test
Relaterat:
Hj�lpdelen
om bilder


Vad vore internet utan bilder?
Ganska tr�kigt, inte sant?
Du ska nu l�ra dig infoga bilder p� din hemsida. Och det �r l�tt som en pl�tt. F�rst vill jag dock passa p� att p�minna dig om att i princip alla bilder p� internet skyddas av upphovsr�ttslagen. Med det menas kort sagt att du m�ste fr�ga sidans �gare innan du f�r ta hans/hennes bild och anv�nda den p� din egen sida.

Om du ser en bild som du tycker om p� en annan sajt, kan du "sno" den genom att trycka med h�ger musknapp p� bilden och sedan trycka p� Save Image As.../Spara bild som....
Kom ih�g att alla bilder p� internet b�r ha en fil�ndelse som �r gif, jpg eller png (undvik dock helst png, eftersom detta �r ett nytt filformat som inte alla webbl�sare kan visa). Fil�ndelsen �r det som finns efter punkten i filnamnet. Du b�r allts� inte ladda upp en bild som heter "bild.bmp" och anv�nda den som bild. Den b�r i s� fall f�rst g�ras om till en .gif-, .jpg- eller .png-bild. Vissa webbl�sare klarar n�mligen inte av att visa .bmp-bilder.

Om du s�ker efter bilder b�r du bes�ka denna sajt s� kommer du att hitta tusentals med bilder, animationer, sm�filmer, knappar etc.
Fr�n den sidan f�r du gratis ladda ner hur mycket bilder du vill.

Om du vill infoga en bild p� din hemsida skriver du:
<IMG SRC="filnamn.bildformat">

Filnamnet �r t.ex. hus.

Bildformatet �r t.ex. gif.
IMG
IMG st�r f�r "IMaGe" (=bild) och infogar en bild p� sidan.
Attribut
SRC   Adressen till bilden
BORDER   Bildens rams tjocklek
ALIGN   Anger bildens placering p� sidan. Giltiga v�rden: ABSBOTTOM, ABSMIDDLE, BASELINE, BOTTOM, LEFT, MIDDLE, RIGHT, TEXTTOP samt TOP
ALT   Beskrivning av bilden som visas n�r musen f�rs �ver bilden
WIDTH   Bildens bredd
HEIGHT   Bildens h�jd
LOWSRC   Bara f�r Netscape: Visar en (oftast mindre) bild innan den riktiga bilden laddas in.
USEMAP   G�r bilden till en "karta" s� att bilden kan l�nka till flera sidor
VSPACE   Anger antalet pixlar som ska vara tomma �ver och under bilden
HSPACE   Anger antalet pixlar som ska vara tomma till h�ger och v�nster om bilden

F�r att g�ra en l�nk till en bild, skriv:
<A HREF="hus.gif">Se v�r sommarstuga</A>

I detta fall �r bildens namn hus och bilden �r gjord i formatet gif. Bilden dyker nu upp i en sida med vit bakgrund och utan text.

F�r att s�tta en ram runt bilden beh�ver du bara infoga den r�da texten i raden nedan.
<IMG SRC="filnamn.gif" BORDER="4">

D� blir det s�h�r:

Du kan �ndra 4 till vad du vill. Om du anger ett h�gre v�rde �n 4 f�r du en tjockare ram.
Om du t.ex. anger 10 som v�rde blir det s�h�r:

Om du vill ha en text MELLAN 2 bilder, skriv s�h�r:

<IMG SRC="filnamn.gif" ALIGN="left">
en text
<IMG SRC="filnamn.gif" ALIGN="right">

Resultatet blir d�:

en text




Du kan ocks� centrera texten, allts� s� att den hamnar i mitten av bilderna. F�r att g�ra det skriver du:
<IMG SRC="filnamn.gif" ALIGN="left">
<CENTER>en text</CENTER>
<IMG SRC="filnamn.gif" ALIGN="right">

Resultatet blir:

en text


F�r att centrera en bild ensam skriver du:
<CENTER><IMG SRC="filnamn.gif"></CENTER>

Resultatet blir:

F�r att centrera en bild eller f�r att flytta den till n�gon sida av din sida skriver du.
<P ALIGN="right"><IMG SRC="filnamn.gif"></P>
<P ALIGN="center"><IMG SRC="filnamn.gif"></P>
<P ALIGN="left"><IMG SRC="filnamn.gif"></P>   (standard)

Resultatet blir:

F�r att en text ska dyka upp om du drar musen �ver bilden skriv:
<IMG SRC="filnamn.gif" ALT="Denna text kommer att synas">

Resultatet blir (dra musen �ver bilden f�r att se resultatet).
Denna text kommer att synas

Du kan �ndra bredd och h�jd p� bilden genom att infoga WIDTH och/eller HEIGHT (WIDTH=bredd och HEIGHT=h�jd) i IMG-taggen.
T.ex. skriver du...:
<IMG SRC="filnamn.gif" WIDTH="50" HEIGHT="100">
...F�r att n� detta resultat:

V�rdet kan ocks� anges i %.
T.ex. skriver du....:
<IMG SRC="filnamn.gif" WIDTH="50%">
...f�r att n� detta resultat:

Att ha WIDTH- och HEIGHT-attribut i IMG-taggen �r otroligt bra f�r att sidan ska ladda mycket snabbare. L�s mer om det under layouttips.
Nu har du l�rt dig det viktigaste man b�r kunna om bilder. Allt under denna text �r n�got av en �verkurs och kan hoppas �ver utan problem.

Om du har en v�ldigt stor bild p� sidan s� kan du l�ta en mindre (r�knat i kilobyte, inte storleksm�ssigt (=hur stor yta den tar p� sk�rmen)) bild ladda in f�rst s� att bes�karen ska se vad bilden f�rest�ller och s� att den riktiga bilden kommer in senare.
Detta g�r du genom att skriva in detta:
<IMG SRC="storbild.gif" LOWSRC="litenbild.gif"

Det som h�nder �r att f�rst s� kommer "litenbild.gif" att visas och sedan kommer "storbild.gif" att visas.

OBS: Om n�gon av bilderna �r animerade kommer den att visas hela tiden, s� ha INTE en animerad bild som "LOWSRC", eftersom bara den kommer att visas.
�r b�da bilderna animerade (b�de src och lowsrc) s� kommer bilderna att skifta hela tiden och f�rs�ka visa sig sj�lva l�ngst upp. Detta ska du allts� undvika.
Detta fungerar endast i Netscape, inte i Internet Explorer.
Jag avr�der fr�n att anv�nda detta attribut som bara g�r att sidan totalt sett tar l�ngre tid att ladda eftersom tv� bilder m�ste laddas ner. Dessutom fungerar det bara i Netscape.

Det som jag ska l�ra ut nu kan vara sv�rt om du �r nyb�rjare p� HTML. Jag r�der dig att avvakta fr�n att l�sa om du nyss b�rjat med HTML (alternativt kan du l�sa fast inte bli sur om du inte f�rst�r :) ).

Som du (s�kert) vet skriver man...
<A HREF="http://www.n�gonstans.com/"><IMG SRC="filnamn.gif"></A>
...F�r att g�ra en bildl�nk till www.n�gonstans.com (mer information om att g�ra l�nkar finns h�r).
Men det g�r ocks� att g�ra s� att en bild l�nkar till OLIKA sidor.
Nedan �r ett exempel (ramen p� bilden kan man ta bort om man vill). Trycker du p� detta exempel kommer du till en ej existerande sida.
Fina figurer :)

Nedan ser du koden f�r figuren jag har ovan (textf�rgen=figurens f�rg): 

<MAP NAME="figur1">
<AREA SHAPE="rect" COORDS="0,0,51,51" HREF="rektangelsidan.html">
<AREA SHAPE="circle" COORDS="91,26,26" HREF="cirkelsidan.html">
<AREA SHAPE="poly" COORDS="145,0,124,41,124,51,185,51,185,43,166,43,145,0" HREF="enfigursidan.html">
</MAP>
<IMG SRC="bild.gif" USEMAP="#figur1" BORDER="2" WIDTH="185" HEIGHT="51" ALT="Fina figurer :)">
F�rst har vi v�ran MAP-tagg, som vi d�pt till "figur1". Vi kan v�lja vad vi vill h�r.
Sedan har vi v�ra AREA-taggar. Den f�rsta inneh�ller shape="rect". Det betyder att formen (=shape) ska vara en rektangel (=rect/rectangle). Om man inte skriver n�gon SHAPE-attribut s� blir AREA-taggen automatiskt en rektangel (SHAPE="recr").

Det jag ska skriva nu kr�ver en del matematiska termer. Inom parantes har jag skrivit detsamma p� ren svenska f�r de som inte f�rst�r vad jag menar. :)
Bilden �r nu som ett koordinatsystem med p:(0,0) i bildens v�nstra h�rn l�ngst upp (punkten l�ngst upp till v�nster heter 0,0 (f�rsta nollan st�r f�r X, den andra f�r Y (se nedan))). Koordinatsystemet inneh�ller endast absoluta v�rden (inga v�rden �r "minus", allts� mindre �n noll).
�kande X-led g�r (som vanligt) fr�n v�nster till h�ger (desto mer �t h�ger du har din figur, desto h�gre X-v�rde f�r den. �r din figur 100 pix (100 bildpunkter p� sk�rmen) �t h�ger fr�n bildens v�nstra kant s� �r X-v�rdet 100). Y-v�rdet �kar desto l�ngre ner i bilden man kommer.

Ett koordinatsystem
Eftersom alla inte vet vad ett koordinatsystem �r s� finns ett exempel h�r (detta exempel �r med absoluta v�rden (talen �r inte mindre �n noll) p.g.a. att bilder i HTML anges med absoluta v�rden). T�nk dig att figuren �r en bild med tv� f�rgade figurer. Figurernas h�rn �r h�r markerade med deras koordinater. Jag har �ven markerat koordinatsystemets b�rjan ((0,0)) och slut((10,10)) med r�tt koordinater.
OBS: Denna bild �r INTE skalenlig. jag har skrivit att bilden ska vara 10 pix h�g och 10 pix bred i koordinaterna, egentligen �r den 200 pix h�g och 200 pix bred.

Har du nu f�rst�tt vad jag har skrivit ovan s� �r det bara att l�sa p�... :)

Kvadraten: (SHAPE="rect/rectangle")
I den f�rsta AREA-taggen (den bl�a) har jag koordinaterna 0,0,51,51 (COORDS="0,0,51,51"). Det betyder att figuren (den bl�a kvadraten) har sitt h�rn p� koordinaten 0,0 (=l�ngst upp till v�nster) och det andra h�rnet (h�rnet p� motsatt sida) p� koordinaten 51,51. Trycker man p� rektangeln kommer man till rektangelsidan.html (HREF="rektangelsidan.html").

Cirkeln: (SHAPE="circ/circle")
Cirkelns mitt �r p� koordinaterna 91,26 och dess radie �r 26 pix l�ng (COORDS="91,26,26"). Om man trycker p� cirkeln kommer man till cirkelsidan.html (HREF="cirkelsidan.html").

Den valfria figuren: (SHAPE="poly/polygon")
Den valfria figuren har en hel del koordinater (145,0,124,41,124,51,185,51,185,43,166,43,145,0). De �r skrivna som X1,Y1,X2,Y2,X3,Y3 etc. Det betyder att man t�nker sig att man drar ett streck fr�n 145,0 till 124,41 till 124,51 etc. N�r man dragit fr�n den f�rsta till den sista (som m�ste vara samma som den f�rsta (markerade med r�tt)). s� har man skapat ett markerat omr�de. Trycker man i detta omr�de kommer man till enfigursidan.html (HREF="enfigursidan.html")

Nu har jag skrivit </MAP>, vilket avslutar min "karta" (eng. map). Kartan heter, som vi tidigare sa, figur1. Vill vi ha fler s�dana h�r kartor f�r vi namnge dem till n�got annat, t.ex. figur2.

Sist har vi sj�lva bilden (vad annars?). :)
Den g�r du precis som vanligt, fast du m�ste ha med USEMAP="#figur1" (figur1=det du d�pt din karta till). Detta �r f�r att bilden ska veta vad den ska ha f�r karta, annars �r det ju en helt vanlig bild utan l�nkar.

I dina AREA-taggar kan du naturligtvis ha TARGET-attributen (vet du inte vad detta �r s� strunta i det).

Om du vill att en bild ska �ndras n�r man f�r musen �ver den m�ste du l�ra dig JavaScript, alternativt s� kan du anv�nda mitt f�rdiga JavaScript som finns h�r (kopiera och klistra till din sida).
Till nyb�rjare s� rekommenderar jag naturligtvis att bara kopiera mitt JavaScript som redan �r f�rdigt, det �r ju l�ttast s�. ;)

Test
I slutet av varje kapitel i HTML-kursen finns n�gra fr�gor som du ska svara p� f�r att testa dina kunskaper inom HTML. Om du har f�tt alla r�tt s� �r det bara att g� vidare, fast har du haft n�got fel kan det kanske vara klokt att f�rs�ka lista ut vad som kan ha varit fel. Givetvis kan du g� vidare �ven om du inte svarar r�tt p� alla fr�gor.
Vilket av f�ljande b�r undvikas?
<IMG SRC="bild.gif">
<IMG SRC="bild.bmp">
<IMG SRC="bild.jpg">

Vad �r skillnaden mellan <IMG SRC="bild.gif"> och <IMG SRC="bild.gif" BORDER="0"> (om bilden inte �r en l�nk)?
Ingen skillnad.
Det f�rsta exemplet har en ram runt sig.
Det andra exemplet har en ram runt sig.

Vad g�r WIDTH- och HEIGHT-attributen?
Best�mmer bildens bredd och h�jd.
Best�mmer ramens tjocklek.
Best�mmer bildens placering p� sidan.

Vilket av f�ljande attribut m�ste man ha i IMG-taggen?
ALIGN
SRC
WIDTH

Vilka av f�ljande attribut tror du oftast anv�nds i IMG-taggen?
BORDER, ALIGN, WIDTH och HEIGHT
BORDER, ALT, WIDTH och HEIGHT
ALIGN, ALT, WIDTH och HEIGHT



Copyright © Omid Rouhani 1997-2022; Alla r�ttigheter reserverade.
Guider: [ HTML guide ] - [ JavaScript guide ] - [ DHTML guide ] - [ Perl guide ] - [ Sitemap ]