LÄGGA IN EN BILD
Det första vi ska göra är att lägga in bilden.
<IMG SRC="bild.jpg">
Med denna enkla tagg smäller du in en bild. Heter bilden inte bild.jpg får du kalla den för vad den nu heter istället. Du kanske har bilderna i en katalog "bilder". Skriv då "bilder/bild.jpg" innanför snuttarna.
Bilden hamnar där den hamnar. Vill du styra var den hamnar så får du använda taggarna angivna i "GRUNDLÄGGANDE HTML-PROGRAMERING", avsnittet "textformatering". Dom duger bra. Eller kan du lägga in den i en tabell med border=0 osv.
Bilden kommer nu att se ut så här:

RAM RUNT BILDEN
Som du ser finns det en ram runt bilden. Detta är normalt deafult, dvs standard inställning. Den är två pixlar bred. Du kan styra det med bordertaggen. Så här:
<IMG SRC="bild.jpg" BORDER="x">
Nu prövar vi border 0, 2 och 10.

STORLEK
Det finns två sätt att påverka bildens storlek: ange i procent och pixlar. Koden ser ut så här:
Pixlar:<IMG SRC="bild.jpg" BORDER="0" HEIGHT=300 WIDTH=250>
Procent:<IMG SRC="bild.jpg" BORDER="0" HEIGHT=20% WIDTH=20%>
Vad som händer när man anger i pixlar är trivialt. Procent relaterar till skärmens mått.

LÄNKA MED BILD
Vissa tycker om att göra länkar med bilder. Om man klickar på länken så kommer man till stället. Pröva att klippa in denna koden:
<A HREF="http://www.smhi.se"><IMG SRC="/../..bilder/fish1.jpg" BORDER="0"></A>

ALT-TAGGEN
Om du lägger in bilder i länkar, tex ikoner, så kan det uppstå ett litet problem: Om det tar lång tid att ladda ner bilden kan det dröja innan man vet vad länken går till. Det problemet kan man komma runt genom att lägga till en ALT-tagg. Den gör att det kommer in text under tiden. Pröva även att föra musen över och se vad som händer. Koden är:<A HREF="http://www.smhi.se"><IMG SRC="../../bilder/fish1.jpg" BORDER="0" ALT="Liten gul lapp"></A>
Och resultatet blir så här:

DELA IN BILDEN I ZONER
För musen över här och se vad som händer.

Koden är denna:
<A HREF="bilder/fish1.jpg"><IMG BORDER="0" ISMAP USEMAP=#exempel src="bilder/fish1.jpg" height=200 width=200 alt="exempel"></A>
<MAP NAME="exempel">
<AREA SHAPE=RECT COORDS="0,0,99,99" HREF="http://www.smhi.se"">
<AREA SHAPE=RECT COORDS="100,0,200,99" HREF="http://www.fukt.bsnet.se">
<AREA SHAPE=RECT COORDS="0,100,99,200" HREF="http://www.pentax.com">
<AREA SHAPE=RECT COORDS="100,100,200,200" HREF="http://www.ec.se">
</MAP>

Att läsa kod och sen försöka räkna ut hur den fungerar kallas hacking. Lycka till.

OK, jag har fått vissa komentarer om att det är en övermäktig uppgift att knäcka den här koden. (Konstigt, jag knäckte Sunnets kod [loggan längst uppe] , och jag är inte supersmart) så jag lägger till dem nu.
Första raden: <AREA SHAPE=RECT COORDS="0,0,99,99" HREF="http://www.smhi.se""> - 0,0 är övre vänstra hörnet i den övre vänstra rutan. 99,99 är nedre högra hörnet i samma ruta.
Andra raden:<AREA SHAPE=RECT COORDS="100,0,200,99" HREF="http://www.fukt.bsnet.se">100,0 är övre vänstra hörnet i den övre högra rutan, 200,99 är nedre högra hörnet i samma ruta.
Osv. Klarare nu?

Tillbaka till första sidan.