Már beszéltünk arról, hogyan lehet egy képet hivatkozássá tenni .. ebben a fejezetben arról fogunk beszélni, hogyan készítsünk töredéket, képterületet egy adott dokumentumra mutató hivatkozással, valamint arról, hogyan készítsünk különböző területeken ugyanarról az ábráról, különböző dokumentumokra mutató hivatkozásokkal.
A feladat elvégzéséhez nem nélkülözhetjük az úgynevezett navigációs térképeket.
Tegyük fel, hogy van egy ilyen rajzunk:
És azt kell tennünk, hogy a felhasználó az egyik ilyen "gombra" kattintva egy adott dokumentumra mutató hivatkozást kövessen .. mire van szükségünk ehhez?
Mindenekelőtt rajzunkat ne közönséges grafikus képnek, hanem navigációs térképnek jelöljük úgy, hogy ehhez a rajzhoz egyedi nevünket rendeljük. Ez az attribútum használatával történik használati térkép címke
(Szerintem nem szabad emlékeztetni arra, hogy a címke
kötelező attribútuma van src amely egy adott képhez vezető utat jelzi
)
Nevezzük el a rajzunkat/térképünket panel... Így fog kinézni:
usemap = "# panel">
Ne felejtse el a jelet a szintaktikai szabályok szerint elhelyezni # rács a név előtt..
Nos, most valójában készítsünk egy navigációs térképet. A címke határozza meg amelynek van attribútuma név- név .. érted, hova vezetek? Nos, ahogy valószínűleg már sejtette, a nevének feltüntetésével jelezzük, melyik rajz alapján építjük fel navigációs térképünket.
Most térjünk rá arra, hogy a böngésző felé jelezzük a kép azon területeit, amelyek hivatkozások lesznek, és egyúttal felírjuk az ezekhez a hivatkozásokhoz vezető átmenetek útvonalait is. A címke átveszi ezt a feladatot. , nem igényel záró címkét, és a következő attribútumokkal fog működni:
href- jelzi a megnyitott dokumentum elérési útját (akárcsak a címkében )alak- a rajzterület alakja, amely hivatkozásként fog szolgálni. Három érték egyike lehet:
- rect- téglalap alakú terület
- poli- a terület egyfajta sokszög
- kör- a kör által meghatározott terület
Téglalap alakú terület
A térképünk most így néz ki:
Sőt, most a "zöld" négyzet gomb vált működőképessé.
Amit a példában rákattintva láthat:
usemap = "# panel"> Kicsit siettem egy példával anélkül, hogy igazán elmagyaráztam volna a leírtak lényegét .. Koncentráljunk a címke attribútumaira .
href = "primer1.html"- itt szerintem egyértelmű, ez a dokumentum elérési útja, aminek a "zöld gombra" kattintva meg kell nyílnia.
Mivel a gomb négyzet, a négyzet pedig, mint tudod, "szabályos" téglalap, a rajzterület alakját egy téglalaphoz rendeljük alak = "helyes" .
És most a szórakoztató rész koordináták = "15,15,82,82"- koordináták .. Egy téglalapnál két ponttal vannak beállítva az "X1, Y1, X2, Y2" elv szerint ahol X1, Y1 az első pont, és ennek megfelelően X2, Y2 a második. A koordináták pixelben vannak megadva. Képünk/térképünk mérete 300 x 100 pixel, bal felső pixelének koordinátái X = 0, Y = 0, a jobb alsóé pedig X = 300, Y = 100. Ha nem tiszta, merüljünk el a geometriában az ötödik osztályban.
Vessen egy pillantást a képre:
Tehát, válasszon egy téglalap alakú alak = "helyes" területünkhöz négyzet alakú gomb formájában megadtuk a bal felső és jobb alsó pixeleinek koordinátáit .. amelyek elégségesek a teljes gomb "munka" területének kijelölésére.
Sokszög (sokszög).
Foglalkozzunk a „sárga gombbal”, ezt háromszög formájában ábrázoljuk. Annak érdekében, hogy a rajzunkból kiválaszthassuk a "munka" területét, hozzárendeljük az attribútumot alak jelentése poli- egy sokszög, amely ezt a területet egyfajta sokszögként határozza meg, ahol a vesszővel elválasztott koordináták lesznek a csúcsai, bármennyi lehet "X1, Y1, X2, Y2, X3, Y3, X4, Y4 . .. X124, Y124" az ezekből a sarkokból álló pontokból álló alakzat bármilyen sokszög alakú lehet, szabályos és szabálytalan is. A mi esetünkben csak három szög van, ezért ez egy háromszög, ezért a koordinátáit három értékpár "X1, Y1, X2, Y2, X3, Y3" fogja beállítani.
Tehát mindent így írunk össze:
alak = "poli" koordináták = "148,15,185,82,110,82">
És itt van egy kép, amelyen jól látható, hogy honnan származnak a pontok koordinátái.
Kör
Nos, az utolsó "piros gomb" kerek .. így a terület formája kerek lesz alak = "kör"... Ezúttal a koordinátákkal a dolgok egy kicsit másképp alakulnak. Három értékre van szükségünk: X, Y, R. X és Y a körünk középpontjának koordinátái, R pedig a sugár hossza pixelben.
Itt egy rajz:
Íme egy példa:
eszünkbe juttatjuk..
Most egy kicsit arról, hogy mit lenne még kívánatos tenni a térképünkkel, mielőtt bármelyik oldalra "felszerelné".
Adja meg a térképrajz rögzített méreteit attribútumokkal szélességés magasság
Írjunk alternatív szöveget, mind a térkép teljes képéhez, mind annak egyes területeihez az attribútum használatával alt, valamint az attribútummal ellátott elemek leírása cím .
Szabaduljunk meg a szegélykerettől .. tegyük határ = "0".. (jó, ha jobban szereti a határt, nem teheti meg .. nem ragaszkodom hozzá..)
A végén valahogy így kell kinéznie:
szélesség = "300" magasság = "100" keret = "0" alt = "(! LANG: Vezérlőpult" title="Kezelőpanel">
!} Átkelési területek
Néha kényelmes a kép „munka” területét különböző formák „keverésével” kialakítani.
Tegyük fel, hogy a következő gombunk így néz ki:
Természetesen az alakzatot sokszögként is definiálhatjuk, de egy ilyen gomb lekerekített részére nagyon sok koordinátát kell beállítani (na jó, ez akkor van, ha a navigációs térképen különleges pontosság kell).
És ebben a példában definiálhat két téglalap alakzatot rectés körbe kör ahogy a képen is látszik:
És a kódban adja meg ugyanannak a dokumentumnak az elérési útját:
"Nem terület"
Nézzünk egy példát .. tegyük fel, hogy létre kell hoznia egy ilyen gombot:
Mi van a lyukkal?
Címke attribútum mellett href ellenkező tulajdonsága van nohref- inaktív terület, vagyis ha a felhasználó rákattint egy ilyen területre, akkor semmi sem fog történni, amit tulajdonképpen el kell érnünk, amikor "lyukat" készítünk a térképünkön.
A térképet két terület, egy inaktív kör határozza meg körés aktív téglalap alakú terület rectés a rajzon látható módon a következő koordinátákkal rendelkeznek:
Amint azt korábban említettük, területek áthaladásakor a kódban lévő címkén belüli területnek lesz a legmagasabb prioritása. elsőként szerepel
Ezért a példa így fog kinézni:
A térkép a szerveren van.
Kivonat a lookup (a címke attribútumai
):
ismap- a kép egy navigációs térkép a szerveren.
Homályos? Aztán olvasunk..
Attribútummal használati térképúgy tűnik, kitaláltuk.. Nézze, a felhasználó (kliens), miután megnyitotta az oldalát, a többi tartalommal egyidejűleg betölti "oldalára" mind a képet, mind a hozzá tartozó navigációs térképet, és a az egészet a böngészője dolgozza fel.
És itt az attribútum ismap címke
közli a böngészővel, hogy ehhez a szerveren lévő képhez ott van a navigációs térkép, ahol közzétette vagy közzé fogja tenni az oldalát (olvassa el a cikket :)). És most, amikor egy látogató (ügyfél) rákattint a kép bármely területére egy ilyen attribútummal, a böngésző megjegyzi ennek a kattintásnak a koordinátáit, és elküldi azokat a szervernek, ahol egy speciális program feldolgozza ezeket az adatokat, és átirányítja a felhasználót a szerveren lévő térképen feltüntetett címre, az ügyfél böngészőjéből kapott pont koordinátáinak megfelelően.
Így van írva:
Ahol a navigációs térkép címe bármely webhelyen .. egy adott szerveren ..
Amúgy nem világos? Ha igen, akkor ne törődj vele... használd használati térkép, véleményem szerint ez a megoldás lesz a legtöbb esetben a legjobb navigációs térképek használatakor.
Egy pont koordinátáinak egyszerű meghatározásához a navigációs térképen nyissa meg a rajzot egy grafikus szerkesztővel, ugyanazzal a Painttel, például .. ott, amikor a mutatót a rajz fölé viszi, két változó számot fog látni, ezek a a képen látható X és Y pixel koordinátái... A Paint programban ez a sáv a képernyő alján található.
Navigációs térképet tartalmazó oldal létrehozásakor a címke
mindig a kártya felett kell lennie Vagyis írj így:
Lehetséges, de nem szükséges .. mert az oldal betöltésekor problémák adódhatnak, mivel a jelöléssel ellátott térkép már be van töltve, de maga a kép még nincs jelen.
És ami a betöltést illeti..
Ebben a kódrészben bármi lehet hosszú szöveg, táblázatok, grafikák... de jobb, ha nem írunk ide semmit
És írj ide, mert amíg az oldal betöltődik, a felhasználó anélkül, hogy megvárná a végét, megpróbálhat rákattintani a navigációs térképen jelzett gombokra, amelyek ekkorra még nem töltöttek be ..
Szia. Nemrég találkoztam egy olyan speciális html funkcióval, mint a képtérkép. Hogy őszinte legyek, nem gyakran használtam, és akkor általában mindent téglalap alakú zónákkal csináltak. De ez nem így volt. 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
Kezdjük az elmélettel, hová juthatunk anélkül. A képtérkép két címkét tartalmaz: térkép- kártyatartó és terület- kiválasztási terület. A térkép nem korlátozódik egy zónára, és korlátlan számú zónát tartalmazhat. Címke terület a standard attribútumokon kívül sajátjai is vannak:- koordináták- a kiválasztási terület koordinátái
- 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ásokat
- alak- a kiválasztás formája
- kör- kör alakú kiválasztási terület
- alapértelmezett- kijelöli a teljes képterületet
- 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 a módban a pont vesszővel elválasztott koordinátái a bal felső sarokhoz viszonyítva - x, y. A pontokat vesszővel is elválasztjuk, ami először zavart okoz az ilyen kód olvasása során.
Festék írása
Nem szórakoztatott, hogy a Photoshop segítségével megkereshetem az egyes pontok koordinátáit, manuálisan átírhatom a számokat az Info ablakból, és a Google-ban talált eszközök túlságosan is szörnyűek voltak. A térdemen döntöttem úgy, hogy megírom a saját kis szkriptemet, amivel egyszerűen a képen a kívánt területre kattintva lehet pontokat elhelyezni, és megjeleníteni a kész kódot.Először készítsük el az elrendezést:
Gombok kerülnek a #barba a "pint" szabályozására.
A generált html kód megjelenik az #info-ban.
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 tömör # 333; kitöltés: 2px; margó-alsó: 16px; kijelző: inline-block; // megjelenítés: inline; // zoom: 1; ) .canvas.draw (border-color: # 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ó;)
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 a #canvas-ra akasztjuk fel a mousedown eseményt, amiben a 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"; point.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 = függvény () (var text; _.clearNode (nodes ["info"]); csomópontok ["info"]. AppendChild (_. Node ("span", " "));
};
Keretezzünk mindent egy osztályba, néhány segítő függvény, ennyi. Remélem, a vetőeszközök hasznosak lesznek valakinek.
Jelentés és alkalmazás
Címke
Böngésző támogatás
| Címke | Opera | IExplorer | Él |
|||
|---|---|---|---|---|---|---|
| Igen | Igen | Igen | Igen | Igen | Igen |
Attribútumok
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
Tekintsünk egy példát, amikor egy adott alakzatra kattintva egy ábrán különböző weboldalakra lép, amelyek leírják ezeket az alakzatokat (hivatkozások a Wikipédiára):
Válasszon egy formát:
És így, sorrendben, amit ebben a példában tettünk:
- Elhelyezett egy képet (címke
), amelyet később a térképkép elkészítésekor fogunk használni. A usemap attribútumban meg kell adni a térképkép nevét, amelyet az elemben fogunk használni
- Helyezze el a térképképet (tag
- Helyezzen el négy címkét amelyek meghatározzák az interaktív területeket a térképen:
- Az első kérünk téglalap alakú terület("rect" értékű alakattribútum), megfelel a mi az első kép ( az első kettő az é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), megfelel a mi a második kép ( első az érték a tengely menti koordinátáknak felel meg x, a második pedig a tengely mentén y, a harmadik meghatározza sugár).
- Vonatkozó a harmadikés negyedik ábra, akkor az elv szerint állnak össze sokszögű terület("poly" értékű alakattribútum). 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 jelzi, hogy a böngésző egy vonallal össze tudja kötni őket. Példaként egy háromszöget használva (harmadik ábra): az 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ímke
Nézzünk egy példát arra, hogyan néz ki egy képtérkép html-ben:
Ha az egeret a zöld téglalap területe fölé viszi, láthatja, hogy ez egy hivatkozás a "#green_link"-re (a címke például ki van jelölve, az internet bármely oldalára hivatkozhat). A piros négyzetben a „#red_link”, a kék körben pedig a „#blue_link” szerepel.
A példa kódja:
img / primer-kartu-izobrazheniy-1.jpg">
Amint a példából látható, a kód nem olyan bonyolult. Vessünk egy pillantást a képhivatkozási térkép létrehozásához szükséges címkékre.
A példa leírása1. Létre kell hozni egy csomó képet és térképek
Linkmap létrehozásakor a usemap attribútum szükséges az img címkéhez.
2. A kártya leírása
3. A térkép minden elemét egy címke segítségével írjuk le , amely az alakzat attribútuma (téglalap, kör vagy sokszög) és annak koordinátái segítségével határozza meg az objektum típusát.
jegyzetA területek átfedhetik egymást. Ebben az esetben a hivatkozás az utoljára leírt objektumhoz vezet.
Címke attribútumok
1. Attribútum shape = "object_type" - beállítja az objektum típusát. A következő értékeket veheti fel:
- kör - kör;
- rect - téglalap;
- poli - sokszög;
2. Attribútum coords = "koordinátaértékek"- meghatározza az objektum geometriai helyét és méreteit.
A kép referenciapontja a bal felső sarok. Azok. ha 10 magasságú párnázást adott meg, az 10 képponttal lejjebb jelent.
Az objektum típusától függően különböző formátumokban kell beállítania a koordinátaértékeket. Minden érték pixelben van megadva (nem kell a px jelet írni).
- A kör típushoz: koordináták = (x, y, r), ahol x, y a kör középpontjának koordinátái, r pedig a kör sugara;
- A rect típushoz: koordináták = (x1, y1, x2, y2), ahol x1, y1 a téglalap bal felső pontjának koordinátái, x2, y2 a téglalap jobb alsó pontjának koordinátái;
- A poly típushoz: koordináták = (x1, y1, x2, y2, ..., xn, yn), a sokszög minden pontjának x, y koordinátái egymás után vannak feltüntetve;
3. Attribútum href = "hop_cím"- beállítja az átmenet linkjét (hasonlóan). Az ugráscímen kívül JavaScript-függvényeket is használhat bizonyos műveletek végrehajtására.
4. Cél attribútum = "érték" – hasonló a címkéhez meghatározza a hivatkozás követésének műveletét. Értékeket vehet fel:
- _blank - új ablakban nyitja meg az oldalt
- _self - betölti az oldalt az aktuális ablakba
- _parent - betölti az oldalt a szülőkeretbe
- _top – törli az összes keretet, és betölti az oldalt teljes böngészőablakban
5. Attribútum címe = "(! LANG: tipp" - выводит всплывающую подсказку. можно также сделать более красивую всплывающую подсказку: как сделать красивую всплывающую подсказку для ссылки »!}
6. Nohref attribútum - inaktívvá teszi a területet. Objektumok átfedésekor használatos. Ritkán használják, de néha nélkülözhetetlen megoldás lehet. Például inaktívvá tehet egy kis kört egy nagy körön belül.
A nohref területnek kell először mennie.
Minta kód:
A képen szereplő linkek térképének használata csak a feladatok szűk körében valósul meg. Például, amikor valamilyen sémát vagy vezetési térképet hoz létre. Más esetekben a térkép használata menük és egyéb grafikai elemek létrehozására ésszerűtlennek tűnik.
HTML képek címke használatával kerülnek a weboldalakra ... A grafika használata vizuálisan vonzóbbá teszi a weboldalakat. A képek segítenek jobban átadni egy webdokumentum lényegét és tartalmát.
HTML címkék használata
Képek beszúrása HTML dokumentumba
1. Címke ![]()
Elem a képet és annak tartalék tartalmát jelenti, amely az alt attribútum használatával kerül hozzáadásra. Mivel az elem
sorba van beépítve, ajánlatos blokkelemen belül elhelyezni, pl.
Vagy
Címke rendelkezik a szükséges src attribútummal, amelynek értéke a kép abszolút vagy relatív elérési útja:
Címkéhez a következő attribútumok állnak rendelkezésre:
| Tulajdonság | Leírás, elfogadott érték |
|---|---|
| alt | Az alt attribútum alternatív szöveget ad hozzá a képhez. Megjelenik azon a helyen, ahol a kép megjelenik a betöltés előtt, vagy amikor a grafika le van tiltva, és eszköztippként is megjelenik, amikor az egérmutatót a kép fölé viszi. Szintaxis: alt = "(! LANG: képleírás" . !} |
| kereszteredet | A crossorigin attribútum lehetővé teszi, hogy képeket töltsön be egy másik tartomány erőforrásaiból CORS-kérésekkel. A vászonra CORS-kérésekkel feltöltött képek újra felhasználhatók. Engedélyezett értékek: anonim – A kereszt-eredetű kérés HTTP-fejléc használatával történik, és nem adnak át hitelesítő adatokat. Ha a szerver nem ad hitelesítési adatokat annak a szervernek, amelyről a tartalmat kérik, a kép megsérül, és a használata korlátozott lesz. use-credentials – A kereszteredetű kérelmek végrehajtása átadott hitelesítő adatokkal történik. Szintaxis: crossorigin = "anonymous". |
| magasság | A height attribútum állítja be a kép magasságát px-ben. Szintaxis: magasság = "300". |
| ismap | Az ismap attribútum azt jelzi, hogy a kép a szerveren található térképkép része (a map-image egy kép kattintható területekkel). Ha a térkép képére kattint, a koordináták URL-lekérdezési karakterláncként kerülnek elküldésre a szervernek. Az ismap attribútum csak akkor engedélyezett, ha az elem Szintaxis: ismap. |
| longdesc | A kép részletes leírásának URL-je az alt attribútum mellett. Szintaxis: longdesc = "http://www.example.com/description.txt". |
| src | Az src attribútum adja meg a kép elérési útját. Szintaxis: src = "virág.jpg". |
| méretek | Beállítja a kép méretét a megjelenítési paraméterektől függően. Csak akkor működik, ha az srcset attribútum meg van adva. Az attribútum értéke egy vagy több vesszővel elválasztott karakterlánc. |
| srcset | Létrehoz egy listát a képernyőfelbontás alapján kiválasztandó képforrásokról. Használható az src attribútummal együtt vagy helyett. Az attribútum értéke egy vagy több vesszővel elválasztott sor. 
|
| használati térkép | A usemap attribútum a képet képtérképként határozza meg. Az értéknek # karakterrel kell kezdődnie. Az érték a címke name vagy id attribútumának értékéhez van társítva |
| szélesség | A width attribútum állítja be a kép szélességét px-ben. Szintaxis: szélesség = "500". |
1.1. Kép címe
A kép címe megadható teljes egészében (abszolút URL), például:
url (http://anysite.ru/images/anyphoto.png)
Vagy egy relatív útvonalon keresztül dokumentum vagy gyökérkönyvtár webhely:
url (../ images / anyphoto.png) - relatív elérési út a dokumentumból,
url (/images/anyphoto.png) a gyökérkönyvtár relatív elérési útja.
Ez a következőképpen értelmezhető:
../ - azt jelenti, hogy egy szinttel feljebb lépünk, a gyökérkönyvtárba,
képek / - lépjen a képeket tartalmazó mappába,
anyphoto.png - Képfájlra mutat.
1.2. Kép méretei
A képméret beállítása nélkül a rajz valós méretben jelenik meg az oldalon. A kép méreteit a szélesség és magasság attribútumok segítségével szerkesztheti. Ha csak az egyik attribútum van beállítva, a második automatikusan kiszámításra kerül a kép arányainak megőrzése érdekében.
1.3. Grafikus fájlformátumok
JPEG formátum (Közös fotószakértői csoport). JPEG képek ideális fényképekhez, több millió különböző színt tartalmazhatnak. A GIF-eknél jobban tömöríti a képeket, de a szöveg és a nagy, egyszínű területek elmosódhatnak.
GIF formátum (Grafikus csereformátum)... Ideális egyszínű területek, például logók tömörítésére. A GIF-ek segítségével beállíthatja az egyik színt átlátszóra, így a weboldal háttere a kép egy részén keresztül jelenhet meg. A GIF-ek egyszerű animációkat is tartalmazhatnak. A GIF-ek mindössze 256 árnyalatot tartalmaznak, így a képek foltosnak és irreális színűnek tűnnek, mint a plakátok.
PNG formátum (Hordozható hálózati grafika)... A GIF és JPEG formátumok legjobb tulajdonságait tartalmazza. 256 színt tartalmaz, és lehetővé teszi az egyik szín átlátszóvá tételét, miközben a képeket tömöríti kisebb méret mint egy GIF fájl.
APNG formátum (Animált hordozható hálózati grafika)... Képformátum alapján PNG formátum... Lehetővé teszi az animációk tárolását, és támogatja az átláthatóságot is.
SVG formátum (Skálázható vektorgrafika)... Az SVG rajz XML formátumban leírt geometriai alakzatok halmazából áll: vonal, ellipszis, sokszög stb. A statikus és animált grafika egyaránt támogatott. A függvénykészlet különféle átalakításokat, alfamaszkokat, szűrőeffektusokat, sablonok használatának lehetőségét tartalmazza. Az SVG képek minőségromlás nélkül átméretezhetők.
BMP formátum (Bittérképes kép)... Tömörítetlen (eredeti) bittérkép amelynek sablonja egy téglalap alakú pixelrács. A bittérképes fájl fejlécből, palettából és grafikus adatokból áll. A fejléc információkat tartalmaz a grafikus képről és a fájlról (pixelmélység, magasság, szélesség és színek száma). A paletta csak azokban a bittérképes fájlokban van megadva, amelyek palettaképeket (8 vagy kevesebb bitet) tartalmaznak, és legfeljebb 256 elemből állnak. A grafikus adatok magát a képet reprezentálják. A színmélység ebben a formátumban 1, 2, 4, 8, 16, 24, 32, 48 bit lehet pixelenként.
ICO formátum (Windows ikon)... Fájl ikon tárolási formátum Microsoft Windows... Ezenkívül a Windows ikon ikonként használatos az internet webhelyein. Ez egy ilyen formátumú kép, amely a webhely címe vagy könyvjelzője mellett jelenik meg a böngészőben. Egy ICO-fájl egy vagy több ikont tartalmaz, amelyek mérete és színe külön-külön beállítható. Az ikon mérete tetszőleges lehet, de a leggyakoribbak a négyzet alakú ikonok, amelyek oldala 16, 32 és 48 képpont.
2. Címke
Címke
A név attribútum elérhető a címkéhez, amely megadja a térkép nevét. A címke name attribútumának értéke
Elem
3. Címke
Címke csak egy hotspotot ír le az ügyféloldali képtérképen belül. Az elemnek nincs végcímkéje. Ha az egyik hotspot átfed egy másikat, akkor a hatókörlistából az első hivatkozás kerül megvalósításra.
| Tulajdonság | Rövid leírás |
|---|---|
| alt | Alternatív szöveget ad meg a térkép aktív területéhez. |
| koordináták | Meghatározza a terület helyzetét a képernyőn. A koordinátákat hosszegységben adjuk meg, és vesszővel választjuk el: számára kör- a kör középpontjának és sugarának koordinátái; számára téglalap- a bal felső és a jobb alsó sarok koordinátái; számára poligon- a sokszög csúcsainak koordinátáit a kívánt sorrendben, az ábra logikai kiegészítéséhez javasolt az elsővel megegyező utolsó koordinátákat is feltüntetni. |
| Letöltés | Kiegészíti a href attribútumot, és közli a böngészővel, hogy az erőforrást abban a pillanatban kell betölteni, amikor a felhasználó rákattint a hivatkozásra, ahelyett, hogy például előre megnyitná (például PDF-fájlként). Ha nevet adunk az attribútumnak, akkor nevet adunk a betöltött objektumnak. Az attribútum használata az érték megadása nélkül megengedett. |
| href | Megadja a hivatkozás URL-jét. Abszolút vagy relatív link is megadható. |
| hreflang | Meghatározza a hivatkozott webdokumentum nyelvét. Csak a href attribútummal együtt használatos. Az elfogadott értékek egy nyelvi kódot jelölő betűpárból álló rövidítés. |
| média | Meghatározza, hogy a fájl milyen típusú eszközökre lesz optimalizálva. Az érték bármilyen médialekérdezés lehet. |
| rel | Kiegészíti a href attribútumot az aktuális dokumentum és a csatolt dokumentum közötti kapcsolatra vonatkozó információkkal. Elfogadott értékek: alternatív – hivatkozás a dokumentum alternatív változatára (például nyomtatható oldalra, fordításra vagy tükörre). szerző - link a dokumentum szerzőjére. A könyvjelző a könyvjelzőkhöz használt állandó URL. help - link a segítséghez. licenc – link a webdokumentum szerzői jogi információira. next / prev – az egyes URL-ek közötti kapcsolatot jelzi. Ennek a jelölésnek köszönhetően a Google meg tudja állapítani, hogy ezeknek az oldalaknak a tartalma logikai sorrendben kapcsolódik-e. nofollow – tiltja keresőmotor kövesse az ezen az oldalon található hivatkozásokat vagy egy adott hivatkozást. noreferrer - azt jelzi, hogy egy hivatkozást követően a böngésző nem küldhet HTTP kérés fejlécet (Referrer), amely információt rögzít arról, hogy az oldal látogatója melyik oldalról érkezett. prefetch - azt jelzi, hogy a céldokumentumot gyorsítótárban kell tárolni, pl. a háttérben lévő böngésző betölti az oldal tartalmát a gyorsítótárába. keresés – Azt jelzi, hogy a céldokumentum keresőeszközt tartalmaz. címke - jelzi kulcsszó az aktuális dokumentumhoz. |
| alak | Beállítja a hotspot alakját a térképen és koordinátáit. A következő értékeket veheti fel: rect - téglalap alakú aktív terület; kör - aktív terület kör formájában; poli - aktív terület sokszög formájában; alapértelmezett - az aktív terület a teljes képterületet elfoglalja. |
| cél | A hivatkozás követésekor azt jelzi, hogy a dokumentum hova kerül betöltésre. A következő értékeket veszi fel: _self - az oldal betöltődik az aktuális ablakba; _blank - az oldal új böngészőablakban nyílik meg; _parent - az oldal betöltődik a szülő keretbe; _top - az oldal betöltődik a teljes böngészőablakba. |
| típus | Megadja a hivatkozott fájlok MIME típusát, pl. fájlkiterjesztés. |
4. Példa képtérkép készítésére
1) A kívánt alakzat aktív területein megjelöljük az eredeti képet. A területek koordinátái egy fotófeldolgozó programmal kiszámíthatók, pl. Adobe photoshop vagy Festék.
Rizs. 1. Példa képjelölésre térkép készítéséhez 2) Adja meg a térkép nevét úgy, hogy hozzáadja a címkéhez
Jpg "alt =" (! LANG: flowers_foto" width="680" height="383" usemap="#flowers">
!}
Rizs. 2. Példa térkép-kép létrehozására, amikor az egérkurzort egy virágra nyomjuk, egy leírást tartalmazó oldalra lépünk
Számítógépes segítség Olympus