Vi går i ordning.
rect - indikerar att området kommer att vara i form av en rektangel.
poly är en godtycklig polygon.
cirkel - området kommer att vara i form av en cirkel.
Detta kodavsnitt placeras i en HTML-fil. Ofta samlas alla beskrivningar av bildkartor i ett dokument och placeras i början av ett avsnitt.
dokumentera. Detta tillvägagångssätt ligger nära programmerare, som vanligtvis, när de skriver program, separerar den beskrivande delen av programmet och den körbara, vilket förenklar förståelsen av den skrivna koden, och ibland bestäms av kompilatorns krav.
Kombination av klient- och serveralternativ
Det är möjligt att använda en kombinerad version, där båda parametrarna - USEMAP och ISMAP - är definierade för samma bild, vilket innebär att denna bild används som referensbild för både klient- och serverversionen. USEMAP-parametern är dominerande. Detta innebär att en webbläsare som stöder klientsidan kommer att använda USEMAP, utan att ISMAP-alternativet ignoreras. De webbläsare som inte stöder klientsidan och inte förstår syftet med USEMAP-parametern kommer, som en allmän regel för HTML, att ignorera dess närvaro och kommer att implementera serversidan om den upptäcker närvaron av ISMAP-parametern. Det kombinerade alternativet är mer tillförlitligt, men kräver data för att konfigurera områden för båda alternativen. För närvarande minskar behovet av att använda den kombinerade versionen allt mer, eftersom alla större webbläsare stöder klientversionen. Men Netscapes hemsidor, som alla användare av Netscape-webbläsaren förmodligen har stött på, är gjorda i en kombinerad version.
Här är ett exempel på ett kombinerat alternativ:
<А HREF="http://www.anywhere.com/testmap/logo.map">
Notera
USEMAP-parametern dominerar också länken som definieras av taggen<А>. Så om bilden som används för att implementera konceptet med en bildkarta i klientversionen skrivs inom taggens omfång<А HREF>, då kommer länken som definieras av den sista taggen att ignoreras av webbläsare på klientsidan. Låt oss till exempel säga att vi har följande fragment:
<А HREF=NoMaps.htm> .
Å ena sidan är hela bilden en länk till ett dokument som heter NoMaps.htm. Å andra sidan definierar närvaron av USEMAP-parametern denna bild som en referens för motsvarande bildkarta. Länken till NoMaps.htm-dokumentet kommer att ignoreras av närvaron av USEMAP-parametern och oavsett andra faktorer.
Funktioner för att använda bildkartor
Låt oss notera några funktioner i användningen av bildkartor i klientversionen. När användaren flyttar musen inom klientsidans bild, visas motsvarande URL i statusfältet längst ned i Netscape-webbläsaren. I serverversionen visas inte URL:en eftersom denna information finns på servern, som inte är tillgänglig förrän användaren klickar på bilden. Det första alternativet är mer informativt, eftersom användaren ser länkarnas webbadresser och kan också bestämma bildens platser utan länkar. Serverversionen visar siffror som är relativa muskoordinater på bilden och ger ingen information om länkar och deras närvaro.
Alternativa sätt att navigera
Användningen av bildkartor har blivit vanligt, men vi bör inte glömma att inte alla webbanvändare kan använda grafik eller vill arbeta i läget att inaktivera bildladdning för att minska filöverföringstiden. Därför är det nödvändigt att ge dem några andra, alternativa sätt att navigera på sidan. Annars kommer användare inte att kunna hitta på sidan alls och följaktligen implementera de länkar som endast definieras av bildkartan.
Som ett alternativ kan du skapa ett separat avsnitt med en textbeskrivning av länkarna och deras motsvarande URL:er. Du kan också skapa en länk till en textmeny som har samma länkar som bildkartan. Vilken metod du än väljer måste du se till att alla länkar är tillgängliga för webbläsarens textläge.
Låt oss ge ett exempel på ett verkligt dokument där dessa frågor löses. En av sidorna på det välkända företaget Hewlett-Packard visar ett fragment där det finns ett bildkort. I mitten av sidan finns en lista med tio olika typer av utrustning som var och en har en länk till motsvarande dokument. Faktum är att sidan innehåller en bild som är en referensbild för kartan. I den här bilden är tio rektangulära zoner markerade, vilka är aktiva områden.
Om du laddar den här sidan med bildladdningsläget inaktiverat kommer du att se en bild där det istället för en bildkarta bara finns en liten ikon som visar bildens plats och. texten som har ställts in som alternativ text för hela bilden. Uppenbarligen kan du inte använda länkar här. För att lösa detta problem finns under bilden en vanlig textmeny som helt upprepar listan som visas i bilden, med lämpliga länkar. Därför, när laddning av bilder är inaktiverat, kommer användaren fortfarande att kunna implementera de nödvändiga övergångarna genom länkar med hjälp av en dubbletttextmeny. Vid inläsning av en bild duplicerar textmenyn endast alternativen för att välja länkar.
Verktyg för att skapa bildkartor
Skapandet av bildkartor kräver två steg: förberedelse av en referensbild, på vilken heta regioner därefter kommer att ställas in, och utveckling av en konfigurationsfil som beskriver de geometriska parametrarna för aktiva regioner. Att förbereda bilden som ska ligga till grund för bildkartan skiljer sig inte från att förbereda vanliga bilder inbäddade i webbsidor. För att göra detta kan du använda vilken grafisk redigerare som helst eller använda en färdig bild.
I det andra steget är det nödvändigt att markera de aktiva områdena på bilden och matcha dem med motsvarande länkadresser. Att förbereda konfigurationsfilen är det svåraste steget för att skapa bildkartor. I princip är det möjligt att manuellt ställa in gränserna för aktiva områden i bilden. Till exempel, när du arbetar i en grafisk editor, kan du markera enskilda punkter, registrera deras koordinater och sedan skapa en fil som beskriver de geometriska parametrarna för de valda områdena. Detta tillvägagångssätt är emellertid extremt obekvämt och besvärligt.
För att automatisera processen att markera områden på bilden finns det ett antal program, varav de flesta är väldigt lika varandra. De låter dig skapa och ändra konfigurationsfiler genom att arbeta direkt med bilden på skärmen. De flesta program är separata verktyg som fungerar fristående och är i huvudsak ett tillägg till HTML-redigerare. Dessa program låter dig spara den genererade konfigurationsfilen antingen till Windows urklipp eller till en fil på disk. I det första fallet är en typisk variant det gemensamma arbetet av ett bildkartaredigeringsprogram och någon HTML-redigerare eller en vanlig textredigerare. Om programmet låter dig spara konfigurationsfilen på disk, kan den användas helt offline. Alla program låter dig markera områden på bilden av tre huvudtyper - rekt, cirkel och poly. Vissa redigerare stöder standardtypen. Det kanske enda kriteriet för att välja ett program för att redigera bildkartor är bekvämligheten med dess användning, eftersom alla program är väldigt lika när det gäller funktionella egenskaper. Om programmets gränssnitt verkar obekvämt för dig kan du vägra att använda det och välja ett annat.
Tänk på några av de befintliga programmen.
MapEdit-program
Ett av de mest enkla och välkända redigeringsprogrammen konfigurationsfilerär ett MapEdit-verktyg utvecklat av Thomas Boutell. Detta program har funnits i flera år och är implementerat för olika plattformar. I synnerhet finns det versioner för Windows 3.x och Windows 95/98/NT. Som med de flesta program fanns det ett antal versioner av detta verktyg. För närvarande är den senaste versionen tillgänglig för Windows 95/98/NT version 2.6 (september 1999). Programinformation finns på:
http://www.boutell.cora/mapedit/
MapEdit är shareware och har en 30-dagars utvärderingsperiod efter vilken registrering krävs. Programmet är litet i storlek - distributionspaketet upptar cirka 300 Kb, och samtidigt har det nästan alla nödvändiga funktioner.
Programmet låter dig redigera konfigurationsfiler för både serverversionen (i NCSA- och CERN-format) och klientversionen. Det är möjligt att visuellt skapa hotspots i form av rektanglar, cirklar och polygoner, samt definiera länkadressen för standardområdet.
Låt oss kort överväga huvuddragen i detta program. Efter att MapEdit har startat visas huvudfönstret som innehåller en startskärm (Fig. 6.3) och en meny. Det är möjligt att redigera befintliga filer för både server- och klientversioner av bildkartor. Det är också möjligt att skapa en ny konfigurationsfil, men detta gäller endast serverversionen. Klientversionen kräver en HTML-källfil med länkar till inbäddade bilder som kommer att användas som referens för bildkartor.
Notera
Oförmågan att skapa en ny HTML-fil med MapEdit kan lätt lösas. För att göra detta, kör programmet i filskapande läge i ett av serverformaten (NCSA och CERN), utför alla nödvändiga åtgärder och spara sedan resultaten i läget Spara som, och specificera klientsidekartans format. En HTML-fil kommer att skapas, som senare kan användas som ett färdigt fragment av ett HTML-dokument.
Låt oss säga att vi behöver skapa en ny konfigurationsfil för serverversionen av bildkartor. Välj Öppna/Skapa karta från menyn
fil. En dialogruta visas (Fig. 6.4), där du ska ange namnet på den konfigurationsfil som ska skapas (till exempel Blazons.map), ange den befintliga bildfilen och formatet på filen som skapas (NCSA eller CERN). Bildfilen kan vara i GIF-, JPG- eller PNG-format.
Ris. 6. 3
.
MapEdit startskärm
Ris. 6. 4
.
Öppna/Skapa karta dialog för att skapa en konfigurationsfil
Notera
Många av konfigurationsfiltolkarna för serverversionen kräver att filen har ett MAP-tillägg. Vi kan rekommendera att du alltid följer denna regel.
Programmet kommer att ladda den valda filen med en bild på vilken det kommer att vara möjligt att markera aktiva områden (Fig. 6.5).
För att göra detta måste du välja formen på det aktiva området - en rektangel, en cirkel eller en rektangel genom att klicka på lämplig ikon eller välja önskat objekt från menyn Verktyg (Fig. 6.6).
Ytterligare åtgärder utförs direkt på bilden genom att markera punkter med musen. För ett rektangulärt område är de övre vänstra och nedre högra hörnen markerade; för ett cirkulärt område, mitten och en av punkterna på cirkeln; för en polygon anges dess hörn. För ett exempel i fig. 6.5 visar fallet när tre aktiva områden med olika former redan är markerade på bilden. Observera att linjerna som avgränsar hotspots endast tjänar till att visualisera dem när du arbetar i editorn och ändrar inte bildfilen på något sätt. Bilden i detta exempel innehåller i huvudsak tre separata bilder (vapenskölden från städerna St. Petersburg, Tomsk och Yakutsk är avbildade), vilket vanligtvis inte är typiskt för realistiska bilder. Men för bilder som innehåller till exempel en uppsättning kontrollknappar är denna situation ganska typisk.
Ris. 6. 5
.
Bild med markerade aktiva områden av olika slag
Ris. 6. 6
.
Verktyg-menyn
Ris. 6. 7
.
Objekt URL-dialogruta för att ange en URL och en valfri kommentar
Efter att ha markerat något av områdena bör du ange länkadressen som motsvarar detta område, samt kommentarsinformation (Fig. 6.7). Du kan ställa in länkadressen för standardområdet, vilket kommer att realiseras för den del av bildområdet som inte ingår i något av de aktiva områdena (Fig. 6.8).
Efter att ha markerat områdena kan du visuellt kontrollera eller ändra de skapade hotspots med hjälp av Test-objektet på Redigera-menyn. Det sista steget i arbetet är att spara resultaten som en konfigurationsfil (alternativet Spara på Arkiv-menyn). Du kan också använda alternativet Spara som, där du kan ställa in önskat format för att spara filen (Fig. 6.9).
Ris. 6. 8
.
Dialogrutan Standard URL för att ställa in URL:en för standardområdet
Ris. 6. 9
.
Spara som dialogrutan
Notera
Gamla versioner av MapEdit innehöll en liten bugg relaterad till att ställa in formatet för den sparade konfigurationsfilen. Om CERN-formatet angavs när filen skapades, kommer filen fortfarande att sparas i NCSA-formatet när data sparas i sparläge. Det är möjligt att skapa en fil i CERN-formatet endast när du använder läget Spara som med det angivna formatet.
För det här exemplet kommer en fil med namnet Blazons.map att skapas som innehåller följande information (NCSA-format):
#Vapnet för staden Tomsk
www.ifmo.ru/sergeev/tomsk.htm 35.58 187.244
#Vapnet för staden Yakutsk
www.ifmo.ru/sergeev/jakutsk.htm 364.150 468.150
#S:t Petersburgs vapen
poly www.ifmo.ru/sergeev/Spb.htm 537.61 700.61 700.230 618.256 537.231
Samma data som sparats av redaktören i CERN-format skulle se ut så här:
rect (35.58) (187.244) www.ifmo.ru/sergeev/tomsk.htm circle (364.150) 104 www.ifmo.ru/sergeev/jakutsk.htm poly (537.61) (700.61) (700.2830) (61.3) (61.3) (61) www.ifmo.ru/sergeev/Spb.htm
Observera att kommentarer inte är tillåtna i detta format, så denna information kommer att gå förlorad när filen sparas.
Överväg uppgiften att skapa en klientversion av en bildkarta. För att utföra denna uppgift måste du ha en HTML-källfil som innehåller minst en inline-bild. Denna källfil kan skapas i förväg av vilken textredigerare som helst eller en speciell HTML-redigerare. Låt det finnas en fil med namnet CSIM.HTM som innehåller följande kod:
Denna fil bör öppnas i MapEdit-redigeraren (Fig. 6.10). Till skillnad från varianten där konfigurationsfilen skapades, behöver du här inte ange namnet på bildfilen i menyalternativet Öppna/Skapa karta.
Ris. 6.1 0
.
Öppna/Skapa karta dialog för att öppna en befintlig HTML-fil
Ris. 6.1 1
.
Välj Inline Image Dialogbox
Redaktören, efter att ha öppnat HTML-källfilen, visar en dialogruta med en lista över alla inbäddade bilder, från vilken du måste välja den du behöver (Fig. 6.11). Självklart måste filen med den valda bilden finnas.
Det fortsatta arbetet med att markera aktiva områden är helt identiskt med det tidigare fallet. Efter att uppmärkningsresultaten har sparats kommer källfilen att ändras, och för det givna exemplet kommer det att se ut så här:
href="tomsk.htm">
href="jakutsk.htm">
coords="537,61,700,61, 700, 230, 618, 256, 537,231" href="Spb.htm">
Observera att redigeraren automatiskt tilldelar bildkartans beskrivning ett namn som matchar referensbildfilens namn. För det här exemplet fick bildfilen namnet Blazons.gif, alltså namnparametern för taggen<тар>tilldelades värdet "Blazons".
Notera
MapEdit-redigeraren fungerar inte korrekt med ryska alfabettecken. En del av de ryska bokstäverna försvinner när filen sparas och mellanslag visas i deras ställe. Det enklaste sättet ur denna situation är att lägga till rysk text efter att du har arbetat klart i editorn.
Kartlägg DETTA!
Ett annat verktyg för att skapa och redigera konfigurationsfiler för bildkartor är programmet Map THIS!, information om vilket kan erhållas på:
http://galadriel.ecaetc.ohio-state.edu/tc/mt/.
Att arbeta med det här programmet liknar i ideologin MapEdit-programmet. Grunden för att arbeta med programmet är den visuella designen av aktiva områden med ytterligare lagring av resultaten i en fil i ett av de valda formaten. Redaktören stöder både serverbildskartformat (NCSA och CERN) och klientversionen. Bilder kan laddas från GIF- och JPG-filer.
Här är exempel på konfigurationsfiler skapade av detta program. För exemplet i föregående avsnitt skulle en fil som sparats i NCSA-format se ut så här:
#$MTIMFH
#$-:Bild Kartfil skapad av Map THIS!
#$-:Karta DETTA! gratis bildkartredigerare av Todd C. Wilson
#$-: Vänligen redigera inte rader som börjar med "#$"
#$VERSION:1.30
#$TITLE: Blazoner
#$BESKRIVNING:Serverversion av bildkartan
#$DATUM:Tis 14 sep 12:10:42 1999
#$PATH:C:\Program Files\Mapthis\
#$GIF:Blazons.gif
#$FORMAT:ncsa
#$EOH
default default.htm
# Stadens Tomsks vapen
rect Tomsk.htm 33,60 191,246
# Stadens Jakutsks vapen
cirkel Jakutsk.htm 366.147 366.256
# Stadens vapensköld av St. Petersburg
poly Spb.htm 534.62 699.62 698.236 626.261 534.235 534.62
Till skillnad från MapEdit-programmet, skriver den här redigeraren ganska mycket kommentarinformation till utdatafilen, inklusive kort information om själva programmet, datumet då filen skapades etc. Samtidigt, efter #-symbolen, vilket betyder början på kommentarsraden lägger redaktören till symbolen $ för kommentarrader, skapad av redaktören. Var uppmärksam på den fjärde raden i ovanstående kod, som innehåller en begäran om att inte redigera kommentarerna som lagts in av redaktören.
Samma exempel sparat i CERN-format skulle se ut så här:
rect (4096.4096) (4096.4096) mt:#$MTIMFH
rect (4096,4096) (4096,4096) mt:#$-:Bild Kartfil skapad av Map THIS!
rect (4096,4096) (4096,4096) mt:#$-:Karta DETTA! gratis bildkartaredigerare
av Todd C. Wilson
rect (4096,4096) (4096,4096) mt:#$-: Vänligen redigera inte rader som börjar
med "#$"
rect (4096.4096) (4096.4096) mt:#$VERSION:1.30
rect (4096,4096) (4096,4096) mt:#$TITLE: Blazons
rect (4096,4096) (4096,4096) mt:#$DESCRIPTION: Serverversion
bildkartor
rect (4096.4096) (4096.4096) mt:#$
rect (4096.4096) (4096.4096) mt:#$DATE:Tis 14 sep 12:10:42 1999
rect (4096,4096) (4096,4096) mt:#$PATH:C:\Program Files\Mapthis\
rect (4096,4096) (4096,4096) mt:#$GIF:Blazons.gif
rect (4096.4096) (4096.4096) mt:#$FORMAT:cern
rect (4096.4096) (4096.4096) mt:#$EOH
default default.htm
rect (4096,4096) (4096,4096) mt:# Stadens Tomsks vapen
rektangel(33,60) (191,246) Tomsk.htm
rect (4096,4096) (4096,4096) mt:# Vapen för staden Yakutsk
circ (366 147) 109 Jakutsk.htm
rect (4096,4096) (4096,4096) mt:# Sankt Petersburgs vapen
polygon (534.62) (699.62) (698.236) (626.261) (534.235) (534.62) Spb.htm
Som du kan se av koden ovan använder editorn ett något konstlat knep för att lagra kommentarer, både användarinmatade och genererade av programmet självt. Kom ihåg att CERN-formatet inte tillåter dig att ange kommentarsrader, så redaktören skapar en rad som
rect(4096.4096)(4096.4096),
i slutet av vilken du kan placera vilken text som helst. I huvudsak beskriver en sådan linje en rektangel, som uppenbarligen är placerad utanför skärmen, så dess närvaro spelar ingen roll. Naturligtvis, i det här fallet blir texten i konfigurationsfilen mycket mer besvärlig och obekväm att läsa, vilket dock inte stör programmets arbete. Denna teknik för att spara kommentarer kan användas.
Samma exempel som sparats som en HTML-fil (för klientversionen av bildkartor) kommer att se ut så här:
<МАР NAME="Blazons">
ALT="Vapnet för staden Tomsk">
!}
ALT="Vapnet för staden Jakutsk">
!}
HREF="Spb.htm" ALT="S:t Petersburgs vapen">
!}
Här, till skillnad från MapEdit-programmet, måste namnet på kartbilden anges manuellt, så det kanske inte matchar filnamnet med referensbilden.
CrossEye-programmet
CrossEye-konfigurationsfilredigerare, skapad av det välkända australiensiska företaget Sausage Software. Det här programmet kommer att välkomnas av fans av den populära HTML-redigeraren HotDog eftersom det är gjort av samma företag och har ett mycket attraktivt och humoristiskt gränssnitt.
Information om CrossEye-paketet kan erhållas från:
http://www.sausage.com.au.
Utmärkande egenskaper för programmet är en ganska stor storlek på distributionssatsen (cirka 2,5 Mb), samt en kort tidsperiod (14 dagar) under vilken den kan användas i utvärderingsläge. Den stora storleken på program är kännetecknande för allt programvara, skapad av Sausage Software, vilket tydligen beror på valet av verktyg som används för utveckling (Visual Basic).
Tyvärr har programmet inte ett antal nödvändiga egenskaper. Det är till exempel inte möjligt att läsa en befintlig HTML-fil, så det går inte att redigera en redan befintlig bildkarta som skapats tidigare. Det går inte heller att spara resultatet av arbetet direkt i en HTML-fil. Att spara resultaten är endast möjligt i en fil med en speciell förlängning EYE, som har en binär form och kan användas senare endast i denna editor. Den genererade HTML-koden skrivs till Windows urklipp, varifrån den kan kopieras till valfri textredigerare.
Som i alla redigerare som beskrivs ovan skapas och redigeras hotspots direkt på bilden, dock laddas bilden in i ett fönster vars storlek av okänd anledning inte kan ändras. Om bilden är större än fönstret kan rullning användas för att visa bilden, men det blir omöjligt att ställa in det aktiva området som går bortom visningsporten.
För klientversionen av kartbilden erbjuder redigeraren inte att ställa in URL:en för standardområdet alls. Detta kan ha gjorts med avsikt, eftersom inte alla webbläsare stöder standardområdestypen. Redaktörerna som beskrivs ovan löser dock detta problem ganska elegant genom att automatiskt ersätta standardområdet med ett rektangulärt område med dimensioner lika med bildens storlek.
Bristerna på sätt och vis kompenseras av separata ytterligare egenskaper hos redaktören. I synnerhet kan du ta reda på att papegojan, som syns i det övre högra hörnet av bilden ovan, heter Polly. Han är mycket pratglad, och användare som arbetar på en dator utrustad med Ljudkort, då och då kommer de att höra utropen från en papegoja, som dock inte har något att göra med de utförda handlingarna. Och i en av dialogrutor editorinställningar finns det till och med ett speciellt objekt som låter dig hålla käften på den stackars papegojan. Här är ett exempel på förstklassig service. Uppenbarligen, tack vare de listade egenskaperna, är denna redaktörs betyg http://www.tucows.com, är mycket hög, vilket inte kan sägas om de två ovan beskrivna programmen.
I slutändan är redaktörens val för att skapa bildkartor upp till användaren.
Hallå. Nyligen var jag tvungen att hantera en så specifik html-funktion som en bildkarta. För att vara ärlig använde jag det inte ofta, och då, vanligtvis, gjordes allt med zoner i form av en rektangel. Men det här var inte samma fall. Uppgiften var att lägga upp länkar till enskilda regioner av bilden, som var kartan över landet, och det var tyvärr inte fråga om några dukar eller svg. Endast html bara hardcore! Så, uppgiften är inställd, Google är aktiverat och du kan börja.
Teori
Låt oss börja med teorin, var skulle vi vara utan den. Bildkartan innehåller två taggar:
Karta- kortbehållare och
område- urvalsområde. Kartan är inte begränsad till en zon och kan innehålla ett obegränsat antal av dem. Märka
område förutom standardattribut har den också sina egna:
- koordinater- val av zonkoordinater
- href- länken till vilken övergången kommer att göras när du klickar på zonen
- nohref- indikerar att zonen inte innehåller en länk
- former- urvalsformulär
- cirkel- urvalsområde i form av en cirkel
- standard- väljer hela området av bilden
- poly- urvalsområde i form av en polygon
- rect- urvalsområde i form av en rektangel
- mål- bestämmer var länken öppnas
För att koppla en karta till en bild, ange taggen
Karta attribut
namn med ett godtyckligt namn, och vi hänger en tagg på bilderna
använd kartan, vars värde anges i formatet
"#Namn".
Eftersom urvalsområdet I måste vara polygonalt, värdet på formattributet, area tag, specificerar vi som poly - ett polygonalt område. I det här läget kommer kommaseparerade punktkoordinater i förhållande till det övre vänstra hörnet - x,y. Punkterna är också åtskilda av kommatecken, vilket först när man läser sådan kod är förbryllande.
Skriva Paint
Jag var inte road av möjligheten att använda Photoshop för att hitta koordinaterna för varje punkt, manuellt skriva om siffrorna från infofönstret, och verktygen som kom över i Google var för monstruösa. Det beslöts att skriva mitt eget lilla skript på knäet, vilket skulle göra det möjligt för dig att placera prickar helt enkelt genom att klicka på önskad zon i bilden, och skulle visa den färdiga koden.
Låt oss först förbereda layouten:
Knappar för att styra "färgen" kommer att infogas i #bar.
#info kommer att visa den genererade
html-kod.
Brödtext (marginal: 0; utfyllnad: 20px; teckensnittsfamilj: Arial, Helvetica, sans-serif; ) img (kant: ingen; kontur: ingen; display: block; -moz-user-select: ingen; -webkit-användare -select: none; user-select: none; ) .canvas (border: 2px solid #333; padding: 2px; margin-bottom: 16px; display: inline-block; //display: inline; //zoom:1; ) .canvas.draw ( kantfärg: #3C0; ) .canvas .inner (position: relativ; ) .canvas .point ( bredd: 1px; höjd: 1px; bakgrundsfärg: #fff; kant: 1px fast #000 ; overflow: hidden; position: absolut; ) .bar (marginal-bottom: 16px; ) .info (bakgrundsfärg: #FCFCFC; kantlinje: 1px prickad #CCC; font-size: 12px; font-style: kursiv; utfyllnad : 8px; word-wrap: break-word;)
I javascript är allt ganska enkelt. När jag skrev använde jag mitt stridsbibliotek, så bli inte förvånad över icke-standardiserade funktioner. Först kommer vi att hänga en mousedown-händelse på #canvas, där en punkt på bilden kommer att renderas och dess koordinater kommer att registreras.
Var addPoint = function(e)( var e = _.getEvent(e), offset = _.getOffset(noder["canvas"]), x = e.clientX + _.getDocScrollLeft() - offset, y = e. clientY + _.getDocScrollTop() - offset, node = noder["canvas"].appendChild(_.node("div", ("class":"point"))); node.style.top = y-1 +"px"; node.style.left = x-1+"px"; points.push(("x" : x, "y" : y, "nod" : nod)); e.preventDefault && e. preventDefault(); return false; );
Sedan kommer vi att skriva en funktion som genererar html-koden för vår karta.
Var renderInfo = function()( var text; _.clearNode(noder["info"]); noder["info"].appendChild(_.node("span", " "));
};
Låt oss rama in allt i klassen, lite hjälpfunktioner, det är allt. Jag hoppas att det här verktyget kommer att vara användbart för någon.
Uppdaterad: 2021-04-20
103583
Om du upptäcker ett fel, välj en textbit och tryck på Ctrl + Retur
