7 Billeder

7.1 Billeder

7.2 Klikbare Kort

7.2.1 Definition af et Klientbaseret Klikbart Kort

7.2.2 Definition af et Serverbaseret Klikbart Kort

The Web Writer Wizard's Guide til Internet Programmering

Billeder er med til at peppe en hjemmeside op og give den liv. De kan bruges til enten at understøtte teksten, pynte op på siden eller være sidens indhold. Generelt bør man dog holde sig til billeder, der har en eller anden funktion på siden. Ellers kan den hurtigt blive meget tung at danse med, også selv om hurtige forbindelser til en billig penge bliver mere og mere almindelige.

Man indsætter et billede på hjemmesiden med elementetet IMG, der ikke har noget sluttag:

<IMG src="author.jpg" alt="The Web Writer Wizard">

Dette eksempel indeholder en smule tekst samt et billede af The Web Writer Wizard himself (sådan ser kamelen altså ud, hvis I ikke allerede har set billedet på den side, jeg har lavet om mig selv). Man henviser til billedet ved hjælp af attributten src, hvis værdi er en URL til det pågældende billede. Det vil som regel dog være en billedfil i samme bibliotek som selve HTML-dokumentet eller i et bibliotek tæt ved, men kan i realiteten være en billedfil overalt på Internet.

Billeder kan også indsættes som objekter, hvilket er beskrevet i næste kapitel. Jeg vil for en god ordens skyld pointere, at IMG-elementet ikke er under afvikling i [HTML40].

Du bør læse mere om de attributter og hændelser, der er knyttet til IMG-elementet.

En mere avanceret anvendelse af billeder på hjemmesiden er klikbare kort, hvor to eller flere områder i billedet fungerer som kildeankre i henvisninger til andre ressourcer.

Selve billedet er et ganske almindeligt billede, der indsættes med IMG-elementet som beskrevet ovenfor. Derudover skal man definere kortet, dvs. de områder i billedet, der skal fungere som ankre.

Der findes to typer klikbare kort:

Klientbaserede: hvor det klikbare kort er defineret på klientsiden (som regel i selve HTML-dokumentet), og der er browseren, der fortolker koordinaterne på det sted i billedet, hvor brugeren klikkede og aktiverer henvisningen
Serverbaserede: hvor koordinaterne for klikket sendes til serveren, der behandler dem i et CGI-script eller lignende

Bortset fra, at klientbaserede kort sparer en del kommunikation til serveren, er der to andre grunde til, at klientbaserede, klikbare kort er at foretrække:

De viser brugeren med det samme, om musens markør befinder sig over et aktivt område i billedet
De kan anvendes af brugere, der ikke har en grafisk browser

Der er dog en del ældre browsere, der ikke understøtter klientbaserede kort, ligesom serverbaserede kort kan komme på tale, hvis kortet er for kompliceret til et klientbaseret kort.

Selve kortet defineres med tag'et <MAP>, hvis sluttag </MAP> også er påkrævet. Mellem de to tags definerer man de områder i billedet, der kan klikkes på. Et sådant område defineres med elementet AREA, der ikke har noget sluttag:

<MAP name="esbjerg">
    <AREA alt="The Web Writer Wizard"
         shape="poly" coords="188,356,197,356,190,349,188,345"
         href="http://www.wwwizard.dk/">
    <AREA alt="Esbjerg Modelbyggerforening"
         shape="rect" coords="361,448,381,471"
         href="http://www.embf.dk/">
    <AREA alt="Esbjerg Edb-Skole"
         shape="circle" coords="42,78,10"
         href="http://www.ehs.dk/EDBSkole/">
</MAP>

<IMG src="esbjerg.jpg" alt="Kort over Esbjergs Indre By" usemap="#esbjerg">

Denne enkle side viser et klikbart kort over Esbjerg indre by, hvor de klikbare områder henviser dels til dette websted, dels til flere af de steder, der er henvisninger til på siden "Om Forfatteren". Den ene henvisning er tæt på kortets øverste, venstre hjørne, mens der en henvisning lige til venstre for, der hvor jernbanen (den sorte linie) deler sig og den sidste henvisning er tæt på det nederste, højre hjørne.

Der er en række hændelser og attributter, der knytter sig til klikbare kort.

Klikbare Kort

Definition af et Klientbaseret Klikbart Kort

Definition af et Serverbaseret Klikbart Kort

I de tilfælde, hvor man ønsker at understøtte ældre browsere, eller hvis det klikbare kort er for kompliceret til et klientbaseret kort, kan det som nævnt blive nødvendigt at anvende et klikbart kort, der behandles af et CGI-script eller lignende på serveren.

For at et serverbaseret kort skal fungere med et billede, skal IMG-elementet stå inde i et A-element, ligesom den booleske attribut ismap skal være sat. href-attributten i A-elementet skal desuden henvise til det program på serveren, der skal behandle kortet.

Når brugeren så klikker på billedet, sendes koordinaterne til serveren med dokumentet. Ligesom ved de klientbaserede kort beregnes koordinaterne ud fra billedets øverste, venstre hjørne. Følgende lille uddrag af et HTML-dokument viser opsætningen af et serverbaseret klikbart kort:


  <A href="http://www.ajax.dk/cgi-bin/menu.pl">
    <IMG src="menubar.gif" ismap alt="menu">
  </A>

der behandler et billede, der forestiller en menulinie.