U ovom članku ćemo pogledati kako napraviti mapu slike klijenta, kada kliknete na određeno područje od kojih možemo slijediti određenu poveznicu. Sastavljanje slikovnih karti rijetko se može naći na web stranicama, jer je ovaj proces prilično naporan, ali ako želite iznenaditi svoje posjetitelje neobičan oblik za veze i imate slobodnog vremena za samoobrazovanje, onda je ovaj članak za vas.
Označiti
Atributi oznake označavamo i koordinate područja (atribut coords) i vrstu oblika koji nam je potreban (atribut oblika):
Primjer upotrebe
Pogledajmo primjer u kojem kada kliknete na određeni oblik na jednoj slici, idete na različite web stranice koje opisuju te oblike (veze na Wikipediju):
Odaberite figuru:
I tako redom, što smo učinili u ovom primjeru:
- Postavio sliku (tag
), koju ćemo kasnije koristiti pri izradi slikovne karte. U usemap atributu morate navesti naziv slike karte koju ćemo koristiti u elementu
- Postavite sliku karte (tag
- Stavite četiri oznake , koji definiraju interaktivna područja na slici karte:
- Prvi mi pitamo pravokutno područje(atribut oblika s vrijednošću "rect"), odgovara našem prvi slika ( prva dva vrijednosti odgovaraju gornjem lijevom kutu, sljedeće dva vrijednosti određuju gornji i donji desni kut).
- Drugi naznačiti okruglo područje(atribut oblika s vrijednošću "krug"), odgovara našem drugi slika ( prvi vrijednost odgovara koordinatama osi x, a drugi duž osi g, treći određuje radius).
- O trećine I četvrta figura, tada se sastavljaju prema načelu poligonalno područje(atribut oblika s vrijednošću "poly"). Odredite potreban broj točaka na slici, izračunajte koordinate tih točaka ( grafički urednik) i odredite ih takvim redoslijedom da ih preglednik može povezati jednim retkom. Koristeći trokut kao primjer (treća slika): prvi točka (koordinate x I g vrhovi), drugi točka (koordinate x I g donji lijevi kut) i treći točka (koordinate x I g donji desni kut).
Skrećem vam pozornost da ako oznaka ima Praktični zadatak br.26.
Utančanost: radi čistoće praktičnog zadatka, predlažem korištenje vrha zvijezde kao prve točke i pomicanje u smjeru kazaljke na satu. Naveo sam kao vrijednost atributa href # u ovom slučaju djeluje kao rezervirano mjesto (ostajete na istoj stranici), možete napraviti prijelaz na bilo koju stranicu.
Trag: da biste dobili koordinate slike, koristite uređivač slika, čak i najjednostavniji uređivač, na primjer, Boja, prikazat će koordinate pokazivača. Zapišite koordinate na komad papira ili u posebnu datoteku i unesite vrijednosti na stranicu.
Ako imate bilo kakvih poteškoća u izvršavanju zadatka, pregledajte kod stranice tako da otvorite primjer u zasebnom prozoru i pažljivo ga proučite.
Označiti
Unutar kontejnera
- jedan ili više elemenata< >. Ovi elementi nemaju sadržaj, ali definiraju geometrijske regije karte slike i hiperveze povezane sa svakom regijom
- sadržaj na razini bloka. Ovaj sadržaj treba uključivati< >, koji određuju geometrijske regije karte i veze povezane sa svakom regijom
Ako oznaka
Ako se regije preklapaju, element koji definira regiju koji se pojavljuje ranije u dokumentu ima prednost.
HTML: 3.2 | 4 / XHTML: 1.0 | 1.1
Sintaksa
Atributi
| razreda | definira ime klase koja se koristi |
|---|---|
| red | određuje smjer likova:
|
| iskaznica | jedinstveni identifikator |
| jezik | definira jezik prikazanog dokumenta |
| Ime | naziv slikovne kartice. Koristi se kao vrijednost parametra usemap oznake |
| onblur | element gubi fokus |
| na klik | kliknite na element |
| ondblclick | dupli klik na element |
| u fokusu | element dobiva fokus |
| onkeydown | pritiskom tipke kada je element u fokusu |
| na tipku | pritiskanje i otpuštanje tipke kada je element u fokusu |
| onkeyup | otpuštanje prethodno pritisnute tipke kada je element u fokusu |
| onmousedown | klik na tipku miša kada je element u fokusu |
| onmousemove | kretanje pokazivača miša kada je element u fokusu |
| onmouseout | pomicanje pokazivača miša s elementa |
| prelazak mišem | postavljanje pokazivača miša na element |
| onmouseup | otpuštanje prethodno pritisnute tipke miša kada je element u fokusu |
| stil | specificira inline style sheet |
| titula | opis alata |
Primjer
- potrebna je oznaka za zatvaranje ()
- id atribut je obavezan
- Preporuča se pružiti tekstualnu alternativu grafičkoj kartici za slučajeve kada grafika nije dostupna ili je korisnik ne može dobiti
- Ne preporučuje se korištenje slikovne karte kao glavne navigacije, zbog slabe podrške u starijim i glasovnim preglednicima
Označiti — element razine bloka, tj. Sadržaj oznake uvijek počinje u novom retku. Prijelom retka također se dodaje nakon oznake.
HTML slike dodano na web stranice pomoću oznake . Korištenje grafike čini web stranice vizualno privlačnijim. Slike pomažu bolje prenijeti bit i sadržaj web dokumenta.
Korištenje HTML oznaka
Umetanje slika u HTML dokument
1. Oznaka ![]()
Element predstavlja sliku i njezin rezervni sadržaj, koji se dodaje pomoću atributa alt. Budući da element
je malim slovima, preporučljivo je staviti ga unutar blok elementa, na primjer,
Ili
Označiti ima potreban atribut src, čija je vrijednost apsolutna ili relativna putanja do slike:
Za oznaku Dostupni su sljedeći atributi:
| Atribut | Opis, prihvaćena vrijednost |
|---|---|
| alt | Atribut alt dodaje alternativni tekst za sliku. Prikazuje se na mjestu gdje se slika pojavljuje prije nego što se učita ili kada je grafika onemogućena, a također se prikazuje kao opis alata kada mišem prijeđete iznad slike. Sintaksa: alt="opis slike" . !} |
| unakrsno podrijetlo | Atribut crossorigin omogućuje učitavanje slika iz izvora na drugoj domeni pomoću CORS zahtjeva. Slike učitane na platno pomoću CORS zahtjeva mogu se ponovno koristiti. Dopuštene vrijednosti: anonimno - Zahtjev s različitim izvorima postavlja se pomoću HTTP zaglavlja i ne prenose se vjerodajnice. Ako poslužitelj ne pruži vjerodajnice poslužitelju od kojeg se traži sadržaj, slika će biti oštećena i njezina će upotreba biti ograničena. use-credentials — Cross-origin zahtjev se izvodi prosljeđivanjem vjerodajnica. Sintaksa: crossorigin="anonimno" . |
| visina | Atribut visine određuje visinu slike u px. Sintaksa: visina="300" . |
| ismapa | Atribut ismap označava da je slika dio slike karte koja se nalazi na poslužitelju (slika karte je slika s područjima na koja se može kliknuti). Kada kliknete na sliku karte, koordinate se šalju poslužitelju kao URL upitni niz. Atribut ismap dopušten je samo ako element Sintaksa: ismap. |
| longdesc | Prošireni URL opisa slike koji nadopunjuje atribut alt. Sintaksa: longdesc="http://www.example.com/description.txt" . |
| src | Atribut src navodi stazu do slike. Sintaksa: src="cvijet.jpg" . |
| veličine | Postavlja veličinu slike ovisno o opcijama prikaza. Radi samo kada je naveden atribut srcset. Vrijednost atributa je jedan ili više nizova, odvojenih zarezima. |
| srcset | Stvara popis izvora slike koji će biti odabrani na temelju rezolucije zaslona. Može se koristiti zajedno s atributom src ili umjesto njega. Vrijednost atributa je jedan ili više nizova, odvojenih zarezima. 
|
| mapa korištenja | Atribut usemap navodi sliku kao mapu slike. Vrijednost mora započeti simbolom #. Vrijednost je povezana s vrijednošću naziva oznake ili id atributa |
| širina | Atribut širine određuje širinu slike u px. Sintaksa: width="500" . |
1.1. Adresa slike
Adresa slike može biti navedena u cijelosti (apsolutni URL), na primjer:
url(http://anysite.ru/images/anyphoto.png)
Ili relativnim putem od dokument ili korijenski direktorij web stranica:
url(../images/anyphoto.png) - relativna putanja iz dokumenta,
url(/images/anyphoto.png) - relativna staza iz korijenskog direktorija.
To se tumači na sljedeći način:
../ - znači ići jednu razinu gore, u korijenski direktorij,
slike/ - idite u mapu sa slikama,
anyphoto.png - pokazuje na slikovnu datoteku.
1.2. Dimenzije slike
Bez postavljanja dimenzija slike, crtež se prikazuje na stranici u stvarnoj veličini. Možete urediti dimenzije slike pomoću atributa širine i visine. Ako je naveden samo jedan od atributa, drugi će se automatski izračunati kako bi se zadržale proporcije slike.
1.3. Formati grafičkih datoteka
JPEG format (Joint Photographic Experts Group). JPEG slike idealne su za fotografije i mogu sadržavati milijune različitih boja. Slike se sažimaju bolje od GIF-ova, ali tekst i velika područja pune boje mogu postati mrljasta.
GIF format (Format za razmjenu grafike). Idealno za sažimanje slika koje imaju područja pune boje, kao što su logotipi. GIF-ovi vam omogućuju da postavite jednu od boja da bude prozirna, dopuštajući da se pozadina web stranice prikazuje kroz dio slike. GIF-ovi također mogu sadržavati jednostavnu animaciju. GIF slike sadrže samo 256 nijansi, zbog čega slike izgledaju mrljave i nerealnih boja, poput postera.
PNG format (Prijenosna mrežna grafika). Uključuje najbolje značajke GIF i JPEG formata. Sadrži 256 boja i omogućuje jednu od boja učiniti prozirnom, dok komprimira slike u manju veličinu od GIF datoteke.
APNG format (Animirana prijenosna mrežna grafika). Format slike temeljen na PNG formatu. Omogućuje pohranjivanje animacije i također podržava transparentnost.
SVG format (Skalabilna vektorska grafika). SVG crtež sastoji se od skupa geometrijskih oblika opisanih u XML formatu: linija, elipsa, poligon itd. Podržane su i statične i animirane grafike. Skup funkcija uključuje razne transformacije, alfa maske, efekte filtera i mogućnost korištenja predložaka. SVG slikama može se promijeniti veličina bez gubitka kvalitete.
BMP format (bitmap slika). To je nekomprimirana (izvorna) rasterska slika čiji je predložak pravokutna mreža piksela. Bitmap datoteka sastoji se od zaglavlja, palete i grafičkih podataka. Zaglavlje pohranjuje informacije o grafičkoj slici i datoteci (dubina piksela, visina, širina i broj boja). Paleta je naznačena samo u onim bitmap datotekama koje sadrže slike palete (8 ili manje bitova) i ne sastoje se od više od 256 elemenata. Grafički podaci predstavljaju samu sliku. Dubina boje u ovom formatu može biti 1, 2, 4, 8, 16, 24, 32, 48 bita po pikselu.
ICO format (ikona Windows). Format pohrane ikone datoteke u sustavu Microsoft Windows. Također, Windows ikona se koristi kao ikona na web stranicama na Internetu. To je slika ovog formata koja se prikazuje pored adrese web stranice ili oznake u pregledniku. Jedna ICO datoteka sadrži jednu ili više ikona, od kojih se svaka veličina i boja mogu zasebno postaviti. Veličina ikone može biti bilo koje veličine, ali najčešće su kvadratne ikone sa stranicama od 16, 32 i 48 piksela.
2. Označite
Označiti
Oznaka ima dostupan atribut naziva koji specificira naziv karte. Vrijednost atributa name za oznaku
Element
3. Označite
Označiti opisuje samo jednu aktivnu regiju kao dio karte slike na strani klijenta. Element nema završnu oznaku. Ako se jedno aktivno područje preklapa s drugim, implementirat će se prva veza s popisa područja.
| Atribut | Kratki opis |
|---|---|
| alt | Postavlja alternativni tekst za aktivno područje karte. |
| koordinate | Određuje položaj područja na ekranu. Koordinate su dane u jedinicama duljine i odvojene zarezima: Za krug— koordinate središta i polumjer kruga; Za pravokutnik— koordinate gornjeg lijevog i donjeg desnog kuta; Za poligon— koordinate vrhova poligona u traženom redoslijedu, također se preporučuje navesti posljednje koordinate, jednake prvima, za logično dovršenje slike. |
| preuzimanje datoteka | Nadopunjuje atribut href i govori pregledniku da se resurs treba učitati u trenutku kada korisnik klikne vezu, umjesto da ga, na primjer, mora prvo otvoriti (poput PDF datoteke). Određivanjem imena za atribut, mi time dajemo ime učitanom objektu. Dopušteno je koristiti atribut bez navođenja njegove vrijednosti. |
| href | Određuje URL za vezu. Može se navesti apsolutna ili relativna adresa veze. |
| hreflang | Određuje jezik pridruženog web dokumenta. Koristi se samo u kombinaciji s atributom href. Prihvaćene vrijednosti su kratica koja se sastoji od para slova koja označavaju kod jezika. |
| medijima | Određuje za koje će vrste uređaja datoteka biti optimizirana. Vrijednost može biti bilo koji medijski upit. |
| rel | Proširuje atribut href informacijama o odnosu između trenutnog i povezanog dokumenta. Prihvaćene vrijednosti: alternativni - poveznica na alternativnu verziju dokumenta (na primjer, ispisani oblik stranice, prijevod ili zrcalo). autor — poveznica na autora dokumenta. knjižna oznaka - Trajni URL koji se koristi za knjižne oznake. pomoć - poveznica za pomoć. licenca - veza na informacije o autorskim pravima za ovaj web dokument. sljedeći/prethodni - označava odnos između pojedinačnih URL-ova. Zahvaljujući ovom označavanju, Google može utvrditi da je sadržaj ovih stranica povezan u logičnom nizu. nofollow - sprječava tražilicu da prati poveznice na danoj stranici ili određenu poveznicu. noreferrer - označava da prilikom praćenja poveznice preglednik ne bi trebao slati zaglavlje HTTP zahtjeva (Referrer), koje bilježi informacije o tome s koje stranice je posjetitelj stranice došao. prefetch - označava da se ciljni dokument treba predmemorirati, tj. Preglednik u pozadini preuzima sadržaj stranice u svoju predmemoriju. pretraživanje - Označava da ciljni dokument sadrži alat za pretraživanje. oznaka - određuje ključnu riječ za trenutni dokument. |
| oblik | Određuje oblik aktivnog područja na karti i njegove koordinate. Može uzeti sljedeće vrijednosti: rect — pravokutno aktivno područje; krug — aktivno područje u obliku kruga; poli — aktivno područje u obliku poligona; zadano — aktivno područje zauzima cijelo područje slike. |
| cilj | Određuje gdje će se dokument preuzeti kada se klikne na vezu. Prihvaća sljedeće vrijednosti: _self — stranica se učitava u trenutni prozor; _blank — stranica se otvara u novom prozoru preglednika; _parent — stranica se učitava u roditeljski okvir; _top - stranica se učitava u punom prozoru preglednika. |
| tip | Određuje MIME tip datoteka veze, tj. ekstenzija datoteke. |
4. Primjer izrade slikovne karte
1) Označite izvornu sliku u aktivna područja željenog oblika. Koordinate područja mogu se izračunati pomoću programa za obradu fotografija, npr. Adobe Photoshop ili Boja.
Riža. 1. Primjer označavanja slike za izradu karte 2) Postavite naziv kartice tako da ga dodate u oznaku
Jpg" alt="fotografija_cvijeća" width="680" height="383" usemap="#flowers">
!}
Riža. 2. Primjer izrade slikovne karte, kada kliknete kursorom miša na cvijet, idete na stranicu s opisom
profesionalci
- Slikovne karte omogućuju definiranje bilo kojeg oblika za referentno područje, što je posebno korisno za označavanje zemljopisnog područja. Stoga se slikovne karte najčešće koriste u geografskim područjima.
- Pogodnije je raditi s jednom slikom - ne morate brinuti o spajanju pojedinačnih fragmenata prilikom rezanja, a slika se lako može postaviti na pravo mjesto.
minusi
- Kada područje veze ima složen oblik, povećava se količina HTML koda. Kontura se aproksimira skupom ravnih segmenata; za svaku točku takvog segmenta treba odrediti dvije koordinate, a ukupan broj takvih točaka može biti prilično velik.
- Sukladno tome, povećava se složenost određivanja koordinata. Nije zgodno da ih odredite ručno, pa morate koristiti posebni programi, koji vizualno prikazuju područja i omogućuju vam njihovo uređivanje.
- Kada mijenjate sliku, na primjer, kada povećavate mjerilo, morat ćete ponovno postaviti koordinate svih referentnih područja.
- Ne možete primijeniti različite efekte na slikovne kartice koje su dostupne prilikom rezanja jedne slike u fragmente: učinak kotrljanja, djelomična animacija, individualna optimizacija slika za brzo učitavanje.
- Ne postoje jasno definirane granice veza. Stoga te granice moraju biti istaknute različitim sredstvima izravno na slici. Ako se slika ne učita iz nekog razloga, razumijevanje skupa veza postaje vrlo problematično.
Sa stajališta pogodnosti za korisnike, slikovne karte imaju samo jednu prednost - uključivanje poveznica različitih oblika. Ovo dodaje jasnoću prezentaciji informacija - nismo ograničeni na pravokutni oblik veze i možemo koristiti veze složene konfiguracije za vlastite potrebe.
Kartice sa slikama implementirane su u dvije razne opcije- poslužitelj i klijent. Ako se koristi opcija poslužitelja, preglednik šalje zahtjev poslužitelju za dobivanje adrese odabrane veze i čeka odgovor s potrebne informacije. Ovaj pristup zahtijeva dodatno vrijeme za čekanje rezultata i odvojene datoteke za svaku slikovnu karticu.
U klijentskoj verziji karta se nalazi u istom HTML dokumentu kao i poveznica na sliku. Kako biste označili da je slika karta, upotrijebite atribut usemap elementa . Vrijednost je pokazivač na opis konfiguracije kartice koja se postavlja pomoću elementa
Primjer 1: Izrada slikovne karte
Unutar kontejnera
Element ima sljedeće atribute.
- oblik - definira oblik aktivnog područja. Oblik može biti u obliku kruga (circle), pravokutnika (rect), poligona (poly).
- alt - dodaje alternativni tekst za svako područje. Služi samo kao komentar za link, jer se ne prikazuje na ekranu. Potreban atribut ako je prisutan href.
- naslov - prikazuje opis alata kada lebdite iznad područja.
- href - navodi adresu dokumenta na koji se ide; učinak je sličan atributu sličnog elementa .
- coords - postavlja koordinate aktivnog područja. Koordinate se broje u pikselima slijeva gornji kut slika, koja odgovara vrijednosti 0, 0. Prvi broj je vodoravna koordinata, drugi je okomita koordinata. Popis koordinata ovisi o obliku područja.
Za krug su određena tri broja - koordinate središta kruga i polumjer.
Karta slika omogućuje prilaganje poveznica na fragmente slike. Klikom na pojedine dijelove slike korisnik može pratiti jednu ili drugu poveznicu na različite web stranice.
Karta slike definirana je uparenom oznakom . HTML dokument može sadržavati više mapa slika, tako da svaka karta mora dobiti jedinstveni naziv, koji je određen atributom Ime.
Karta slike sastoji se od regija slike i njihovih odgovarajućih veza. Opisuje dio slike i dodjeljuje mu jednu oznaku kao vezu .
Atributi oznake
Prema zadanim postavkama, koordinate se mjere u pikselima.
Koordinatni početak je gornji lijevi kut ekrana, tj.
Primjeri različitih oblika područja slikovne karte
Ako se dva opisana područja preklapaju, tada se koristi poveznica koja pripada prvom. Ova se značajka može koristiti u situaciji kada korisnik klikne na točku koja ne pripada nijednom području karte, definiranjem posljednjeg područja karte kao pravokutnika širine i visine cijele slike.
Za korištenje slike kao karte u oznaci
morate unijeti dodatni atribut mapa korištenja, koji navodi naziv mape slike. Ovom nazivu prethodi znak "#".
Primjer korištenja Image Map
Kada kliknete na različita područja određene slike, mijenja se boja odgovarajućeg teksta.
