Adatvizualizáció HTML5 Canvas és SVG segítségével. Bevezetés az SVG grafikába Vector graphics svg

A legtöbb weboldal grafikát tartalmaz. Lehetővé teszi az információk színes és vizuális megjelenítését. Sok esetben jobb képet mutatni, mint hosszú szöveges leírást adni.
Kétféleképpen lehet grafikát elhelyezni egy oldalon:

beilleszteni az egyes képeket;
a háttér kitöltése képpel.

A grafikus kép mindenesetre a fájlból származik.

Grafikus kép beszúrása grafikus formátumú fájlból az oldalra a címke használatával történik (angolból, image - image) megadva a fájl címét az SRC attribútum argumentumaként:

A grafikus fájl címe egy URL vagy egy fájlnév, opcionálisan elérési úttal. Például egy logotip.jpg grafikus fájl megjelenítéséhez írja be a címkét

A címkében lévő grafika bitsebességének növelése használhatjuk a LOWSRC attribútumot (további paraméter), amely a grafikus fájl címét veszi argumentumként. Két grafikus fájlt készíthet: az egyik (pl. logotip.jpg) nagy felbontású képet, a másik (pl. logotip.gif) pedig kis felbontású képet tartalmaz. Aztán a címke

Megkéri a böngészőt, hogy először töltse le a logotip.gif fájlt, majd cserélje le a logotip.jpg fájlra, ahogy megérkezik.
A grafika betöltésének felgyorsításának másik módja, hogy a WIDTH (width) és HEIGHT (height) attribútumok segítségével pixelben mérve beállítjuk annak a téglalap alakú területnek a méretét, amelybe a grafikus kép kerül. Ha megadja ezeket az attribútumokat, akkor a böngésző először helyet foglal a grafikák számára, elkészíti a dokumentum elrendezését, megjeleníti a szöveget, és csak ezután tölti be a grafikát. Vegye figyelembe, hogy a böngésző tömöríti vagy nyújtja a képet, hogy beleférjen a megadott méretű keretbe. Példa a képméretek megadására:

A grafikát általában a szöveggel együtt használják, így felmerül a szöveg és a grafikus kép összehangolásának feladata. Ezt a problémát az attribútum segítségével oldjuk meg IGAZÍTSA címke különféle érveket használva. Például azt szeretnénk, hogy a szöveg jobbra vagy balra kerüljön egy kép köré. Általában a kép a szöveghez közel van beágyazva, ami csúnya lehet. Ennek elkerülése érdekében beállíthat üres margókat az illusztráció köré. A mezők attribútumok használatával jönnek létre VSPACE felső és alsó margókhoz és HSPACE a címke oldalsó margójához . Az attribútumok argumentumai számokként vannak megadva, amelyek a margók méretét adják meg képpontokban. A grafikák körüli szöveg tördelésének megszüntetéséhez használja a címkét
.
A következő címke beállítja a logo.jpg fájl grafikáinak tördelését jobbra (a kép a szövegtől balra lesz):

Ha a képet a szövegtől jobbra szeretné elhelyezni, akkor szüksége van az attribútumra IGAZÍTSA argumentum hozzárendelése JOBB:

A kép körüli margók beállításához nézet címkét kell írnia:

Itt a 20 és 10 számok határozzák meg a margók méretét.
Vegyünk egy példát a grafikák és szövegek megosztására. Nyissa meg a Jegyzettömb (szövegszerkesztő Jegyzettömb) Windowst. Írjon bele HTML kódot a fent tárgyalt címkék segítségével. A következő egy program, amely szöveget és grafikát ad ki. Grafikus fájlként használhatja bármelyik fájlját. Itt a logotip.gif fájl kerül felhasználásra.

1. Feladat

<Н1>A szöveg a jobb oldalon található grafikák köré fonódik
Ez egy példa a szöveg és a grafika kombinálására.
A HTML program szövege bármilyen szövegszerkesztőben írható. Ez szöveges jelölőcímkéket használ.

Ez a szöveg egy új bekezdésből jelenik meg. Ehhez egy speciális címkét használtunk.

Próbálja átméretezni a böngészőablakot. Figyeld meg, hogyan változik a szöveg helyzete.

Rizs. 657. A szöveg körbefutja a képet a jobb oldalon

A képek (valamint egyéb elemek) oldalon történő precíz elhelyezésére széleskörű lehetőségeket kínál táblázatokés stílusok. Ezekről a HTML-elemekről később lesz szó. Például megadhat egy táblázatot látható keretek nélkül, és elhelyezhet képeket, szövegeket és egyéb elemeket a táblázat celláiban.

A D3 a leghasznosabb az SVG vizualizációk létrehozására és manipulálására. Rajz segítségével div"S és más HTML-elemek lehetségesek, de egy kicsit makacs, és általában a megjelenítési inkonzisztenciák vannak a böngészők között. Az SVG használata robusztusabb, vizuálisan egységesebb és gyorsabb.

A vektorgrafikus szerkesztők, például az Illustrator használható SVG-fájlok létrehozására, de meg kell tanulnunk, hogyan hozhatjuk létre őket kóddal.

svg elem

A Scalable Vector Graphics egy szöveges képformátum. Minden SVG-kép a HTML-hez hasonló kódjelöléssel van meghatározva. Az SVG-kód közvetlenül beépíthető egy HTML-dokumentumba. Minden webböngésző támogatja az SVG-t, kivéve az Internet Explorer 8-as és újabb verzióit. Az SVG XML-alapú, ezért észreveheti, hogy a záró címkével nem rendelkező elemeknek önzárónak kell lenniük. Például:

Mielőtt bármit is rajzolhatna, létre kell hoznia egy SVG elemet. Gondoljon az SVG elemre úgy, mint arra a vászonra, amelyen az összes vizualitás megjelenik (ilyen módon az SVG elvileg hasonló a HTML vászonelemhez). Legalább a szélességet és a magasságot érdemes attribútumokkal beállítani szélességés magasság, ill. Ha nem állítja be őket, az SVG a blokk teljes területére kiterjed.

Íme a fenti kóddal létrehozott SVG elem:

Nem látod őt? Kattintson jobb gombbal a fenti üres helyre, és válassza az Elemkód megtekintése lehetőséget. A webellenőrnek valami ehhez hasonlót kell mutatnia:

Figyelje meg, hogy van egy SVG-elem, amely vízszintesen 500 képpontot, függőlegesen pedig 50 képpontot ölel fel.

Vegye figyelembe azt is, hogy a böngészők a képpontokat tekintik az alapértelmezett mértékegységnek. A méreteket 500 és 50, nem pedig 500 képpont és 50 képpont között adtuk meg. Megadhatjuk a px-t explicit módon, vagy bármilyen más mértékegységet, például: em, pt, ban ben, cm, és mm.

Egyszerű figurák

Van egy sor alakzat, amelyet elhelyezhet egy SVG-elemen belül. Ez a készlet a következőket tartalmazza: rect, kör, ellipszis, vonal, szövegés pálya.

Ha ismeri a számítógépes grafikai programozást, emlékszik rá, hogy a pixel alapú koordinátarendszer általában a bal felső sarokból indul, és pontkoordinátái (0,0) vannak. Növekedés x balról jobbra haladjon, növelje nál nél- fentről lefelé.

0,0 100,20 200,40

rect négyzetet rajzol. A négyzetet négy érték adja: x, y- jelezze a bal felső sarok pontját; szélesség, magasság- jelezze a négyzet szélességét és magasságát. Ez a négyzet az SVG teljes területét elfoglalja:

kör kört rajzol. A kört három érték adja: cx, cy jelöljön meg egy pontot a körülírt kör közepén, r beállítja a kör sugarát. Ez a kör az SVG-nk közepén helyezkedik el, mivel az attribútum cx("x center") értéke 250. Példa:

ellipszis hasonlóhoz állítva kör, de feltételezzük, hogy a sugár két tengely mentén van megadva: mentén xés által nál nél. Ahelyett x használat rx, ahelyett y - ry.

vonal vonalat húz. Használat x1és y1 a sor kezdetének koordinátáinak beállításához, és x2és y2 hogy beállítsuk a vég koordinátáit. Tulajdonság stroke be kell állítania a vonal színét, különben láthatatlan lesz.

szöveg szöveget rajzol. Használat x a bal szél jelzésére, és y az úgynevezett alapvonal függőleges helyzetének jelzésére.

könnyű peasy könnyű peasy

a szöveg örökli a szülőelem CSS-betűstílusait, hacsak nem állít be saját stílust a szöveghez. Figyelje meg, hogy a fenti szövegformázás hogyan egyezik az ebben a bekezdésben leírt szöveggel. Felülírhatjuk a formázási stílusokat, például:

könnyű peasy könnyű peasy

Vegye figyelembe azt is, hogy ha bármely vizuális elem eléri egy SVG-elem szegélyét, akkor az le lesz vágva. Legyen óvatos használat közben szöveg hogy ne szakadjanak le a szöveg melletti csilingeléseid. Láthatja, mi történik a szöveggel, ha beállítja az alapvonalat (pl. nál nél) 50-re állítva, ami megegyezik az SVG magasságával:

könnyű peasy könnyű peasy

pálya a fent leírt ábráknál bonyolultabb dolgokat rajzol (például országok sziluettje a geotérképeken), és külön ismertetjük. És most egyszerű formákkal fogunk dolgozni.

SVG elemek stílusa

Alapértelmezés szerint minden SVG elem fekete kitöltéssel rendelkezik, és nincs keret. Ha szeretnél valamit ezen túl, akkor meg kell alakítanod az elemedet. Az alábbiakban felsoroljuk az általános SVG-tulajdonságokat:

tölt- töltés. színérték. Csakúgy, mint a CSS-ben, a szín többféleképpen is megadható:
- név szerint: narancs;
- érték hexadecimális formában: #3388aa, #38a;
- érték RGB formátumban: rgb(10, 150, 20);
- érték RGBA formátumban: rgba(10; 150; 20; 0,5).
stroke- keret. színérték.
löketszélesség- szegély szélessége (általában pixelben).
átlátszatlanság- átláthatóság. Numerikus érték 0,0 (teljesen átlátszó) és 1,0 (teljesen látható) között.

VAL VEL szöveg A következő tulajdonságokat is használhatja:

betűtípus család
betűméret

Kétféleképpen lehet stílusokat alkalmazni az SVG-elemekre: vagy közvetlenül az elemen belüli stílusok attribútumaként történő írásával, vagy CSS-szabályok segítségével.

Az alábbiakban néhány közvetlenül az elemen beállított CSS-tulajdonság látható kör:

Más módon is megtehetjük ezt: ne írjunk elő stílusattribútumokat, hanem adjunk meg egy stílusosztályt (ugyanúgy, mint egy normál HTML elemnél):

majd add hozzá tölt, strokeés löketszélesség paraméterek a szükséges osztály CSS-stílusaiban:

Sütőtök ( töltelék: sárga; körvonal: narancssárga; körvonal szélessége: 5; )

A második megközelítésnek számos nyilvánvaló előnye van:

Lehetőség van egy osztályt egyszer leírni és sok elemre alkalmazni.
A CSS-kód könnyebben érthető, mint az elemeken belüli attribútumok.
Ezen okok miatt a második megközelítés könnyebben karbantartható és gyorsabban megvalósítható.

A CSS használata az SVG-k stílusához azonban zavaró lehet egyesek számára. tölt, stroke, löketszélesség mégsem CSS-tulajdonságok (a legközelebbi CSS-ekvivalensek háttérszínés határ). Érdemes megjegyezni, hogy az SVG-elemekhez mely stíluslapszabályok vannak megadva svg a CSS-választóhoz:

Svg .pumpkin ( /* ... */ )

Sablon és a rajzolás sorrendje

Az SVG-ben önmagukban nincsenek rétegek, és nincs mélységfogalom. Az SVG nem támogatja a CSS-tulajdonságot z-index, így az alakzatok egy kétdimenziós térben is elrendezhetők.

És mégis, ha több alakzatot rajzol, ezek átfedik egymást:

Az elemek kódban megadott sorrendje határozza meg azok mélységét. A lila négyzet az első helyen szerepel a kódban, tehát először rajzolják ki. Ezután egy kék négyzetet rajzolunk a lila fölé, majd zöldet a kékre és a lilára, és így tovább.

Gondoljon az SVG-alakzatokra úgy, mintha vászonra rajzolnák őket. Az utoljára felvitt szín átfesti a többi színt, „előre” állva.

A rajzi sorrendnek ez a szempontja akkor válik fontossá, ha több vizuális eleme van, amelyeket semmi sem fedhet le. Lehetnek például tengelyek vagy értékcímkék a tengelyeken, amelyek a szórásdiagramban jelennek meg. A tengelyeket és a címkéket hozzá kell adni az SVG végéhez, hogy azok a többi elem előtt jelenjenek meg és láthatóak legyenek.

Átláthatóság

Az átlátszóság akkor lehet hasznos, ha a vizualizáció elemei átfedik egymást, de mindegyiknek láthatónak kell lennie, vagy ha bizonyos elemeket szeretne kiemelni, de másokat kevésbé láthatóvá tenni.

Kétféleképpen alkalmazhatja az átlátszóságot: használjon RGB színt alfa-csatornával, vagy állítson be egy tulajdonságot átlátszatlanság számérték.

Te tudod használni rgba() ahol színt kell megadnia, például attribútumokban töltés stroke. rgba() elvárja, hogy 3 értéket adjon meg 0 és 255 között a piros, zöld és kék színhez, valamint egy alfa csatornát (átlátszóságot) 0,0 és 1,0 között.

Vegye figyelembe, hogy a módszerrel rgba(), az átlátszóságot alkalmazzák töltés stroke attribútumok ettől függetlenül. Az alábbi körök kitöltése 75%-ban, a szegélyük 25%-ban átlátszó:

Ha átlátszóságot szeretne alkalmazni a teljes elemre, be kell állítania az attribútumot átlátszatlanság. Alább láthatók a teljesen látható körök:

és ezek ugyanazok a körök, eltérő átlátszósággal:

Használhatja az attribútumot is átlátszatlanság olyan elemhez, amelynek színei a formátumban vannak megadva rgba(). Ha ezt teszi, az átlátszóság megsokszorozódik. Az alábbi körökben ugyanazokat az RGBA színértékeket használják töltés stroke. Az első elemhez nincs beállítva attribútum átlátszatlanság, míg a másik kettőnél:

Vegye figyelembe, hogy a harmadik kör átlátszatlanság egyenlő 0,2 vagy 20%. A lila részének átlátszósága azonban 75%. Így a lila rész végül 0,2*0,75 = 0,15 vagy 15%-ban átlátszó lesz.

A vektorgrafikát széles körben használják nyomtatott anyagokban. Ami a weboldalt illeti, itt is használhatunk vektorgrafikát SVG vagy Scalable Vector Graphics (skálázható vektorgrafika) segítségével. A hivatalos W3.org specifikáció a következőképpen írja le:

Kétdimenziós grafika leírására szolgáló nyelv XML használatával. Az SVG háromféle grafikus objektum használatát teszi lehetővé: vektorgrafikus alakzatok (például egyenes és görbe vonalakból álló útvonalak), képek és szöveg.

A technológia 1999 óta elérhető, és 2011. augusztus 16-án bekerült a W3C ajánlások közé. Az SVG-t azonban még mindig nem használják széles körben, annak ellenére, hogy számos előnye van a vektorgrafikáknak a bitképek helyett.

A méretezhető vektorgrafika előnyei

Ami a grafikák weboldalakon való felhasználását illeti, a méretezhető vektorgrafika számos előnnyel rendelkezik a rasztergrafikával szemben, amelyek a következők:

határozat Függetlenség

A rasztergrafika (vagy Bitmap) felbontásfüggő, mivel képpontok felhasználásával jön létre. Ha egy ilyen grafikus elem mérete megnő, akkor a nagy négyzetek azonnal láthatóvá válnak. A vektorgrafikáknál ez nem történik meg, mert nem a felbontástól függenek, hanem matematikai számításokra épülnek, ami lehetővé teszi, hogy tetszőleges méretre növeljük, és ne veszítsük el a minőséget.

HTTP kérések csökkentése

A méretezhető vektorgrafikák az svg tag használatával közvetlenül beágyazhatók egy HTML dokumentumba, így a böngészőnek nincs szüksége további kérésre a grafikához. A webhely teljesítményére is pozitív hatással van.

Stílus és szkript

Az svg címkével való közvetlen integráció azt is lehetővé teszi, hogy a grafikát CSS-sel alakítsuk ki. Ugyanúgy módosíthatjuk az objektum tulajdonságait, mint a háttérszín, az átlátszatlanság, a szegélyek és így tovább, ugyanúgy, mint a HTML-ben. A grafikát JavaScripten keresztül is vezérelhetjük.

Képes animálni és szerkeszteni

Az SVG-objektumok animációs elemekkel vagy JS-könyvtárral, például jQuery-vel animálhatók. Az SVG objektum bármilyen szövegszerkesztővel vagy grafikus szoftverrel is szerkeszthető, például (ingyenes) vagy .

Kisebb fájlméret

Az SVG fájl mérete kisebb, mint a rasztergrafika.

Rajzoljon egyszerű alakzatokat SVG segítségével

A specifikáció szerint SVG-vel sokszögeket, köröket, vonalakat vagy ellipsziseket rajzolhatunk, és ahhoz, hogy a böngésző méretezhető vektorgrafikát generáljon, ezeket a grafikai elemeket "svg" címkékbe kell helyezni. Nézzük az alábbi példákat:

Vonal

Ahhoz, hogy SVG-vel vonalat húzzunk, használhatjuk a "vonal" elemet. Ez az elem egy egyenes vonal rajzolására szolgál, így csak két pontból áll: a kezdetből és a végből.

Mint fentebb látható, a vonal kezdőpontjának koordinátája az első két x1 és x2 attribútumban, a végpont koordinátája pedig az y1 és y2 attribútumokban van megadva.

Két további attribútum is található itt: a stroke és a stroke-width , amelyek a szegély színéért és szélességéért felelősek. Másrészt ezeket az attribútumokat inline stílusban is definiálhatjuk, az alábbiak szerint:

Style="stroke-width:1; stroke:rgb(0,0,0);"
és ugyanazt az eredményt fogja adni nekünk.

szaggatott vonal

Ez nagyon hasonlít a "vonal"-hoz, de a "polyline" elemmel több vonalat is rajzolhatunk egy helyett. Íme egy példa:

A "polyline" elemnek olyan pontattribútumai vannak, amelyek a vonalak összes koordinátáját tartalmazzák.

Téglalap

Ugyanilyen egyszerűen rajzolhatunk téglalapot is, csak a „rect” elem segítségével. Csak meg kell adnunk a szélességet és a magasságot:

Kör

A "kör" elemmel kört is rajzolhatunk. Ebben a példában egy 100 sugarú kört rajzolunk, amelyet az r attribútum határoz meg:

Az első két attribútum, a cx és cy határozza meg a kör középponti koordinátáját. A fenti példában 102-t állítottunk be mind az x, mind az y koordinátákhoz. Ha ezek az attribútumok nincsenek beállítva, akkor alapértelmezés szerint 0 lesz.

Ellipszis

Az "ellipszis" elemmel ellipsziseket rajzolhatunk. Itt minden nagyjából ugyanúgy működik, mint a körnél, de ezúttal külön szabályozhatjuk az x vonal sugarát és az y vonal sugarát az rx és ry attribútumok segítségével.

Poligon

A "sokszög" elemmel sokszögeket, több szögű és oldalú alakzatokat rajzolhatunk, például háromszöget, nyolcszöget. Példa:

A vektorgrafikus szerkesztő használata

Amint látja, egyszerű alakzatok rajzolása SVG-vel HTML-ben meglehetősen egyszerű. Ha azonban bonyolultabb objektumra van szükségünk, akkor ez a módszer már nem felel meg nekünk.

Szerencsére, ahogy fentebb említettük, használhatunk vektorgrafikus szerkesztőt, például az Adobe Illustratort vagy az Inkscape-et a munkához. Ha ismeri ezt a szoftvert, könnyen rajzolhat objektumokat egy felhasználóbarát felület segítségével, nem pedig HTML kód használatával.

Vagy magát az svg fájlt is beágyazhatja a következő elemek valamelyikével: beágyazás, iframe, objektum.

Az eredmény hasonló lesz.

Ebben a példában a .

Böngésző támogatja a méretezhető vektorgrafikát

A böngésző támogatását tekintve a méretezhető vektorgrafika már jól támogatott az IE8-ban és korábbi verziókban. De ez megoldható a JavaScript-könyvtárral. A dolgunk megkönnyítése érdekében az eszközzel átalakítjuk az SVG-kódunkat Raphael által támogatott formátumba.

A kezdéshez töltse le és foglalja bele a Raphael.js könyvtárat a HTML-kódjába. Ezután töltse fel az svg fájlt a webhelyre, másolja ki és illessze be a generált kódot a következő betöltési funkcióba:

window.onload=function() (
//ide megy a Raphael kód
}
A body címkén belül illessze be a következő div elemet az rsr id attribútummal.

És itt végeztünk! Lásd a példát az alábbi linken.

Következtetésképpen

Tehát ezek az SVG alapjai. Reméljük, most már egy kicsit megérti ezt a témát. Ez az egyik legjobb módja oldalai teljesítményének optimalizálásának, miközben továbbra is olyan grafikát biztosít, amely még a Retina képernyőkön is tisztán látható.

Szokás szerint, ha kíváncsi, készítettünk egy kis válogatást további cikkekből.

* (Bevezetés az SVG-be)
* (SVG: ne függjünk a felbontástól)
* (Miért ne használnánk az SVG-t?)

Köszönjük, hogy elolvasta, és reméljük, hogy hasznosnak találja ezt a cikket!

Figyelem! Nincs engedélye a rejtett szöveg megtekintéséhez.

HTML képek címkével hozzáadva a weboldalakhoz . A grafika használata vonzóvá teszi a weboldalakat. A képek segítenek jobban átadni a webdokumentum lényegét és tartalmát.

HTML címkék használata és létrehozhat képtérképek aktív régiókkal.

Képek beszúrása HTML dokumentumba

1. Címke

Elem egy képet és annak tartalék tartalmát képviseli, 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 egy kötelező 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:

1. táblázat Címke attribútumok

Tulajdonság	Leírás, elfogadott érték
alt	Az alt attribútum alternatív szöveget ad a képhez. Megjelenik azon a helyen, ahol a kép megjelenik, mielőtt betöltené, vagy ha 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ések segítségével. A vászonra CORS-kérésekkel feltöltött képek újra felhasználhatók. Engedélyezett értékek: névtelen – A keresztirányú 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, amelytől a tartalmat kérik, akkor a kép megsérül, és a használata korlátozott lesz. use-credentials – A kereszteredetű kérelmek átadott hitelesítő adatokkal készülnek. Szintaxis: crossorigin="anonymous" .
magasság	A height attribútum a kép magasságát adja meg. Megadható px vagy % - ban . Szintaxis: magasság: 300 képpont .
ismap	Az ismap attribútum azt jelzi, hogy a kép a szerveren található térképkép része (a térképkép egy kattintható területekkel rendelkező kép). 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 az elem gyermeke érvényes href attribútummal. Szintaxis: ismap .
longdesc	A kép kiterjesztett leírásának URL-je, az alt attribútum kitöltésével. 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épméretet a megjelenítési beállításoktól függően. Csak akkor működik, ha az srcset attribútum be van állítva. 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álasztott 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 karakterlánc.
használati térkép	A usemap attribútum egy képet képtérképként határoz 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 és kapcsolatot teremt az elemek között és . Az attribútum nem használható, ha az elem az elem gyermeke vagy
szélesség	A width attribútum határozza meg a kép szélességét. Megadható px vagy % - ban . Szintaxis: szélesség: 100% .

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,
Az url(/images/anyphoto.png) egy relatív elérési út a gyökérkönyvtárból.

Ez a következőképpen értelmezhető:
../ - azt jelenti, hogy egy szinttel feljebb lépünk, a gyökérkönyvtárba,
images/ - lépjen a képeket tartalmazó mappába,
anyphoto.png - egy képfájlra mutat.

1.2. Kép méretei

A kép méreteinek beállítása nélkül a rajz a tényleges méretében jelenik meg az oldalon. A kép méreteit a szélesség és magasság attribútumok használatával szerkesztheti. Ha az attribútumok közül csak az egyik van beállítva, a másodikat a rendszer automatikusan kiszámítja 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). A JPEG képek ideálisak fényképekhez, több millió különböző színt tartalmazhatnak. A képek jobban tömörítenek, mint a GIF-ek, de a szöveg és a nagyméretű egyszínű területek foltossá válhatnak.

GIF formátum (Grafikus csereformátum). Ideális olyan képek tömörítésére, amelyeken egyszínű területek találhatók, például logók. A GIF-ek lehetővé teszik, hogy az egyik színt átlátszóra állítsa, így a weboldal háttere átlátszóvá válik a kép egy részén. A GIF-ek egyszerű animációkat is tartalmazhatnak. A GIF-ek mindössze 256 árnyalatot tartalmaznak, ami miatt a képek foltosnak és irreálisnak tűnnek, akár 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 kisebb méretűre tömöríti, mint egy GIF-fájl.

APNG formátum (Animált hordozható hálózati grafika). A PNG formátumon alapuló képformátum. Lehetővé teszi 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 szolgáltatáské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épet jelent, 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 tárol 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 Bitmap fájlokban van megadva, amelyek palettázott képeket tartalmaznak (8 bit vagy kevesebb), é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 a Microsoft Windows rendszerben. Ezenkívül a Windows ikon ikonként használatos az internetes webhelyeken. Ez egy ilyen formátumú kép, amely a webhely címe vagy a könyvjelző 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 van beállítva. 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 grafikus kép megjelenítésére szolgál térképként hotspotokkal. A hotspotokat az határozza meg, hogy az egérkurzor hogyan változik lebegtetés közben. A hotspotokra kattintva a felhasználó a kapcsolódó dokumentumokhoz navigálhat.

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 meg kell egyeznie az elem usemap attribútumában szereplő névvel :

...

Elem számos elemet tartalmaz , amelyek interaktív területeket határoznak meg a térképképen.

3. Címke

Címke csak egy hotspotot ír le az ügyféloldali képtérképen belül. Az elemnek nincs záró címkéje. Ha az egyik hotspot átfedi a másikat, akkor a hotspotok listájából az első hivatkozás kerül megvalósításra.

2. táblázat Címkeattribútumok

Tulajdonság	Rövid leírás
alt	Alternatív szöveget ad meg a térkép aktív területén.
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ái a megfelelő sorrendben, az ábra logikai kiegészítése érdekében javasolt az elsővel megegyező utolsó koordinátákat is megadni.
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őtte megnyitná (például PDF-fájlként). Ha nevet adunk egy attribútumnak, akkor nevet adunk a betöltött objektumnak. Egy 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 linkcím is megadható.
hreflang	Meghatározza a társított webdokumentum nyelvét. Csak a href attribútummal együtt használatos. Az elfogadott értékek egy rövidítés, amely a nyelvi kódot jelölő betűpárból áll.
média	Meghatározza, hogy a fájl mely eszköztípusokra lesz optimalizálva. Az érték bármilyen médialekérdezés lehet.
rel	Kitömi 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 egy alternatív változatára (például egy nyomtatható oldalra, egy fordításra vagy egy tükörre). szerző – hivatkozás a dokumentum szerzőjére. A könyvjelző a könyvjelzőkhöz használt állandó URL. súgó – hivatkozás a súgóhoz. licenc – A webdokumentum szerzői jogi információira mutató hivatkozás. következő/előző – az egyes URL-ek közötti kapcsolatot jelzi. Ezzel a jelöléssel a Google megállapíthatja, hogy ezeknek az oldalaknak a tartalma logikai sorrendben kapcsolódik-e egymáshoz. nofollow - megtiltja, hogy a keresőmotor kövesse az ezen az oldalon vagy egy adott linken található hivatkozásokat. noreferrer - azt jelzi, hogy hivatkozás követésekor a böngészőnek nem szabad HTTP kérés fejlécet (Referrer) küldenie, amely információt tartalmaz 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 működő 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 – Megadja az aktuális dokumentum kulcsszavát.
formák	Megadja a hotspot alakját a térképen és koordinátáit. A következő értékeket veheti fel: rect egy 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 - a hotspot a kép teljes területét elfoglalja.
cél	Meghatározza, hogy a dokumentum hova kerüljön betöltésre, ha a hivatkozásra kattintanak. 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 egy teljes böngészőablakban töltődik be.
típus	Megadja a hivatkozásfájlok MIME típusát, pl. fájlkiterjesztés.

4. Példa képtérkép készítésére

1) A forrásképet a kívánt alakú aktív területekre jelöljük. A terület koordinátái kiszámolhatók egy fotófeldolgozó programmal, pl. Adobe Photoshop vagy Festék.

Rizs. 1. Példa képjelölésre térkép készítéséhez

2) Állítsa be a térkép nevét úgy, hogy hozzáadja a címkéhez a name attribútum használatával. Ugyanezt az értéket rendeljük a címke usemap attribútumához .

Jpg" alt="(!LANG:flowers_foto" width="680" height="383" usemap="#flowers"> !}
Rizs. 2. Példa képtérkép készítésére, amikor egy virágra kattintasz, egy leírást tartalmazó oldalra lépsz