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



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 ]