Untitled Document
Man kan linke til billeder på to forskellige måder. Enten ved at bruge den
ovenfor forklarede model med <A> tag´et, der fører til, at
billedet bliver vist i et browservindue for sig selv. Endvidere kan man få vist
billedet som en del af dokumentet, og det er muligt at bestemme størrelse og til
en vis grad også placeringen af billedet. Billedet kan sættes ind i et linktag
og dermed føres brugeren videre ved klik på billedet. En helt simpel indsættelse
af et billede i et dokument kan foregå som her :
<IMG SRC="billede.gif">
(tag´et er ikke et
containertag).
Jeg har forsøgt at give en oversigt over de mange muligheder i IMG tag´et i
nedenstående tabel :
|
Parameter |
Værdier |
Brug |
ALT |
En hvilken somhelst tekst |
Angiver en alternativ tekst til browsere, der ikke kan vise billeder.
Nogle browsere viser også denne tekst når musen føres over billedet. Bør
altid udfyldes. |
ALIGN |
LEFT, RIGHT, BOTTOM, TOP eller MIDDLE |
LEFT og RIGHT angiver hvor på siden billedet skal
vises. Resten angiver hvor den efterfølgende tekst placeres i forhold
til billedet |
HEIGHT |
Højde i pixels el.% |
Angiver billedets højde |
WIDTH |
Bredde i pixels el. % |
Angiver billedets bredde |
BORDER |
Et tal (også 0) |
Angiver billedets rammebredde, hvis billedet bliver brugt som
link |
HSPACE |
Et tal (også 0) |
Horisontal plads om billedet |
VSPACE |
Et tal (også 0) |
Vertikal plads om billedet |
ISMAP |
Ingen |
Imagemap (se nedenfor) |
USEMAP |
URL |
Imagemap (se nedenfor) |
Når du bruger grafik på dine sider, bør det altid være i formaterne GIF eller
JPEG, da disse formater understøttes af flest browsere. Billedbehandling vil jeg
dog ikke komme videre ind på her, da det er et stort emne i sig selv. Dog skal
det lige nævnes, at man bør være meget påpasselig med "store" eller mange
billeder på sin side, idet de kan forlænge downloadtiden ganske
betragteligt.
Imagemaps er betegnelsen for "klikbar" grafik. Der findes to former for
imagemaps : ISMAP og USEMAP. ISMAP er serverafhængigt,
og jeg vil derfor anbefale brugen af USEMAP, der ikke behøver
serverunderstøttelse og hvor man kan have hele koden i sit ene dokument.
Imagemaps fungerer ved, at man definerer nogle områder i sit billede, der,
ved klik derpå, fører læseren videre til et link. Det er muligt at udregne disse
koordinater selv, men da der findes udmærkede programmer på nettet, der kan gøre
det meget lettere, vil jeg ikke anbefale at foretage udregningerne selv. Det er
dog nødvendigt at kende syntaksen alligevel, så den angives i kort form her
:
Billedet angives som alle andre billeder, men derudover angives at der er
tale om en USEMAP og et navn på denne. Navnet kan man selv vælge.
Et eksempel kunne være :
<IMG SRC="billede.gif" USEMAP="#navn"
BORDER="0">
Det indsatte hashmark i navnet angiver, at koordinaterne kan hentes i selve
dokumentet. Derfor indsættes derefter tag´et <MAP
NAME="navn">, der fortæller browseren, at den kan finde koordinater
m.v. for "navn" her. Herefter defineres selve koordinaterne og de tilhørende
links. Koordinaterne kan, ved hjælp af SHAPE defineres som
RECT (rektangel), CIRCLE (!) og POLYGON
(!), og de angives i formen x1,y1,x2,y2… Er der tale om en cirkel skal man
angive centrum og radius, ellers defineres hjørnerne. Det var vist ikke særligt
klart, så lad os se på et eksempel :
<IMG SRC="billede.gif" USEMAP="#navn" BORDER="0">
<MAP
NAME="navn">
<AREA SHAPE="POLY"
COORDS="18,142,19,201,60,201,60,143,18,142" HREF="link1.html">
<AREA
SHAPE="RECT" COORDS="28,60,198.200" HREF="link2.html">
<AREA SHAPE=POLY
COORDS="210,79,209,139,270,141,269,79,210,79"
HREF="link3.html">
</MAP>
(jeg har ikke
kontrolleret koordinaterne…!)
Er koordinaterne ellers rigtige burde billedet "billede.gif" nu optræde på
siden med mulighed for at klikke sig videre til et af de tre links, alt efter
hvor i billedet man klikker.