HotSpot - klikbare felter i billeder
med
MapThis 1.30 - Download fylder 890 kb. pakket.

Hop længere ned på siden, til:

Siden er opdateret 10. 3. 2009

Billedet laves

I et grafikprogram - f.eks. Paint Shop Pro 5.0 - laver vi et billede til formålet, men et hvilket som helst billede kan selvfølgelig bruges - du bestemmer selv.
Til eksemplet her laver vi et billede med en trekant, en cirkel og et rektangel. Baggrunden laver vi usynlig (se eventuelt siden med Grundlæggende Paint Shop Pro, hvordan usynlige områder laves).
Et billede behøver naturligvis ikke at have usynlig baggrund for at kunne bruges - det er bare noget vi vælger til dette billede.


Dokumentet laves

Kildeteksten til den side, der skal indeholde det billede med klikbare felter, som vi lavede før, kan f.eks. se sådan ud:

<html>
<head>
<title>Sidetitel</title>
<link rel="stylesheet" type="text/css" href="ditnavn.css" />
</head>
<body>

<img src="hotspots.gif" border="0" width="150" height="100" />

</body>
</html>

^ Tilbage til sidens top


Klikbare felter defineres

Næste skridt bliver så, at du i Map This 1.30 indlæser den tidligere lavede *.gif-fil, så du kan begynde at definere de klikbare felter.
Det billede, du vil bruge, kan også være i formatet *.jpg - blot bliver du så nødt til at gemme billedet i standard kodning. MapThis kan ikke indlæse en *.jpg-fil i progresiv kodning - du kan så bagefter ændre kodningen, når du er færdig med at lave din hotspot-map.

I det lille vindue med billedfilen ser du foroven til venstre 3 knapper med henholdsvis et rektangel, en cirkel og en polygon. De bruges hver især til definition af det klikbare felt over den gule, den grønne og den røde figur.

Med første knap nedtrykket kan du trække rektangulære felter: Sæt cursoren i øverste venstre hjørne, nedtryk og hold venstre museknap og flyt cursoren til nederste højre hjørne, hvor du slipper museknappen.

Med anden museknap nedtrykket kan du trække cirkulære felter: Sæt cursoren i cirklens centrum, nedtryk og hold venstre museknap og træk cirklen ud til ønske diameter. Slip museknappen.

Med tredje museknap kan du lave mangekantede felter: Klik på knækpunkter langs det ønskede felts yderkant. Slut af samme sted, du begyndte.

Med den fjerde knap nedtrykket kan du flytte rundt på de enkelte punkter i en markeret polygon for at ændre facon - cursoren antager dette udseende: .
Eller du kan trække i midterpunktet eller i et hjørne i en markeret rektangel for at ændre størrelse - cursoren antager dette udseende: eller den tilsvarende lodrette eller diagonale.
Holder du cursoren inde i et markeret felt, skifter udseendet til , du kan nu flytte rundt på det markerede felt.

Holder du cursoren over et vilkårligt sted på en linje mellem to markerede punkter i en polygon og højreklikker, får du en menu, hvor du kan få lov til at indsætte et ekstra punkt på den valgte linje.

Tilsvarende kan du, ved at holde cursoren over et markeret punkt i en polygon, få adgang til at slette punktet - det har dog ikke nogen mening, hvis der kun er tre sider!

Så snart det første felt er blevet defineret, kan du på den 7. knap fra venstre åbne en liste over de definerede felter. På billedet er alle 3 figurfelter defineret og det rektangulære felt blevet aktiveret.

Med den 5. knap fra venstre eller den nederste i den lodrette række får du adgang til en editor, hvori du kan knytte en link til det aktiverede felt.

I det øverste felt skriver du den linkadresse, du ønsker at knytte til det aktiverede klikbare område.

Skal det være en link til et andet sted på den samme side, skal du ikke skrive noget sidenavn, kun navnet på det ønskede "anker" og foran ankernavnet skal du sætte et # (eks. #nytstedpåsiden).

I tredje felt kan du skrive en tekst, som vil blive tildelt alt=""-variablen.

Slut af med at klikke på OK.

Tilbage i hovededitoren trykker du på én af de to disketteikoner for at gemme dine feltdefinitioner med tilhørende links.

I den næste dialogboks vælger du, hvilken *.htm-fil dine definitioner skal gemmes i.

Husk at sætte mærke i feltet HTML i rammen File Format.

Marker det ønskede dokument og klik på Gem

Du får så endnu en dialogboks og her giver du dine definitioner et kortnavn - Map name.

Er der i den valgte *.htm-fil allerede defineret andre klikbare felter, vil deres kortnavne være listet i det nederste vindue - så kan du se, hvilke navne du ikke kan bruge nu.

Nedenfor ser du, hvordan feltdefinitionerne er blevet tilføjet i kildeteksten fra før.

<html>
<head>
<title>Sidetitel</title>
<link rel="stylesheet" type="text/css" href="ditnavn.css" />
</head>
<body>

<img src="hotspots.gif" border="0" width="150" height="100" />

<map name="hotspots">
<!-- #$-: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:Mon Mar 17 10:55:35 2003 -->
<!-- #$GIF:hotspots.gif -->
<area shape=rect coords="39,64,104,95" href="firkant.htm" alt="">
<area shape=poly coords="4,27,71,8,24,63,4,27" href="trekant.htm" alt="">
<area shape=circle coords="106,35,24" href="cirkel.htm" alt="">
</map>
</body>
</html>

Programmet MapThis lægger selv nye kortdefinitioner sidst i den valgte *.htm-fil, men for overskuelighedens skyld flytter jeg altid definitionen op foran kaldet til den aktuelle *.gif-fil. Skal der siden redigeres i definitionen, flytter programmet ikke definitionen ned i bunden igen.

Desuden sletter jeg også notorisk alle linjerne, der begynder med <!-- #$, det gør den endelige *.htm-fil lidt mindre og dermed også lidt hurtigere.
Filen med kortdefinitionen ser herefter således ud:

<html>
<head>
<title>Sidetitel</title>
<link rel="stylesheet" type="text/css" href="ditnavn.css" />
</head>
<body>

<map name="hotspots">
<area shape=rect coords="38,64,138,94" href="firkant.htm" alt="">
<area shape=poly coords="6,27,71,8,24,63,6,27" href="trekant.htm" alt="">
<area shape=circle coords="105,35,24" href="cirkel.htm" alt="">
</map>
<img src="hotspots.gif" border="0" width="150" height="100" />

</body>
</html>

Vi mangler nu bare at tilføje et kald til disse definitioner i slutningen af kaldet til den grafikfil, de skal dække. Kaldet ser således ud: usemap="#hotspots" og det totale kald til billedet kommer til at se således ud:

<img src="hotspots.gif" border="0" width="150" height="100" usemap="#hotspots" />

Indsat i kildeteksten kommer det hele til at tage sig således ud:

<html>
<head>
<title>Sidetitel</title>
<link rel="stylesheet" type="text/css" href="ditnavn.css" />
</head>
<body>

<map name="hotspots">
<area shape=rect coords="38,64,138,94" href="firkant.htm" alt="">
<area shape=poly coords="6,27,71,8,24,63,6,27" href="trekant.htm" alt="">
<area shape=circle coords="105,35,24" href="cirkel.htm" alt="">
</map>
<img src="hotspots.gif" border="0" width="150" height="100" usemap="#hotspots" />

</body>
</html>

Måske vil du gerne have en forklaring på de tal og andre underlige gerninger, der tilsammen udgør kortdefinitionen?

OK, det får du så her:

<map name="hotspots">
Kortet "erklæres" og navngives. Navnet bruges til at kalde kortet fra .gif-filen med kommandoen usemap="#hotspot"

<area shape=rect coords="38,64,138,94" href="firkant.htm" alt="">
Der defineres et rektangel, koordinaterne gælder parvis for øverste venstre henholdsvis nederste højre hjørne. En adresse sættes.

<area shape=poly coords="6,27,71,8,24,63,6,27" href="trekant.htm" alt="">
Der defineres en polygon, koordinaterne gælder parvis for de enkelte punkter. Første og sidste par er ens, da det er her, der startes og sluttes. En adresse sættes.

<area shape=circle coords="105,35,24" href="cirkel.htm" alt="">
Der defineres en cirkel, to første koordinater definerer centrum og tredje angiver radius. En adresse sættes.

</map>
Kortdefinitionen afsluttes.

Bemærk: Attributten alt="" i de tre områdedefinitioner må IKKE slettes, hvis du vil gøre dig håb om, at siden skal passere en valideringstest!

Ud over de tre viste arealdefinitioner findes en fjerde: <area shape="default" href=" ..., som - hvis tilføjet - vil sætte en link på hele resten af billedet.


Her er så de 3 figurer med klikbare felter. Hvis du prøver at lade cursoren arbejde lidt rundt omkring de farvede felter, kan du se, at de er et link i felterne og hvis du klikker på de tre felter, kan du se, at de definerede links også virker.

Skal vi lige også få koden tilrettet til xhtml. Det gøres ved at tilføje et id til kortdefinitionen:

<map name="hotspots" id="hotspots">
<area shape=rect coords="38,64,138,94" href="firkant.htm" alt="" />
<area shape=poly coords="6,27,71,8,24,63,6,27" href="trekant.htm" alt="" />
<area shape=circle coords="105,35,24" href="cirkel.htm" alt="" />
</map>
<img src="hotspots.gif" border="0" width="150" height="100" usemap="#hotspots" />

Lige en sidste ting, inden vi slutter:
Hvis du sidder og arbejder med den samme *.html-fil i en teksteditor og i MapThis, så gør dig selv den tjeneste at gemme dit arbejde hver gang du skal skifte fra teksteditor til MapThis og genindlæs så den seneste opdaterede version når du kommer tilbage til teksteditoren. Ellers kommer du altså på overarbejde.

^ Tilbage til sidens top

Valid XHTML og CSS / Copyright © Hjemmesideskolen september 1998
Hjemmesideskolen
Du er her: Forsiden - html - HotSpot - klikbare felter i billeder
Brugere lige nu: 1
Home Mail