Loading ... ... vent!
 
 

Grafik

 
Indrykket: 11-04-2005
HTML tags


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.






 

Find information om: Hjemmesideskole Gratis hjemmeside hjælp Hjemmesider Lav egen hjemmeside Hjemmeside Egen hjemmeside Guide Webdesign Hjemmesidedesign

(Hovedkategori: Programmering)






 
Du er her: Grafik - (Hovedkategori: Programmering)
Guide til hjemmeside - HTML tags - - info om Grafik -
 


Oplysninger på denne side må ikke erstatte professionel rådgivning.
Handlinger der foretages udelukkende udfra oplysninger på denne side er på eget ansvar.