LÄGGA IN EN BILD
RAM RUNT BILDEN
STORLEK
LÄNKA MED BILD
ALT-TAGGEN
DELA IN BILDEN I ZONER
Koden är denna:
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.
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:
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.
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.
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>
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:
För musen över här och se vad som händer.
<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.
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?