Navigációs térképek. Képtérkép készítése HTML-ben Hogyan készítsünk html képtérképet

Ebben a cikkben megvizsgáljuk, hogyan lehet létrehozni egy kliens képtérképet, amelynek egy bizonyos területére kattintva egy adott linkre léphetünk. A képfeltérképezést ritkán látni a weboldalakon, mivel munkaigényes folyamat, de ha szeretné elkápráztatni látogatóit egy szokatlan linkformával, és van szabadideje a képzésre, akkor ez a cikk neked szól.

Címke

elemnév attribútum

Címke attribútumok megadjuk a terület koordinátáit (a coords attribútum) és a szükséges alakzat típusát (a shape attribútum):

Használati példa

Nézzünk egy példát, amikor egy ábrán egy bizonyos alakzatra kattintva különböző weboldalakra lép, amelyek leírják ezeket az alakzatokat (hivatkozások a Wikipédiára):

Válassz egy figurát:

"4 figura választható" >

És így, sorrendben, amit ebben a példában tettünk:

• Feltettem egy képet (címke ), amelyet később a képtérkép összeállításakor fogunk használni. A usemap attribútumban meg kell adni a térképkép nevét, amelyet az elemben fogunk használni
• Elhelyezzük a képtérképet (tag
• Helyezzen el négy címkét , amelyek interaktív területeket határoznak meg a térképen:
  • Első kérünk téglalap alakú terület(az alakattribútum "rect" értékkel), megfelel a mi első kép ( az első kettőértékek a bal felső saroknak felelnek meg, a következők kettőértékek határozzák meg a jobb felső és a jobb alsó sarkot).
  • Második jelezze kerek terület(alakattribútum "kör" értékkel), megegyezik a miénkkel második kép ( elsőérték a tengely koordinátáinak felel meg x, a második pedig a tengely mentén y, a harmadik meghatározza sugár).
  • Vonatkozó harmadátÉs negyedik ábra, akkor az elv szerint állnak össze sokszögű terület(alakattribútum "poly" értékkel). Meghatározza a képen a szükséges pontok számát, kiszámítja ezeknek a pontoknak a koordinátáit (grafikus szerkesztő), és olyan sorrendben adja meg, hogy a böngésző egy vonallal össze tudja kötni őket. Egy háromszög példáján (harmadik ábra): első pont (koordináták xÉs y csúcsok), második pont (koordináták xÉs y bal alsó sarok) és harmadik pont (koordináták xÉs y jobb alsó sarok).

Felhívom a figyelmet arra, hogy ha a címkén a 26. számú Gyakorlati feladat szerepel.

Árnyalat: a gyakorlati feladat tisztasága érdekében azt javaslom, hogy a csillag tetejét használjuk első pontként és mozgassuk az óramutató járásával megegyező irányba. A href attribútum értékeként megadtam # ebben az esetben csonkként működik (ugyanazon az oldalon maradsz), bármelyik oldalra ugorhatsz.

Nyom: egy kép koordinátáinak lekéréséhez használjon képszerkesztőt, akár a legegyszerűbb szerkesztőt is, pl. Festék, megjeleníti a kurzor koordinátáit. Írja le a koordinátákat egy papírra vagy egy külön fájlba, és írja be az értékeket az oldalon.

Ha nehézségei vannak a feladattal, akkor ellenőrizze az oldal kódját a példa külön ablakban történő megnyitásával, és alaposan tanulmányozza át.

Az utóbbi időben sok weboldal úgynevezett képtérképeket használ a hivatkozások rendszerezésére. Ennek a funkciónak a megvalósítását a HTML nyelv biztosítja, és lehetővé teszi hipertext hivatkozások csatolását a kép különböző területeihez. Ez a megközelítés vizuálisabb, mint a közönséges szöveges hivatkozások használata, mivel a felhasználó nem tudja elolvasni a hivatkozás szóbeli leírását, hanem azonnal megérti a jelentését egy grafikus képről.

Még egy kezdő felhasználó is, aki az internet szélességében bolyongott, hamarosan találkozik egy képtérképpel. ábrán. A 6.1 az egyik legnagyobb oroszországi számítástechnikai cég weboldalát mutatja. Ezen az oldalon a főmenü egy képtérkép kapcsolódó linkekkel.

Elindult a jól ismert kereső, a Yahoo! a képtérképet tartalmazó oldalt is eredményezi. Az ábrán látható kép legfelső részén négy gomb található, amelyek közé a „Yahoo!” szó van írva. Az ábrán látható kurzor ezen gombok közül az elsőre mutat, a kurzor alakja pedig egyértelművé teszi, hogy az utóbbi egy hivatkozásra mutat, amelynek címe látható a böngésző állapotsorában. A gombokkal megvalósított hivatkozások képtérképek technológiájával készülnek.

Nem szabad azonban azt feltételezni, hogy képtérképeket kell használni mindenhol, ahol a linkátmenetek megszervezéséhez szükséges. Meg kell fontolni, hogy van-e értelme képtérképeket használni egy adott esetben, mérlegelve az összes előnyt és hátrányt. Ez a fejezet minden szükséges információt tartalmaz a képtérképek használatával kapcsolatban.

Ebben a fejezetben megtudhatja:

• Mi az a képtérkép és hogyan működik?
• Képtérkép konfigurációs fájl létrehozása
• Hivatkozások létrehozása HTML dokumentumban képtérkép segítségével

Rizs. 6.1. Példa egy weboldalra, ahol a főmenü képtérkép segítségével készül

• Milyen elveket kell követni a képtérképek használatakor
• Milyen jellemzői vannak a különböző képtérkép-konfigurációs fájlformátumoknak
• Milyen szoftvereszközöket kell használni képtérképek készítéséhez

Képtérképek használatának alapjai

A képtérképek felhasználóbarát felületet biztosítanak a felhasználóknak a más weboldalakra való navigáláshoz. Egy ilyen hivatkozás követéséhez egyszerűen válassza ki a kívánt helyet a képen, és kattintson rá. Egy ilyen fejlett grafikus felület jelenléte a weboldalak egyik jelentős előnye más internetes forrásokhoz képest. A szöveges menük helyett, mint például a Gopher kliens felülete, a felhasználók az információk vizuális grafikus megjelenítését kapják (6.2. ábra).

Rizs. 6.2. Linkek megjelenítése (a világ hét csodájáról szóló oldalakra) képtérkép segítségével

A képtérkép úgy néz ki, mint egy normál beágyazott kép, de ha az egérkurzorral kiválaszt egy területet a képen, akkor más oldalakra lép. Általában a kép jelzi, hogy hova kell kattintani egy adott oldal eléréséhez. A különböző hivatkozásokat megvalósító területek határait többféleképpen is megadhatjuk. Gyakran keretet vagy más elválasztót használnak.

Tekintsük a képtérképek használatához kapcsolódó alapfogalmakat.

Terminológia

Képtérkép, Képtérkép, Területtérkép, Kattintható térkép, Érzékeny térkép – mindezek az angol kifejezések a hivatkozási irodalomban ugyanarra a lehetőségre utalnak – HTML dokumentumba ágyazott kép használata, amelynél "hot" (vagy aktív) ) pontok vagy területek, amelyek különböző URL-ekre hivatkoznak. Ezt a lehetőséget a "térkép-kép" kifejezéssel fogjuk leírni, ez alatt több olyan komponens kombinációját értjük, amelyek biztosítják ennek a koncepciónak a megvalósítását. A fő összetevők a következők: maga a kép, amelyet e térkép-kép hivatkozásának nevezünk; az aktív régiók konfigurációjának leírása; valamint a kapcsolódó szoftverek.

Képtérkép grafikus ábrázolása

A képtérkép valójában egy szokásos beágyazott grafika egy weboldalon. Ezek a képek bármilyen érvényes formátumban lehetnek (GIF vagy JPG). Ebben az esetben a GIF formátum használhat átlátszó színt, valamint soros interleaved módot. Ahhoz, hogy egy képet referenciaként lehessen használni egy képtérképhez, semmilyen további korlátozás nem vonatkozik.

A térkép-kép konfiguráció leírása

Az image-map konfiguráció sima szövegként van megírva, amely a használt formátumtól függően külön fájlba menthető, vagy egy HTML dokumentum része lehet. A konfiguráció leírása tartalmazza a képen látható egyes hotspotok koordinátáit, valamint az egyes hotspotokhoz társított URL-eket. A hotspotok lehetnek téglalapok, körök és sokszögek. Ezen számok bármilyen kombinációja megengedett. Egyetlen URL-érték is megadható, arra az esetre definiálva, amikor a felhasználó a képen belül kattint, de a megadott hotspotok valamelyikén kívül. A régiókonfiguráció rögzítésének konkrét szabályai a választott megvalósítási opciótól függenek, és a következőkben kerülnek bemutatásra.

Képes térképek megvalósítási lehetőségei

A weblapokon lévő képtérkép koncepciója két különböző módon valósítható meg - szerver oldalon (szerveroldali képtérkép) és kliens oldalon (kliens oldali képtérkép). Ez utóbbi nevet gyakran használják a CSIM rövidítéseként. Történelmileg megjelent és elterjedt a képtérképek szerververziója, amelyet először a Mosaic böngészőben valósítottak meg. A szerververzió lehetővé tette mindhárom vezető böngésző első verziójának használatát. A szerververzió két különböző formátumban valósítható meg, amelyek a fejlesztő szervezetek - NCSA és CERN - nevéről kaptak nevet.

Az utóbbi időben egyre nagyobb fejlődésen megy keresztül a kliens verzió, amely először a Microsoft Internet Explorer böngészőben valósult meg. A 2.0-s verziótól kezdve ez a változat is támogatja a Netscape böngészőt. Ennek az opciónak megvannak a maga tagadhatatlan előnyei, és egyre népszerűbb.

A képtérképek előnyei és hátrányai

A képtérképek használatának vannak pozitívumai és negatívumai is. Legtöbbjük esztétikai jellegű, de néhánynak technikai vonatkozásai is vannak. A képtérképek előnyeinek és hátrányainak megértése elengedhetetlen a jó weboldalak létrehozásához.

A képtérképek a következő helyzetekben a leghasznosabbak:

• Térbeli kapcsolatok, például földrajzi koordináták ábrázolására, amelyeket nehéz lenne külön gombokkal vagy szöveggel meghatározni. Példa erre Észak-Amerika térképe, ahol az egyes államok kiválasztása a megfelelő oldalra vezet.
• Legfelső szintű menüként, amely minden oldalon megjelenik. Egy ilyen menü jelenléte lehetővé teszi, hogy bármely oldalról és bármikor navigáljon a szerver kívánt részéhez. Egy közös grafikus menü létrehozása csökkenti a fejlesztési időt

HTML dokumentumokat, mivel ugyanaz a hivatkozásleíró fájl kerül felhasználásra. Ahelyett, hogy az egyes oldalakon a kezdőlap különböző részeire hivatkozna, elég egy közös menüre hivatkozni. Egy ilyen menü a felhasználó számára is megkönnyíti a navigációt.

Bár a képtérképek hihetetlenül népszerűvé váltak, nyilvánvaló, hogy nem a weblapok alapvető tulajdonsága, és nem minden oldalon használják őket. Vannak helyzetek, amikor nem szabad képtérképeket használni.

A képtérképek hátrányai a következők:

• Ha nincs alternatív szöveges menü, akkor nincs navigáció azon felhasználók számára, akik nem tudnak grafikákat letölteni, vagy letiltották azok letöltését.
• A képtérképek szenvednek a képek weblapokon való használatának általános hátrányaitól, nevezetesen a betöltési idő jelentős növekedésétől a tiszta szöveges dokumentumokhoz képest.
• A rosszul megtervezett képek zavaróak lehetnek. Néha nehéz meghatározni, hogy egy kép mely területei aktívak. Ezt a szerver verzióban különösen nehéz megtenni. A kliens verzió implementálásakor a helyzet leegyszerűsödik, hiszen lehetőség van az egér mozgatásával a képen belül és követni a böngészőablak alján megjelenő linkek URL-jét.
• Képes térképek használatakor a böngészőnek nincs lehetősége a már meglátogatott hivatkozásokat más színnel megjelölni, mint ahogy a szöveges hivatkozásoknál megteszik.

Képtérképek szerver megvalósítása

A képtérképek használata a weboldalakon kicsit bonyolultabb, mint érdekes grafikák beágyazása és az azokhoz való hivatkozás. A képtérkép szerververziójának megvalósításához szükséges, hogy a HTML dokumentum a szerveren legyen tárolva. Szükséges továbbá, hogy a kiszolgálót úgy kell beállítani, hogy támogassa a CGI-szkripteket (Common Gateway Interface, Common Gateway Interface), amelyek feldolgozzák a böngészőtől érkező kéréseket, amikor képtérképpel dolgozik. Minden képtérképhez el kell helyezni a szerveren a hotspotok konfigurációját leíró fájlt. Ha a képen belül kattintunk az egérrel, a kattintott hely koordinátáit a böngésző továbbítja a szervernek, amely hozzáfér a konfigurációs fájlhoz, amely lényegében egy hotspot keresőtábla. A keresés eredménye URL-ként vagy üzenetként jelenik meg a böngészőben, amely jelzi, hogy nem található olyan hotspot, amely megfelelne a képen szereplő megadott helynek.

A térkép-kép működésének biztosításához fel kell tüntetni, hogy ez a kép referencia a térképhez. Ez az ISMAP paraméter beállításával történik a címkében . Ezenkívül a képtérképet hivatkozásként kell létrehozni a weboldalon, hasonlóan ahhoz, amikor a teljes képet egyetlen hivatkozásként használnák.

Emlékezzünk vissza, hogy a szövegközi képek hipertext hivatkozásként használhatók, ha szerepelnek a címkében.<А>. Ha például egy Sajátkép.gi nevű képet grafikus hivatkozásként szeretne létrehozni egy ugyanabban az exampie.html nevű könyvtárban lévő dokumentumra, a következőket kell írnia:

<А HREF=example.html >

Ez a HTML közli a szerverrel, hogy amikor a Mylmage.gif fájlra kattint, a böngészőnek egy példa.html nevű dokumentumot kell visszaadnia.

ISMAP paraméter hozzáadva a címkéhez a bemutatott példánál aktiválja a képtérképet. Ebben az esetben a hivatkozás nem egy adott dokumentumra, hanem a kép összes aktív területének koordinátáit tartalmazó képtérkép konfigurációs fájlra történik. Az általában MAP kiterjesztésű konfigurációs fájlt egy CGI program elemzi a szerveren, a képen lévő kattintott pont koordinátáival együtt. Ezután a fenti sor helyett a következőket kell írnia:

<А HREF=MyImage.map>< IMG SRC=MyImage.gif ISMAP>< /A>

Ebben a példában a hivatkozás nem egy másik HTML-dokumentum címe, hanem egy képtérkép konfigurációs fájl, amely tartalmazza az egyes Myimage.gif nevű aktív képterületek koordinátáit.

jegyzet

Címkeparaméterek sorrendje tetszőleges, azonban az ISMAP paraméter általában az utolsó helyen van.

Az image-map konfigurációs fájl a szokásos szöveges fájl, amely a hotspotokról tartalmaz információkat adott kép. Minden térkép módban használható képhez külön konfigurációs fájl szükséges.

Tanács

Minden képtérképhez külön konfigurációs fájl szükséges. Szokjon rá, hogy a konfigurációs fájlt ugyanabba a könyvtárba mentse, és ugyanazzal a névvel, mint a hozzá tartozó képfájl. Például: main_menu.gif és főmenü.térkép.

A CERN és az NCSA által kifejlesztett két képtérkép-konfigurációs fájlformátum létezik, amelyek e szervezetek nevét viselik. Mindkét formátum ugyanazt az információt tartalmazza, de eltérően ábrázolja azokat. Mindkét esetben azonos típusú területeket használnak, amelyekről az alábbiakban lesz szó. Amikor egy adott szerveren használható képtérképeket fejleszt, a rendszergazdától információkat kell beszereznie a ezt a szervert képtérképek támogatásának módja.

Mindkét formátum téglalapok, körök és sokszögek formájában használ hotspotokat, és megadható az úgynevezett alapértelmezett terület, amely a terület minden olyan pontját jellemzi, amely nem tartozik egyik hotspothoz sem. Ha a felhasználó a képen belülre kattint, de a meghatározott hotspotok valamelyikén kívülre, akkor az alapértelmezett típus által meghatározott értéket fogja használni URL-ként.

Minden egyes területhez egy URL-címet írnak a konfigurációs fájlba, amelyet a rendszer visszaküld a felhasználónak, amikor egy kattintás történik az adott területen. Ez a cím relatív vagy abszolút formában írható. Vegye figyelembe, hogy a relatív URL-t a konfigurációs fájl helyéhez viszonyítva kell megadni, nem a képfájlhoz. A konfigurációs fájlban található hotspotok listája az első sortól kezdve olvasható. Ha két hatókör átfedi egymást, akkor az a hivatkozás kerül megvalósításra, amelynek a hatókör leírása először szerepel a konfigurációs fájlban.

Tanács

Javasoljuk, hogy mindig állítson be egy alapértelmezett hivatkozást a konfigurációs fájlban. Az alapértelmezett hivatkozás a kép azon területein lesz megvalósítva, amelyek nem kapcsolódnak az aktívakhoz. A legegyszerűbb esetben az alapértelmezett URL egyszerűen egy oldalra mutathat hasznos információ a kártya használatáról.

CERN formátum

A CERN egy európai kutatóközpont számos kutatási témával. Itt volt a Világ fogalma széles háló, amely a WWW minden fejlesztésének lendülete volt. Joggal a CERN tekinthető a Web szülőhelyének. Amikor szükségessé vált a képtérkép konfigurációs fájlok szerkezetének fejlesztése, a CERN-ben a következő formátumot javasolták:

területtípus koordináták url

Az X és Y koordinátapárok értékei vesszővel vannak elválasztva, és zárójelben vannak. A CERN formátum nem teszi lehetővé a megjegyzések használatát egy adott területhez kapcsolódó hivatkozások tisztázására. A következő típusú régiók használhatók: rect, circle, poly és default. Ez a formátum lehetővé teszi a területtípusnevek kettős írását – mind rövidített, mind teljes formában. A megadott típusnevek mellett a téglalap, kör és sokszög nevek használhatók.

Íme egy példa a területekről szóló információk rögzítésére egy képtérképen CERN formátumban:

rect (56.47) (357.265) http://www.anywhere.com/

circ (366 147) 109 http://www.anywhere.com/

sokszög (534,62) (699,62) (698,236) (626,261) (534,235) (534,62)

http://www.anywhere.com/

NCSA formátum

Az Illinoisi Egyetem (NCSA) Nemzeti Szuperszámítógép-alkalmazások Központja szintén jelentős mértékben hozzájárult a web fejlesztéséhez. Itt készült el az első népszerű grafikus böngésző, a Mosaic program. Az NCSA olyan konfigurációs fájlformátumot javasolt, amely formailag különbözik a CERN formátumtól. Ez a formátum így néz ki:

area_type url koordináták

A következő típusú régiók használhatók: egyenes, kör, poli, alapértelmezett és pont.

Az X és Y koordinátákat vessző választja el, de nincs zárójelben. Ez a formátum lehetővé teszi a megjegyzéssorok használatát. A # karakterrel kezdődő sorokat megjegyzésként kezeli, és annak tartalmát az értelmező figyelmen kívül hagyja.

Az NCSA formátum némileg eltérő módot kínál a körkörös területek meghatározására (összehasonlítva a CERN formátummal és az alább tárgyalt kliens oldallal). A körterületet két pont koordinátái határozzák meg - a középpont és a kör bármely pontja.

jegyzet

Az NCSA formátum lehetővé teszi a pont régiótípus használatát. Ez a területtípus nem használatos a CERN formátumban vagy kliensoldali képtérképek használatakor. A formátum megalkotóinak szándéka az volt, hogy ha sok pontozott terület van, akkor a többihez legközelebb eső linket az egér kattintásával aktiválják. Egy ilyen régiótípus jelenléte azonban lényegében ütközik az alapértelmezett régiótípussal, mivel a pont és az alapértelmezett régiók egyidejű használatakor a ponttípus által meghatározott hivatkozás megvalósítása csak akkor lehetséges, ha az egér pontosan erre a pontra talál. . Ez meglehetősen nehéz, és valószínűleg nem teremt kényelmes feltételeket egy ilyen dokumentummal való munka során. Jelenleg a ponttípus gyakorlatilag nem használatos, a képtérképek kliens verziója pedig egyre jobban fejlődik.

Íme egy példa egy konfigurációs fájl bejegyzésére NCSA formátumban:

# Példa konfigurációs fájl írására

rect http://www.anywhere.com/ 56.47 357.265

kör http://www.anywhere.com/ 366.147 366.256

poli http://www.anywhere.com/ 534,62 699,62 698,236 626,261 534,235 534,62

A térkép-kép kliens verziója

A képtérkép kliens verziója lehetővé teszi, hogy a térképkonfigurációval kapcsolatos összes információt egy beágyazott képet tartalmazó HTML-fájlban helyezze el. Szerver verzió használata esetén a böngésző kérést küld a szervernek, hogy megkapja a kiválasztott link címét, és várja a választ a szükséges információkkal. Ez további várakozási időt igényelhet. A kliens verzióval csökken a szerver felé irányuló hívások száma, és nő az információhoz való hozzáférés sebessége. Ennél az opciónál nem kell felvenni a kapcsolatot a szerverrel a térképkonfiguráció szerkesztéséhez, így a képtérkép elkészítésének minden munkája helyben, a HTML fájl szerkesztésével egyidejűleg elvégezhető. A szerververziótól eltérően, amely minden képtérképhez külön konfigurációs fájlt igényelt, ebben a verzióban a térképkonfiguráció közvetlenül ugyanabban a HTML dokumentumban található, amelyben a referenciaképre mutató hivatkozás meg van adva. Leggyakrabban pontosan ezt teszik, bár megengedett a térképkonfiguráció külön fájlba mentése és hivatkozás megadása.

Használja a USEMAP címkeparamétert annak jelzésére, hogy a beágyazott kép a térkép referenciaképe. . A USEMAP paraméter értéke hivatkozás a térképkonfiguráció leírására.

jegyzet

A Netscape böngésző nem teszi lehetővé a használatát külön fájl a térképkonfiguráció leírásához.

Például:

Ebben a példában a l ogo.gif nevű fájlban tárolt kép az ügyféloldali képleképezés hivatkozása.

A hotspot konfigurációs leírásának ugyanabban a fájlban kell lennie, mint adott string HTML kódot, és rendelkezzen ezt a példát név logó.

Címke<МАР>

Egy speciális címkét használnak a képtérkép-területek konfigurációjának leírására<МАР>, amelynek egyetlen paramétere a NAME. A NAME paraméter értéke azt a nevet adja meg, amelynek meg kell egyeznie a USEMAP névvel. Címke<МАР>záró címkét igényel. Ezen a címkepáron belül a térkép aktív területeinek leírását kell elhelyezni, amelyekhez speciális címkét használnak. .

Címke

Minden egyes címke egy hotspotot határoz meg. Végcímke nem szükséges. A hotspotok átfedhetik egymást. Ha egy pont egyszerre több aktív területhez tartozik, akkor az a hivatkozás kerül megvalósításra, amelynek leírása a területek listájában az első helyen található.

Címke paraméterei a SHAPE, COORDS, HREF, NOHREF, TARGET és ALT. Fontolja meg e paraméterek célját.

SHAPE paraméter

A SHAPE paraméter határozza meg a hotspot alakját. Az érvényes értékek: rect, circle, poly, default. Ezek az értékek téglalap, kör, sokszög formájában határozzák meg a területeket. Az utolsó érték – alapértelmezett – meghatározza a terület összes pontját. Ha a SHAPE paramétert kihagyjuk, akkor az alapértelmezett érték rect, azaz egy téglalap alakú terület.

Figyelem

Ne keverje össze a kép összes pontját leíró alapértelmezett régiót a SHAPE paraméter alapértelmezett értékével, amely a rect.

jegyzet

Ellentétben a szerver verzióval, ahol az alapértelmezett típusterület meghatározta a kép összes olyan pontját, amely nem tartozik egyetlen aktív területhez sem, a kliens verziónál az alapértelmezett típusterület határozza meg általában az összes képpontot. Ezért ebben az esetben az alapértelmezett terület leírásának az utolsó helyen kell lennie a hotspotok listájában. Ha például az alapértelmezett terület leírását állítjuk be először, akkor az ezen terület által definiált hivatkozás mindig implementálva lesz a kliensváltozathoz, és az összes többi hivatkozás figyelmen kívül lesz hagyva (ez a fajta terület így valósul meg a Netscape-ben ). A szerverváltozat esetében az alapértelmezett területleírás helye nem számít. Ezt a különbséget a fejezet végén megadott példák is figyelembe veszik.

Tanács

Vegye figyelembe azt is, hogy nem minden böngésző támogatja az alapértelmezett területtípust. Különösen a Microsoft Internet Explorer egyáltalán nem engedélyezi ezt a tartománytípust. Ezért az alapértelmezett típusú terület helyett javasolhatunk egy téglalap alakú terület beállítását, amelynek mérete megegyezik a teljes kép méreteivel. Természetesen egy ilyen területet kell leírni utolsóként. Pontosan ezt teszik egyes képtérkép-szerkesztő programok, amelyekről az alábbiakban lesz szó.

COORDS paraméter

A COORDS paraméter egy különálló hotspot koordinátáit határozza meg. A paraméter értéke az aktív területet meghatározó pontkoordináták vesszővel elválasztott listája. A koordinátákat nem negatív egész számként kell felírni. Az origó a kép bal felső sarkában található, ami 0,0 értéknek felel meg. Az első szám határozza meg a vízszintes koordinátát, a második - függőlegesen. A koordináták listája a terület típusától függ.

A rect típusú régióhoz a téglalap bal felső és jobb alsó sarkának koordinátái vannak megadva.

A kör típusú területhez három szám van megadva - a kör középpontjának koordinátái és a sugár.

Egy poly típusú terület esetében a sokszög csúcsainak koordinátái a kívánt sorrendben vannak megadva. Vegye figyelembe, hogy a koordináták listájában az utolsó pontnak nem kell megegyeznie az elsővel. Ha ezek nem egyeznek, akkor az adott terület alakzat adatainak értelmezésekor a böngésző automatikusan összekapcsolja az utolsó pontot az elsővel. A különböző képtérkép-szerkesztők eltérően működnek e tekintetben – vannak, akik az első pontot a lista végére teszik, míg mások nem. A csúcsok számának mennyiségi korlátozása meglehetősen nagy, és szinte minden elképzelhető igényt lefed. Legalább egy 100 csúcsból álló sokszög minden nagyobb böngészőben jól kezelhető. Magával a HTML nyelvvel kapcsolatban van egy korlátozás, amely szerint a lista nem tartalmazhat 1024 értéknél többet. A sokszög lehet, hogy nem konvex.

Az alapértelmezett terület nem igényel koordinátákat.

HREF és NOHREF paraméterek

A HREF és a NOHREF opciók kölcsönösen kizárják egymást. Ha e paraméterek egyike sincs megadva, akkor a területnek nincs referenciája. Ugyanezt kifejezetten definiálja a NOHREF paraméter, amely nem igényel értéket. A HREF paraméter megadja a hivatkozás címét, amely abszolút vagy relatív formában írható fel. Az írási szabályok teljesen megegyeznek a linkek címkébe írásának szabályaival<А>.

A NOHREF paraméter hasznos a hotspot egy részének kizárásához. Legyen például szükséges egy aktív terület létrehozása gyűrű formájában. Ez a típusú régió nem szerepel a lehetséges régiók listájában, de két kör alakú régió meghatározásával megvalósítható. Ehhez először meg kell adnia egy kisebb sugarú területet, és paraméterként meg kell adnia a NOHREF-et. Ezután meg kell adnia egy nagyobb sugarú területet ugyanabban a pontban, és meg kell adnia a kívánt hivatkozást. Ekkor a gyűrűn belüli terület, amelyet két különböző sugarú kör határoz meg, megkapja a szükséges kapcsolatot. A régiók kölcsönös átfedésén alapuló megközelítés alkalmazása nagyon változatos alakú régiók kialakítását teszi lehetővé.

TARGET paraméter

A TARGET paraméter a keretekkel való munka során használatos. Célja annak a keretnek a neve, amelybe az erről a hivatkozásról betöltött dokumentum kerül. Az opció használatával kapcsolatos további információkért olvassa el a keretekkel való munkáról szóló fejezetet.

ALT opció

Az ALT opció lehetővé teszi, hogy a kép minden egyes hotspotjához alternatív szöveget írjon. Ez a szöveg lényegében csak a dokumentum készítőjének megjegyzés szerepét tölti be. Ha a teljes képhez írt alternatív szöveg (a címkében ) jelenik meg a képernyőn, ha letiltott képbetöltéssel dolgozik, akkor a hotspotok alternatív szövege soha nem jelenik meg a képernyőn.

Íme egy példa a különböző típusú régiók megadására:

<МАР NAME="logo">

!}

HREF="p.htm" ALT="Sokszög"> !}

Ez a kódrészlet egy HTML-fájlba kerül. Gyakran előfordul, hogy egy dokumentumban a képtérképek összes leírását összegyűjtik és egy szakasz elejére helyezik. dokumentum. Ez a megközelítés közel áll a programozókhoz, akik a programok írásakor általában elválasztják a program leíró részét és a végrehajtható fájlt, ami leegyszerűsíti az írott kód megértését, és néha a fordító követelményei határozzák meg.

Kliens és szerver opciók kombinációja

Lehetőség van kombinált verzió használatára, amelyben mindkét paraméter - USEMAP és ISMAP - ugyanahhoz a képhez van definiálva, ami azt jelenti, hogy ezt a képfájlt referenciaképként kell használni mind a kliens, mind a szerver verzióhoz. A USEMAP paraméter a domináns. Ez azt jelenti, hogy az ügyféloldalt támogató böngésző a USEMAP-ot használja, figyelmen kívül hagyva az ISMAP opciót. Azok a böngészők, amelyek nem támogatják a kliens oldalt, és nem értik a USEMAP paraméter célját, a HTML általános szabálya szerint figyelmen kívül hagyják a jelenlétét, és megvalósítják a szerveroldalt, ha észleli az ISMAP paraméter jelenlétét. A kombinált opció megbízhatóbb, de adatokra van szükség a területek konfigurálásához mindkét lehetőséghez. Jelenleg a kombinált verzió használatának szükségessége egyre csökken, mivel minden nagyobb böngésző támogatja a kliens verziót. A Netscape honlapok azonban, amelyekkel valószínűleg a Netscape böngészőt használók találkoztak, kombinált változatban készülnek.

Íme egy példa a kombinált opcióra:

<А HREF="http://www.anywhere.com/testmap/logo.map">

jegyzet

A USEMAP paraméter a címke által meghatározott hivatkozást is uralja<А>. Tehát, ha a kliens verzióban a képtérkép koncepciójának megvalósításához használt kép a címke hatókörébe van írva<А HREF>, akkor az utolsó címke által meghatározott hivatkozást figyelmen kívül hagyják az ügyféloldali böngészők. Tegyük fel például, hogy a következő töredékünk van:

<А HREF=NoMaps.htm> .

Egyrészt a teljes kép egy hivatkozás a NoMaps.htm nevű dokumentumra. Másrészt a USEMAP paraméter jelenléte ezt a képet referenciaként határozza meg a megfelelő képtérképhez. A NoMaps.htm dokumentumra mutató hivatkozást figyelmen kívül hagyja a USEMAP paraméter jelenléte és egyéb tényezőktől függetlenül.

A képtérképek használatának jellemzői

Figyeljünk meg néhány jellemzőt a képtérképek kliens verzióban történő használatában. Amikor a felhasználó mozgatja az egeret a kliensoldali képen belül, a megfelelő URL megjelenik a Netscape böngésző alján található állapotsorban. A szerververzióban az URL nem jelenik meg, mert ezt az információt a szerver tárolja, amely nem érhető el, amíg a felhasználó a képre nem kattint. Az első lehetőség informatívabb, mert a felhasználó látja a linkek URL-jét, és linkek nélkül is meghatározhatja a kép helyeit. A szerververzió olyan számokat jelenít meg, amelyek relatív egérkoordináták a képen, és nem adnak információt a hivatkozásokról és azok jelenlétéről.

Alternatív navigációs eszközök

A képtérképek használata általánossá vált, de nem szabad megfeledkeznünk arról, hogy nem minden webfelhasználó tud grafikát használni, vagy nem akar olyan módban dolgozni, hogy letiltja a képbetöltést a fájlátviteli idő csökkentése érdekében. Ezért szükséges számukra valamilyen más, alternatív navigációs eszközt biztosítani az oldalon. Ellenkező esetben a felhasználók egyáltalán nem találják meg az oldalon, és ennek megfelelően nem tudják megvalósítani azokat a hivatkozásokat, amelyeket csak a képtérkép határoz meg.

Alternatív megoldásként létrehozhat egy külön szakaszt a hivatkozások és a hozzájuk tartozó URL-ek szöveges leírásával. Létrehozhat egy hivatkozást egy szöveges menüre is, amely ugyanazokat a hivatkozásokat tartalmazza, mint a képtérkép. Bármelyik megközelítést is választja, meg kell győződnie arról, hogy minden hivatkozás elérhető a böngésző szöveges módjához.

Adjunk példát egy valós dokumentumra, amelyben ezek a problémák megoldódnak. A jól ismert Hewlett-Packard cég egyik oldalán egy töredék látható, amelyben egy képkártya található. Az oldal közepén tíz különböző típusú berendezés listája található, amelyek mindegyikéhez tartozik egy hivatkozás a megfelelő dokumentumra. Valójában az oldal tartalmaz egy képet, amely a térkép referenciaképe. Ezen a képen tíz téglalap alakú zóna van kiemelve, amelyek aktív területek.

Ha ezt az oldalt letiltva tölti be a képbetöltési móddal, akkor egy olyan képet fog látni, ahol képtérkép helyett csak egy kis ikon mutatja a kép helyét és. az a szöveg, amely a teljes kép alternatív szövegeként lett beállítva. Nyilvánvaló, hogy itt nem használhat linkeket. A probléma megoldására a kép alatt egy normál szöveges menü található, amely teljes mértékben megismétli a képen látható listát, a megfelelő hivatkozásokkal. Ezért, ha a képek betöltése le van tiltva, a felhasználó továbbra is végrehajthatja a szükséges átmeneteket hivatkozások segítségével, egy duplikált szöveges menü használatával. Kép betöltése esetén a szöveges menü csak a hivatkozások kiválasztásának lehetőségeit duplikálja.

Képtérképek készítésének eszközei

A képtérképek létrehozása két lépést igényel: egy referenciakép elkészítését, amelyen a későbbiekben forró régiókat állítanak be, és egy konfigurációs fájlt, amely leírja az aktív régiók geometriai paramétereit. A képtérkép alapjául szolgáló kép elkészítése nem különbözik a weblapokba ágyazott normál képek elkészítésétől. Ehhez használhat bármilyen grafikus szerkesztőt, vagy használhat kész képet.

A második lépésben meg kell jelölni a képen az aktív területeket, és össze kell egyeztetni a megfelelő hivatkozási címekkel. A konfigurációs fájl előkészítése a képtérképek létrehozásának legnehezebb lépése. Elvileg lehetséges manuálisan beállítani az aktív területek határait a képen. Például, ha grafikus szerkesztőben dolgozik, megjelölheti az egyes pontokat, rögzítheti azok koordinátáit, majd létrehozhat egy fájlt, amely leírja a kiválasztott területek geometriai paramétereit. Ez a megközelítés azonban rendkívül kényelmetlen és körülményes.

A képen a területek megjelölésének folyamatának automatizálására számos program létezik, amelyek többsége nagyon hasonlít egymásra. Lehetővé teszik konfigurációs fájlok létrehozását és módosítását a képernyőn megjelenő képpel közvetlenül együttműködve. A legtöbb program különálló segédprogram, amely önállóan működik, és lényegében a HTML-szerkesztők kiegészítője. Ezek a programok lehetővé teszik a létrehozott konfigurációs fájl elmentését a Windows vágólapjára vagy egy lemezre. Az első esetben tipikus változat egy képtérkép-szerkesztő program és valamilyen HTML-szerkesztő vagy egy sima szövegszerkesztő közös munkája. Ha a program lehetővé teszi a konfigurációs fájl lemezre mentését, akkor teljesen offline állapotban használható. Minden program lehetővé teszi a területek megjelölését a képen három fő típusból - egyenes, kör és poli. Egyes szerkesztők támogatják az alapértelmezett típust. Talán az egyetlen kritérium a képtérképek szerkesztésére szolgáló program kiválasztásához a használat kényelme, mivel funkcionális tulajdonságait tekintve minden program nagyon hasonló. Ha a program felülete kényelmetlennek tűnik, megtagadhatja a használatát, és másikat választhat.

Tekintsünk néhány meglévő programot.

MapEdit program

Az egyik legegyszerűbb és legismertebb szerkesztő program konfigurációs fájlok egy MapEdit segédprogram, amelyet Thomas Boutell fejlesztett ki. Ez a program több éve létezik, és különféle platformokon valósul meg. Különösen a Windows 3.x és a Windows 95/98/NT verziók állnak rendelkezésre. A legtöbb programhoz hasonlóan ennek a segédprogramnak is számos verziója létezik. Jelenleg a Windows 95/98/NT rendszerhez elérhető legújabb verzió a 2.6-os verzió (1999. szeptember). A program információi megtalálhatók:

http://www.booutell.cora/mapedit/

A MapEdit shareware, és 30 napos értékelési időszakkal rendelkezik, amely után regisztráció szükséges. A program kis méretű - az elosztókészlet körülbelül 300 Kb-ot foglal el, ugyanakkor szinte minden szükséges funkcióval rendelkezik.

A program lehetővé teszi a konfigurációs fájlok szerkesztését mind a szerververzióhoz (NCSA és CERN formátumban), mind a kliens verzióhoz. Lehetőség van vizuális hotspotok létrehozására téglalapok, körök és sokszögek formájában, valamint az alapértelmezett terület hivatkozási címének megadása.

Tekintsük röviden a program főbb jellemzőit. A MapEdit elindítása után megjelenik a főablak, amely egy indítóképernyőt (6.3. ábra) és egy menüt tartalmaz. Lehetőség van meglévő fájlok szerkesztésére a képtérképek szerver- és kliensverziójához egyaránt. Lehetőség van új konfigurációs fájl létrehozására is, de ez csak a kiszolgáló verziójára vonatkozik. Az ügyfélverzióhoz szükség van egy forrás HTML-fájlra, amely beágyazott képekre mutató hivatkozásokat tartalmaz, amelyek referenciaként szolgálnak a képtérképekhez.

jegyzet

A MapEdit segítségével új HTML-fájl létrehozásának képtelensége könnyen megkerülhető. Ehhez futtassa a programot fájlkészítő módban valamelyik szerver formátumban (NCSA és CERN), hajtsa végre az összes szükséges műveletet, majd mentse el az eredményeket Mentés másként módban, a Client Side Map formátum megadásával. Létrejön egy HTML fájl, amely később egy HTML dokumentum kész töredékeként használható fel.

Tegyük fel, hogy létre kell hoznunk egy új konfigurációs fájlt a képtérképek szerververziójához. Válassza a Megnyitás/Térkép létrehozása lehetőséget a menüből

fájlt. Megjelenik egy párbeszédablak (6.4. ábra), amelyben meg kell adni a létrehozandó konfigurációs fájl nevét (pl. Blazons.map), meg kell adni a meglévő képfájlt és a létrehozandó fájl formátumát (NCSA ill. CERN). A képfájl lehet GIF, JPG vagy PNG formátumú.

Rizs. 6. 3 . MapEdit nyitóképernyő

Rizs. 6. 4 . Megnyitás/Térkép létrehozása párbeszédpanel konfigurációs fájl létrehozásához

jegyzet

A szerververzióhoz tartozó konfigurációs fájl értelmezői közül sok megköveteli, hogy a fájl MAP kiterjesztéssel rendelkezzen. Javasoljuk, hogy mindig tartsa be ezt a szabályt.

A program betölti a kiválasztott fájlt egy képpel, amelyen lehetőség lesz az aktív területek megjelölésére (6.5. ábra).

Ehhez ki kell választani az aktív terület alakját - téglalapot, kört vagy téglalapot a megfelelő ikonra kattintva vagy a kívánt elem kiválasztásával az Eszközök menüből (6.6. ábra).

A további műveletek közvetlenül a képen hajthatók végre a pontok egérrel történő megjelölésével. Téglalap alakú régiónál a bal felső és a jobb alsó sarkok vannak jelölve, kör alakúaknál a kör középpontja és egyik pontja, sokszögnél pedig a csúcsok vannak megadva. ábrán látható példa. A 6.5 azt az esetet mutatja, amikor a képen már három különböző alakú aktív régió van megjelölve. Ne feledje, hogy a hotspotokat határoló vonalak csak a szerkesztőben való munka során azok megjelenítésére szolgálnak, és semmilyen módon nem változtatják meg a képfájlt. Ebben a példában a kép lényegében három különálló képet tartalmaz (Szentpétervár, Tomszk és Jakutszk városok címere van ábrázolva), ami általában nem jellemző a valósághű képekre. Azoknál a képeknél azonban, amelyek például egy sor vezérlőgombot tartalmaznak, ez a helyzet meglehetősen jellemző.

Rizs. 6. 5 . Kép különböző típusú megjelölt aktív területekkel

Rizs. 6. 6 . Eszközök menü

Rizs. 6. 7 . Az objektum URL-címe párbeszédablak URL-cím és opcionális megjegyzés megadásához

Bármelyik terület megjelölése után meg kell adni az ehhez a területhez tartozó link címet, valamint a kommentálási információkat (6.7. ábra). Az alapértelmezett területhez beállíthatjuk a hivatkozási címet, ami a képterület azon részére valósul meg, amelyik egyik aktív területen sem szerepel (6.8. ábra).

A területek megjelölése után a Szerkesztés menü Teszt pontjával vizuálisan ellenőrizheti vagy módosíthatja a létrehozott hotspotokat. A munka utolsó lépése az eredmények konfigurációs fájlként történő mentése (a Fájl menü Mentés pontja). Használhatja a Mentés másként elemet is, amelyben beállíthatja a fájl mentéséhez szükséges formátumot (6.9. ábra).

Rizs. 6. 8 . Alapértelmezett URL párbeszédpanel az alapértelmezett tartomány URL-címének beállításához

Rizs. 6. 9 . Mentés másként párbeszédpanel

jegyzet

A MapEdit régi verziói tartalmaztak egy kis hibát a mentett konfigurációs fájl formátumának beállításával kapcsolatban. Ha a fájl létrehozásakor a CERN formátumot adták meg, a fájl továbbra is NCSA formátumban kerül mentésre, amikor Mentés módban menti az adatokat. CERN formátumú fájl létrehozása csak a Mentés másként módban lehetséges a kívánt formátummal.

Ebben a példában egy Blazons.map nevű fájl jön létre, amely a következő információkat tartalmazza (NCSA formátum):

#Tomsk város címere

www.ifmo.ru/sergeev/tomsk.htm 35,58 187,244

#Jakutszk város címere

www.ifmo.ru/sergeev/jakutsk.htm 364.150 468.150

#Szentpétervár címere

poly www.ifmo.ru/sergeev/Spb.htm 537,61 700,61 700,230 618,256 537,231

A szerkesztő által CERN formátumban mentett adatok így néznek ki:

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.230) (618.230) (618.) 35. www.ifmo.ru/sergeev/Spb.htm

Vegye figyelembe, hogy a megjegyzések ebben a formátumban nem engedélyezettek, így ezek az információk elvesznek a fájl mentésekor.

Fontolja meg a képtérkép kliens verziójának létrehozását. A feladat végrehajtásához rendelkeznie kell egy HTML-forrásfájllal, amely legalább egy soron belüli képet tartalmaz. Ezt a forrásfájlt bármilyen szövegszerkesztővel vagy speciális HTML-szerkesztővel előre elkészítheti. Legyen egy CSIM.HTM nevű fájl, amely a következő kódot tartalmazza:

Ezt a fájlt a MapEdit szerkesztőben kell megnyitni (6.10. ábra). Ellentétben azzal a változattal, amelyben a konfigurációs fájl készült, itt nem kell megadni a képfájl nevét a Megnyitás/Térkép létrehozása menüpontban.

Rizs. 6.1 0 . Meglévő HTML-fájl megnyitásához nyissa meg a Térkép megnyitása/létrehozása párbeszédpanelt

Rizs. 6.1 1 . Válassza a Beépített kép párbeszédpanelt

A szerkesztő a forrás HTML fájl megnyitása után egy párbeszédpanelt jelenít meg az összes beágyazott kép listájával, amelyből ki kell választani a kívántat (6.11. ábra). Természetesen a kiválasztott képet tartalmazó fájlnak léteznie kell.

Az aktív területek jelölésével kapcsolatos további munka teljesen megegyezik az előző esettel. A jelölési eredmények mentése után a forrásfájl módosul, és az adott példában így fog kinézni:

href="tomsk.htm">

href="jakutsk.htm">

coords="537,61,700,61, 700, 230, 618, 256, 537,231" href="Spb.htm">

Vegye figyelembe, hogy a szerkesztő automatikusan olyan nevet rendel a képtérkép leírásához, amely megegyezik a referencia képfájl nevével. Ebben a példában a képfájl neve Blazons.gif, tehát a címke névparamétere<тар>a „Blazons” értéket kapta.

jegyzet

A MapEdit szerkesztő nem működik megfelelően az orosz ábécé karaktereivel. Az orosz betűk egy része eltűnik a fájl mentésekor, és szóközök jelennek meg helyettük. A legegyszerűbb kiút ebből a helyzetből az, ha a szerkesztőben végzett munka után orosz szöveget ad hozzá.

Térképezze fel EZT!

A képtérképek konfigurációs fájlok létrehozására és szerkesztésére szolgáló másik segédprogram a Map THIS! program, amelyről a következő címen tájékozódhat:

http://galadriel.ecaetc.ohio-state.edu/tc/mt/.

Ezzel a programmal való munka ideológiájában hasonló a MapEdit programhoz. A programmal való munka alapja az aktív területek vizuális megtervezése, az eredmények további mentése egy fájlba a kiválasztott formátumok egyikében. A szerkesztő támogatja mind a szerver képtérkép-formátumokat (NCSA és CERN), mind a kliens verziót. A képeket GIF és JPG fájlokból lehet betölteni.

Íme példák a program által létrehozott konfigurációs fájlokra. Az előző szakasz példájában az NCSA formátumban mentett fájl így néz ki:

#$MTIMFH

#$-:A Map THIS által létrehozott képtérkép fájl!

#$-:Térképezd EZT! ingyenes képtérképszerkesztő, Todd C. Wilson

#$-: Ne szerkessze a "#$" kezdetű sorokat

#$VERSION:1.30

#$TITLE: Blazons

#$DESCRIPTION: A képtérkép szerververziója

#$DATE: 1999. szeptember 14. kedd, 12:10:42

#$PATH:C:\Program Files\Mapthis\

#$GIF:Blazons.gif

#$FORMAT:ncsa

#$EOH

alapértelmezett alapértelmezett.htm

# Tomszk város címere

rect Tomsk.htm 33,60 191,246

# Jakutszk város címere

kör Jakutsk.htm 366.147 366.256

# Szentpétervár város címere

poly Spb.htm 534,62 699,62 698,236 626,261 534,235 534,62

A MapEdit programmal ellentétben ez a szerkesztő meglehetősen sok kommentárinformációt ír a kimeneti fájlba, beleértve a rövid információkat magáról a programról, a fájl létrehozásának dátumáról stb. Ugyanakkor a # szimbólum után, ami a kezdetet jelenti a megjegyzéssorból a szerkesztő hozzáadja a $ szimbólumot a megjegyzéssorokhoz, amelyet a szerkesztő hozott létre. Ügyeljen a fenti kód negyedik sorára, amely azt a kérést tartalmazza, hogy ne szerkessze a szerkesztő által beillesztett megjegyzéseket.

Ugyanez a CERN formátumban mentett példa így nézne ki:

rect (4096.4096) (4096.4096) mt:#$MTIMFH

rect (4096,4096) (4096,4096) mt:#$-:Képtérkép fájl, amelyet a Map THIS készítette!

rect (4096,4096) (4096,4096) mt:#$-:Térképezd EZT! ingyenes képtérképszerkesztő

írta: Todd C. Wilson

rect (4096,4096) (4096,4096) mt:#$-:Kérjük, ne szerkessze a kezdő sorokat

"#$"

rect (4096.4096) (4096.4096) mt:#$VERSION:1.30

rect (4096,4096) (4096,4096) mt:#$TITLE: Blazons

rect (4096,4096) (4096,4096) mt:#$DESCRIPTION: Szerververzió

képtérképek

rect (4096.4096) (4096.4096) mt:#$

rect (4096.4096) (4096.4096) mt:#$DATE:Tue Sep 14, 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

alapértelmezett alapértelmezett.htm

rect (4096,4096) (4096,4096) mt:# Tomszk város címere

téglalap(33,60) (191,246) Tomsk.htm

rect (4096,4096) (4096,4096) mt:# Jakutszk város címere

kör (366 147) 109 Jakutsk.htm

rect (4096,4096) (4096,4096) mt:# Szentpétervár címere

sokszög (534.62) (699.62) (698.236) (626.261) (534.235) (534.62) Spb.htm

Ahogy a fenti kódból is látható, a szerkesztő kissé mesterséges trükköt alkalmaz a megjegyzések tárolására, mind a felhasználó által beírt, mind a program által generált megjegyzések tárolására. Emlékezzünk vissza, hogy a CERN formátum nem teszi lehetővé megjegyzéssorok megadását, ezért a szerkesztő létrehoz egy hasonló sort

rect(4096.4096)(4096.4096),

melynek végére tetszőleges szöveget helyezhet. Lényegében egy ilyen vonal egy téglalapot ír le, amely nyilvánvalóan a képernyőn kívül található, így a jelenléte nem számít. Természetesen ebben az esetben a konfigurációs fájl szövege sokkal körülményesebbé és kényelmetlenebbé válik, ami azonban nem zavarja a programok munkáját. Ez a technika a megjegyzések mentésére alkalmazható.

Ugyanez a HTML-fájlként mentett példa (a képtérképek kliens verziójához) így fog kinézni:

<МАР NAME="Blazons">

ALT="Tomsk város címere"> !}

ALT="Jakutszk város címere"> !}

HREF="Spb.htm" ALT=" Szentpétervár címere"> !}

Itt a MapEdit programmal ellentétben a térképkép nevét kézzel kell megadni, így előfordulhat, hogy nem egyezik a fájl nevével a referenciaképpel.

CrossEye program

CrossEye konfigurációs fájlszerkesztő, amelyet a jól ismert ausztrál Sausage Software cég készített. Ezt a programot örömmel fogadják a népszerű HTML szerkesztő HotDog rajongói, mivel ugyanaz a cég készítette, és nagyon vonzó és humoros felülettel rendelkezik.

A CrossEye csomaggal kapcsolatos információk a következő címen szerezhetők be:

http://www.sausage.com.au.

A program megkülönböztető jellemzője az elosztás meglehetősen nagy mérete (kb. 2,5 Mb), valamint a rövid idő (14 nap), amely alatt kiértékelő módban használható. A programok nagy mérete mindenre jellemző szoftver, amelyet a Sausage Software készített, ami nyilvánvalóan a fejlesztéshez használt eszközök megválasztásának köszönhető (Visual Basic).

Sajnos a program nem rendelkezik számos szükséges tulajdonsággal. Például nem lehet olvasni egy meglévő HTML fájlt, így nem lehet szerkeszteni egy már létező, korábban készített képtérképet. A munka eredményeit közvetlenül HTML-fájlba sem lehet menteni. Az eredmények mentése csak egy speciális EYE kiterjesztésű fájlban lehetséges, amely bináris formátumú, és később csak ebben a szerkesztőben használható. A generált HTML kód a Windows vágólapjára kerül, ahonnan bármely szövegszerkesztőbe átmásolható.

Mint minden fentebb leírt szerkesztőben, a hotspotok közvetlenül a képen jönnek létre és szerkeszthetők, azonban a kép betöltődik egy ablakba, amelynek mérete ismeretlen okból nem módosítható. Ha a kép nagyobb, mint az ablak, akkor görgetéssel megtekinthető a kép, de lehetetlenné válik a nézetablakon túlmenő aktív terület beállítása.

A térképkép kliens verziója esetén a szerkesztő egyáltalán nem ajánlja fel az alapértelmezett terület URL-címének beállítását. Lehetséges, hogy ezt szándékosan tették, mivel nem minden böngésző támogatja az alapértelmezett területtípust. A fent leírt szerkesztők azonban meglehetősen elegánsan oldják meg ezt a problémát azzal, hogy az alapértelmezett területet automatikusan egy téglalap alakú területre cserélik, amelynek mérete megegyezik a kép méretével.

A hiányosságokat bizonyos értelemben a szerkesztő külön kiegészítő tulajdonságaival kompenzálják. Konkrétan megtudhatja, hogy a fenti kép jobb felső sarkában látható papagájt Pollynak hívják. Nagyon beszédes, és a felhasználók számítógéppel felszereltek hangkártya, időről időre meghallják egy papagáj felkiáltását, aminek azonban semmi köze az elvégzett cselekvésekhez. És az egyikben párbeszédpanelek szerkesztő beállítások van még egy speciális elem is, amivel becsukhatod szegény papagájt. Íme egy példa a kiváló szolgáltatásra. Úgy tűnik, a felsorolt ​​tulajdonságoknak köszönhetően ennek a szerkesztőnek az értékelése az http://www.tucows.com, nagyon magas, ami a fent leírt két programról nem mondható el.

Végső soron a szerkesztő döntése a képtérképek létrehozásáról a felhasználón múlik.

Helló. Nemrég egy olyan sajátos html funkcióval kellett megküzdenem, mint a képtérkép. Őszintén szólva nem gyakran használtam, és akkor általában mindent téglalap alakú zónákkal csináltak. De ez nem ugyanaz az eset. A feladat az volt, hogy a kép egyes régióihoz linkeket helyezzenek el, ami az ország térképe volt, és sajnos nem volt szó vászonról vagy svg-ről. Csak html csak hardcore! Tehát a feladat be van állítva, a Google aktiválva van, és már indulhat is.

Elmélet

• koordináták- kiválasztási zóna koordináták
• href- a hivatkozás, amelyre a zónára kattintva az áttérés történik
• nohref- azt jelzi, hogy a zóna nem tartalmaz hivatkozást
• formák- kiválasztási űrlap
  • kör- kör alakú kiválasztási terület
  • alapértelmezett- kijelöli a kép teljes területét
  • poli- kiválasztási terület sokszög formájában
  • rect- kijelölési terület téglalap formájában
• cél- meghatározza, hogy a hivatkozás hol fog megnyílni

Mivel az I kijelölési területnek sokszögűnek kellett lennie, a shape attribútum értéke, a area tag, poli-ként adjuk meg - poligonális terület. Ebben az üzemmódban a vesszővel elválasztott pontok koordinátái a bal felső sarokhoz viszonyítva - x,y. A pontokat vesszővel is elválasztjuk, ami egy ilyen kód olvasásakor elsőre elgondolkodtató.

Festék írása

Először készítsük el az elrendezést:

Törzs ( margó: 0; kitöltés: 20 képpont; font-család: Arial, Helvetica, sans-serif; ) img ( szegély: nincs; körvonal: nincs; megjelenítés: blokk; -moz-user-select: nincs; -webkit-user -select: none; user-select: none; ) .canvas (szegély: 2px szilárd #333; padding: 2px; margin-bottom: 16px; display: inline-block; //display: inline; //zoom:1; ) .canvas.draw (szegélyszín: #3C0; ) .canvas .inner (pozíció: relatív; ) .canvas .point (szélesség: 1px; magasság: 1px; háttérszín: #fff; keret: 1px tömör #000 túlcsordulás: rejtett; pozíció: abszolút : 8px; tördelés: törőszó; )
A javascriptben minden nagyon egyszerű.Az írás során a harci könyvtáramat használtam, szóval ne lepődj meg a nem szabványos funkciókon.Először is felakasztunk egy mousedown eseményt a #canvasra, amiben egy pont a képen renderelésre kerül, és koordinátái rögzítésre kerülnek.

Var addPoint = függvény(e)( var e = _.getEvent(e), offset = _.getOffset(csomópontok["canvas"]), x = e.clientX + _.getDocScrollLeft() - eltolás, y = e. clientY + _.getDocScrollTop() - eltolás, csomópont = csomópontok["canvas"].appendChild(_.node("div", ("osztály":"pont"))); node.style.top = y-1 +"px"; node.style.left = x-1+"px"; points.push(("x" : x, "y" : y, "node" : node)); e.preventDefault && e. preventDefault(); return false; );
Ezután írunk egy függvényt, ami generálja a térképünk html kódját.

Var renderInfo = function()( var text; _.clearNode(nodes["info"]); nodes["info"].appendChild(_.node("span", " ")); };
Mindent keretezzünk az órán, egy kicsit segédfunkciók, ez minden. Remélem, ez az eszköz hasznos lesz valakinek.

Tematikus anyagok:

Jelentkezzen be a Yandex lemez bejelentkezési jelszavába

Danil Fimushkin Adobe animációban dolgozik

Hogyan irányítsuk az egeret a billentyűzetről

Mi az a skype protokoll?

módosítsa a témát Windows 10-re

Program hozzáadása a víruskereső kizárásokhoz Kizárások hozzáadása a Norton Securityhez

Hogyan telepítsünk ingyenes Yandex böngészőt a számítógépre

A GPT lemezekkel kapcsolatos probléma megoldása a Windows telepítésekor