|
Administreres af: |
| Klikbare kort, image maps | Tilbage til oversigtstabel Tilbage |
Testkørsel: PC, Windows 98DK
Af: novicen.dk
Klikbare kort kaldes også for image maps, der findes i to varianter: klient side image maps og server side image maps. Førstnævnte afvikles på serveren og sidstnævnte afvikles direkte i brugerens browser. Da den sidstnævnte type umiddelbart kan håndteres af os som programmører, vil det være denne type, som du her vil få gennemgået.
Når der tales om klikbare kort, drejer det sig om billeder, hvor kun en del af billedet er lavet til en henvisning. Forestil dig, at du har et danmarkskort, der skal vise forhandlerområderne af et produkt, hvor sælgerne hver arbejder i deres lokalområde: Jylland, Fyn, Sjælland. Du har ét billede, hvor hele Danmark er angivet men hvor du ønsker tre forskellige områder, ét for hver af de tre sælgere. Her vil klikbare område finde deres berettigelse, da hvert område kan henvise til hver sin forhandler. Du vil ikke her få vist et danmarskkort, da det bliver meget komplekst og stort at gennemarbejde. I stedet vil du få mulighed for at "starte i det små", hvor du kommer til at arbejde med de muligheder programmerne giver.
Du skal bruge to programmer; et program til at fremstille hjemmesider i (Stones WebWriter eller Netscape Composer vil række fint til dette sormål) samt et program, der kan skabe dine klikbare arealer (Map This). De nævnte programmer er gratis for private at anvende. Frontpage Express, i den version der følger med Explorer 4, kan ikke arbejde med klikbare kort, så denne editor kan du ikke anvende!
| Download Map This | Windows Stifinder |
| Download fra Internet | |
| Installation af programmer |
| Til top |
Det allerførste du skal gøre, er at oprette den web-side, hvori billedet skal anvendes. Du skal også indsætte billedet på web-siden og du skal have gemt din web-side. Her har vi gemt en fil, som vi har kaldt "klikkort.htm". Derefter starter du programmet, hvor du kan skabe dine klikbare område: Map This.
Når du har åbnet Map This, starter du din nye "map" ved at vælge "File" -> "New" eller ved at trykke på det blanke ark, som vises yderst til venstre i værktøjslinien. Du skal IKKE anvende "Open" funktionen, hvis det er første gang du vil starte din "map" op.
Map This fortæller dig nu, at du skal indlæse det billede, du ønsker at oprette delvise klikbare områder på.
Til denne demonstration har vi frembragt nedenstående, som du kan gemme på din komputer ved at højreklikke på og vælge "Gem billede" eller hvad du tilsvarende får vist i højrekliksmenuen.
Efter indlæsning i Map This bør du maksimere selve området, hvori billedet vises ved at du vælger knappen for maksimerfunktionen i det lille indlejrede vindue. Derefter vælger du det midterste symbol på den nye ikonlinie og som hedder "Show/hide area list", det der ligner et stykke papir.
Resultatet skulle gerne ligne nedenstående.
Yderst til venstre finder du tre små blå symboler. En rektangel, en cirkel og en polygon (mangekant). Det er de mulighed du har for at lave figurer. I praksis har du heller ikke brug for mere. Klik på den figur du vil anvende og træk/marker de punkter du vil sætte.
Rektangelformen tegnes fra øverste venstre hjørne mod nederste højre. Cirklen trækkes fra midten og udefter. Polygonen tegnes ved at de enkelte punkter, hvor linien "knækker" markeres med et enkeltklik. Ved næstsidste punkt dobbeltklikkes, hvorved polygonen lukkes.
Efterhånden som du får markeret de enkelte områder, vil der vise sig en arealliste i venstre side af Map This. Så længe du ikke har specificeret, hvortil de enkelte arealer skal henvise, vil listen være markeret med rødt.
Du kan vælge de enkelte områder ved at dobbeltklikke på det pågældende areal i areallisten. Herved kommer der en menuboks frem, hvor du kan angive den web-side du vil henvise til samt eventuelt, hvad der skal stå som alternativ tekst, når musen føres op over området, eller billedet ikke indlæses i browseren. Den alternative tekst (Internal comment ...) vil ikke vises i alle tilfælde, da der i forbindelse med klikbare kort helt eller delvis mangler understøttelse af denne mulighed i både Netscape Navigator og Internet Explorer.
Når du har defineret alle de områder du har oprettet skal du have gemt din "map", hvilket du gør ved "at putte den ind i" den fil, du oprettede i starten og hvor du anvender dit billede. Din "map" skal have et navn og dette navn skal overholde de begrænsning, som iøvrigt kendetegner Internet, nemlig ingen specialkarakterer og ingen mellemrum i navnet. Mappenavnet skal bruges til at fortælle billedet, at det skal hente yderligere data frem.
Du behøver ikke at udfylde andre felter men feltet for "Default URL:" er den web-side, du kan henvise til, hvis der bliver klikket andre steder på billedet end der, hvor du har foretaget dine markeringer.
Udfylder du ikke "Default URL:" vil du få en advarselsboks, som du kan springe forbi ved at klikke Ja.
Find frem til den web-side, du startede med at oprette og gemme. Sørg for at vælge den som det målpunkt, hvor du vil gemme din "map" og vær opmærksom på, at du skal flytte markeringen nederst i boksen, således at der bliver markeret ved "HTML"
Klik på Gem og der vil komme en ny pop-up boks, hvor du får vist, hvilke eventuelle eksisterende "map's" du har liggende i din web-side. Da dette er den første, er der selvfølgelig ikke andre og du vælger Ok.
Inde i dokumentet er din "map" blevet indsat lige før </BODY>. Du kan se, at den starter med <MAP NAME="former"> og slutter med </MAP>.
<BODY>
<CENTER><IMG SRC="billeder/klikkort.gif" BORDER="0" WIDTH="300" HEIGHT="100" ALIGN="BOTTOM" ALT="Klikbart kort"></CENTER>
<MAP NAME="former">
<!-- #$-:Image Map file created by Map THIS! -->
<!-- #$-:Map THIS! free image map editor by Todd C. Wilson -->
<!-- #$-:Please do not edit lines starting with "#$" -->
<!-- #$VERSION:1.30 -->
<!-- #$DATE:Wed Nov 24 15:01:32 1999 -->
<!-- #$PATH:E:\_KSC-data\novicen Folder\novicen\web\pc\mapthis\billeder\ -->
<!-- #$GIF:klikkort.gif -->
<AREA SHAPE=RECT COORDS="20,20,80,80" HREF="rektangel.htm" ALT="Gå til siden for rektangler">
<AREA SHAPE=POLY COORDS="151,19,162,41,183,52,161,60,151,80,140,60,121,49,140,39,151,19" HREF="polygoner.htm" ALT="Polygoner findes bag denne henvisning">
<AREA SHAPE=CIRCLE COORDS="250,52,29" HREF="cirkler.htm" ALT="Her findes cirkler">
</MAP></BODY>
</HTML>
Den indsatte "map" gør dog ingen gavn som den er her, du skal først have fortalt billedet, at det skal hente oplysninger fra din "map". Det gør ved at indsætte en ekstra parameter i billedets kode-tag. Du indsætter følgende ekstra kode: USEMAP="#former", således at den samlede billedkode kommer til at se således ud:
<IMG SRC="billeder/klikkort.gif" BORDER="0" WIDTH="300" HEIGHT="100" ALIGN="BOTTOM" ALT="Klikbart kort" USEMAP="#former">
Anvender du Netscape Composer vælger du billedegenskaber efter at have højreklikket på billedet og du kan indsætte den ekstra kode via knappen Extra HTML.
Vær opmærksom på, at du skal huske #, når der er tale om en intern henvisning og at navnet efter # er det samme, som navnet på din "map".
Når du har oprettet en "map" og "puttet den ind" i en web-side, kan du åbne den igen, ved at du i Map This vælger "Open" menuen og finder frem til den web-side, hvor du har din "map".
De egenskaber du herefter får for de enkelte delområder, vil også give dig mulighed for at præcisere et TARGET, et rammenavn, når du anvender rammesæt. I første omgang, hvor du opretter din "map" helt fra bunden, skal denne parameter indføres manuelt.
De enkelte arealer kan tilføres samme parametre som almindelig HREF-koder - herunder også hændelser.
<AREA SHAPE=RECT COORDS="20,20,80,80" HREF="rektangel.htm" ALT="Gå til siden for rektangler" TARGET="ramme_navn" onClick="script_funktion()">
| Til top |