HTML - Oppitunti 15. Navigointikartat - kartta

Tällaiset kuvakartat voivat olla asiakas- tai palvelinpuolen. Asiakaskartan linkit tallentuvat itse dokumenttiin, ja hiirellä hiirellä selain määrittää itse, mille alueelle tämän pisteen koordinaatit kuuluvat ja navigoi haluttuun linkkiin.

Palvelinversiossa nämä koordinaatit välitetään ensin palvelimelle, käsitellään siellä erikoisohjelmalla ja vasta sen jälkeen seurataan linkkiä. On selvää, että asiakasnavigointikartat ovat parempia. Otamme ne huomioon.

Oletetaan esimerkiksi, että olemme kodinkoneliike ja sivustomme otsikossa on seuraava kuva:

Tehdään siitä navigointikartta, ts. kun napsautat jääkaappia, sinut ohjataan jääkaapeille omistetulle sivulle (jossa on mallit, kuvaukset ja hinnat), kun napsautat pölynimuria ja pesukonetta, siirryt niitä vastaaville sivuille.

Tätä varten meidän on kuvattava tämän kuvan alueet, jotka ovat linkkejä. Tunnisteita käytetään kuvaamaan tällaisia ​​alueita vain yhdellä parametrilla nimi, joka määrittää linkkikartan nimen ja jota käytetään sitten linkittämiseen tähän karttaan.

• muoto- määrittää alueen muodon, voi saada seuraavat arvot:
  • rect- suorakulmion muotoinen alue,
  • ympyrä- ympyrän muotoinen alue,
  • poly- monikulmion muotoinen alue,
  • oletuksena- koko alue.
• cootds- asettaa erillisen alueen koordinaatit:
  • varten rect suorakulmion vasemman yläkulman ja oikean alakulman koordinaatit on määritetty,
  • varten ympyrä ympyrän keskipisteen ja säteen koordinaatit on määritelty,
  • varten poly monikulmion kärkien koordinaatit määritetään vaaditussa järjestyksessä.
• href- määrittää linkin osoitteen.
• tavoite- käytetään kehyksiä käytettäessä ja ilmaisee kehyksen, johon sivu tulee ladata.
• alt- asettaa vaihtoehtoisen tekstin alueelle.

Näihin tarkoituksiin käytetään yleensä jotain ohjelmaa, esimerkiksi Image Ready, jossa on erityinen työkalu alueiden hahmottamiseen ja joka rakentaa automaattisesti kuvaukset näistä alueista. Näiden ohjelmien toiminnan huomioiminen ei sisälly HTML-kurssiin, joten tässä asetetaan koordinaatit "silmällä". Katsopa kuvaamme uudelleen:

Kuvamme leveys on 738 pikseliä ja korkeus 192 pikseliä. Piirretään viivoja alueidemme rajoja pitkin ja määritetään karkeasti koordinaatit. Nyt olemme valmiita lisäämään nämä parametrit tunnisteihimme .

Nyt alueistamme on tullut linkkejä (jos liikutat hiiren osoitinta, siitä tulee kämmen). Tällä sivustolla ei ole jääkaapeille omistettuja sivuja, joten linkit vievät sinut samalle sivulle, mutta jos luot haluamasi sivut, aluetta klikkaamalla pääset sivulle.

Tämä päättää oppituntimme. Olet tutustunut kaikkiin HTML-kielen ominaisuuksiin. Vahvistaaksesi taitojasi katso kaksi oppituntia Verkkosivuston tekeminen – taulukkoasettelu.

Lopuksi minun on sanottava, että HTML-tunnisteissa on vielä kaksi upeaa elementtiä

Tag

Säiliön sisällä

• yksi tai useampi elementti< >. Näillä elementeillä ei ole sisältöä, mutta ne määrittelevät kuvakartan geometriset alueet ja kuhunkin alueeseen liittyvät hyperlinkit
• lohkotason sisältöä. Tämän sisällön tulee sisältää< >, jotka määrittelevät kartan geometriset alueet ja kuhunkin alueeseen liittyvät linkit

Jos tag

Jos alueet menevät päällekkäin, asiakirjassa aiemmin näkyvän alueen määrittelevä elementti on etusijalla.

HTML: 3.2 | 4 / XHTML: 1.0 | 1.1

Syntaksi

Attribuutit

luokkaa	määrittää käytettävän luokan nimen
ohj	määrittää merkkien suunnan: ltr - vasemmalta oikealle rtl - oikealta vasemmalle
id	yksilöllinen tunniste
lang	määrittää näytettävän asiakirjan kielen
nimi	kuvakortin nimi. Käytetään tunnisteen usemap-parametrin arvona
onblur	elementti menettää tarkennuksen
onclick	napsauta elementtiä
ondblclick	kaksoisnapsauta elementtiä
keskittyä	elementti keskittyy
onkeydown	painamalla näppäintä, kun elementti on tarkennettu
näppäinpainalluksella	näppäimen painaminen ja vapauttaminen, kun elementti on tarkennettu
onkeyup	aiemmin painetun näppäimen vapauttaminen, kun elementti on tarkennettu
hiiri alas	napsauttamalla hiiren painiketta, kun elementti on kohdistettu
onmousemovessa	hiiren osoittimen liike, kun elementissä on kohdistus
on hiiri ulos	hiiren osoittimen siirtäminen pois elementistä
hiiren päällä	asettamalla hiiren osoittimen elementin päälle
hiirellä	aiemmin painetun hiiren painikkeen vapauttaminen, kun elementti on kohdistettu
tyyli	määrittää rivin sisäisen tyylisivun
otsikko	työkaluvihje

Esimerkki

• sulkeva tagi vaaditaan ()
• id-attribuutti vaaditaan
• On suositeltavaa tarjota näytönohjainkortille tekstivaihtoehto tapauksiin, joissa grafiikkaa ei ole saatavilla tai käyttäjä ei voi saada niitä
• Kuvakartan käyttämistä päänavigointina ei suositella, koska vanhojen ja puheselaimien tuki on heikko

Tag — lohkotason elementti, ts. tunnisteen sisältö alkaa aina uudelta riviltä. Tagin perään lisätään myös rivinvaihto.

Hei. Äskettäin minulla oli mahdollisuus käsitellä niin erityistä html-ominaisuutta kuin kuvakartta. Rehellisesti sanottuna minulla ei ole ollut mahdollisuutta käyttää sitä usein, ja sitten yleensä kaikki tehtiin suorakaiteen muotoisilla vyöhykkeillä. Mutta tämä ei ollut sama tapaus. Tehtävänä oli lähettää linkit yksittäisiin kuvan alueisiin, joka oli maan kartta, ja valitettavasti kankaista tai svg: stä ei ollut kysymys. Vain html vain hardcore! Joten tehtävä on asetettu, Google on aktivoitu ja voimme aloittaa.

Teoria

• koordinaatit- valintaalueen koordinaatit
• href- linkki, johon siirryt, kun napsautat vyöhykettä
• nohref- osoittaa, että vyöhykkeellä ei ole linkkiä
• muoto- valintalomake
  • ympyrä- valinta-alue ympyrän muodossa
  • oletuksena- valitsee koko kuva-alueen
  • poly- valinta-alue monikulmion muodossa
  • rect- valinta-alue suorakulmion muodossa
• tavoite- määrittää, missä linkki avautuu

Koska valinta-alueeni piti olla monikulmio, määritämme muoto-attribuutin, aluetunnisteen arvon monikulmioalueeksi. Tässä tilassa pisteen koordinaatit suhteessa vasempaan yläkulmaan näytetään pilkuilla erotettuina - x,y. Pisteet erotetaan myös pilkuilla, mikä aiheuttaa aluksi hämmennystä koodia luettaessa.

Kirjoitamme Paint

Ensin valmistellaan asettelu:

Teksti ( marginaali: 0; täyte: 20px; kirjasinperhe: Arial, Helvetica, sans-serif; ) img ( reunus: ei mitään; ääriviivat: ei mitään; näyttö: esto; -moz-user-select: ei mitään; -webkit-user -select: ei mitään; käyttäjän valinta: ei mitään ) .canvas.draw ( reunuksen väri: #3C0; ) .canvas .inner ( sijainti: suhteellinen; ) .canvas .point ( leveys: 1px; korkeus: 1px; taustaväri: #fff; reunus: 1px kiinteä #000 ; ylivuoto: piilotettu; 8px: sanan rivitys;
Javascriptissä kaikki on melko yksinkertaista. Kirjoitusprosessin aikana käytin omaa taistelukirjastoani, joten älkää ihmetelkö epätyypillisiä toimintoja. Ensin liitetään hiiritapahtuma #canvasille, jossa on piste renderöidään ja sen koordinaatit tallennetaan.

Muutt lisäpiste = funktio(e)( var e = _.getEvent(e), offset = _.getOffset(solmut["canvas"]), x = e.clientX + _.getDocScrollLeft() - offset, y = e. clientY + _.getDocScrollTop() - offset, solmu = solmut["canvas"].appendChild(_.node("div", ("luokka":"piste"))); +"px"; node.style.left = x-1+"px"; ;
Sitten kirjoitamme funktion, joka luo karttamme html-koodin.

Var renderInfo = function())( var text; _.clearNode(nodes["info"]); solmut["info"].appendChild(_.node("span", " ")); };
) text += "">"; solmut["info"].appendChild(_.node("span", teksti)); solmut["info"].appendChild(_.node("br")); ) ) nodes["info"].appendChild(_.node("span", "

Rajataan kaikki luokassa, muutama aputoiminto, siinä kaikki. Toivottavasti tästä työkalusta on jollekin hyötyä.

"Tein mallin linkkien sijoittamiseen eri verkkosivuille ("") sen tietyille alueille

Jos nyt klikkaa muotoja, joissa on kirjoituksia, vastaavat sivut avautuvat: profiili, päiväkirja tai kaikki "Photoshop Lessons" -osiossa olevat viestit (huomio! Kun blogi on siirretty WordPressiin ja muokattu uudelleen, linkit eivät toimi! mutta oppitunti on edelleen ajankohtainen!)

Jotta kuva toimisi, kirjoitin suunnilleen seuraavan HTML-koodin:

Tämä koodi voidaan lisätä viestikenttään ("Lähde"-painiketta painettuna) tai epigrafiin...Muuten, aiheesta on muitakin viestejä: "Mikä on HTML", "kuvien HTML-koodi", "

Kuvalinkki” ja niin edelleen.

1. Koordinaatit

Yllä olevan koodin muodostamista varten muistin pienen geometrian :)
Koordinaattijärjestelmä: X-akseli - ylhäältä alas, Y-akseli - vasemmalta oikealle
Voit asettaa kuvion koordinaatit määrittämällä:
- neliö (tai suorakulmio), jonka sivut ovat yhdensuuntaiset akselien kanssa - kahden vastakkaisen kulman koordinaatit - X1, Y1 ja X2, Y2
- monikulmio - KAIKKIEN kulmien koordinaatit

— ympyrä — keskipisteen koordinaatit ja säde. Minun tapauksessani käy ilmi, että tarvitsen koordinaatit— "Profiili"-linkille (suorakulmio), pisteet D, E, F, G, H - "Päiväkirja"-linkille (polygon), Q ja pituus R - "Photoshop Lessons" -linkille (ympyrä). Kaikki nämä numerot yllä olevassa HTML-koodissa on korostettu punaisella.

Kuvakarttojen avulla voit linkittää linkkejä saman kuvan eri osiin. Toteutettu kahdessa erilaisia ​​vaihtoehtoja - palvelin ja asiakas. Palvelinvaihtoehtoa käytettäessä selain lähettää palvelimelle pyynnön saada valitun linkin osoite ja odottaa vastausta vaadituilla tiedoilla. Tämä lähestymistapa vaatii lisäaikaa tuloksen odottamiseen ja erilliset tiedostot jokaiselle kuvakortille.

1. Et voi asettaa työkaluvihjettä ja vaihtoehtoista tekstiä yksittäisille alueille. Vaihtoehtoisen tekstin avulla voit saada tekstitietoa piirroksesta, kun kuvan lataus on poistettu käytöstä selaimessa. Koska kuvat ladataan sen jälkeen, kun selain on saanut niistä tiedon, kuvan korvaava teksti tulee näkyviin aikaisemmin. Ja kun se latautuu, teksti korvataan kuvalla.

Kuvakartoissa tämä ominaisuus on tärkeä, koska jos poistat kuvien katselun käytöstä, kuten monet käyttäjät tekevät, näet vain yhden tyhjän suorakulmion.

2. Kun linkkialueen muoto on monimutkainen, HTML-koodin määrä kasvaa. Ääriviiva on likimääräinen sarjalla suoria segmenttejä tällaisen janan jokaiselle pisteelle, on määritettävä kaksi koordinaattia, ja tällaisten pisteiden kokonaismäärä voi olla melko suuri. Rehellisesti sanottuna on huomattava, että monimutkaiset muodot ovat erikoistapaus ja niitä käytetään melko harvoin.

3. Kuvakorteilla ei voi luoda erilaisia ​​tehosteita, jotka ovat käytettävissä, kun yksi kuva leikataan fragmenteiksi: rullaava tehoste, osittainen animaatio, kuvien yksilöllinen optimointi niiden nopeaa latausta varten.

Käytettävyys Käyttömukavuuden kannalta kuvakartoilla on vain yksi etu - erimuotoiset linkit. Tämä lisää selkeyttä tiedon esittämiseen - emme rajoitu linkin suorakaiteen muotoiseen muotoon, vaan voimme käyttää monimutkaisen konfiguraation linkkejä omiin tarkoituksiin. Muilta osin niistä ei ole hyötyä - tavalliset tekstilinkit ovat informatiivisempia, eivätkä ne pelkää sulkea kuvien näyttämistä selaimessa. Se, että yksi kuva latautuu nopeammin kuin sama kuva, mutta leikataan palasiksi ja tallennetaan sarjana, helppo päästä. Jokaista näistä lopullisista tiedostoista voidaan pienentää käyttämällä yksittäisiä optimointiasetuksia. Tämän seurauksena kaikkien fragmenttien kokonaistilavuus vie vähemmän tilaa kuin yksi kuva. Psykologista tekijää ei pidä väheksyä - ihmisestä näyttää siltä, ​​​​että joukko pieniä kuvia latautuu nopeammin kuin yksi suuri.

Karttojen suurin haittapuoli on, että linkeillä ei ole selkeästi määriteltyjä rajoja. Siksi nämä rajat on korostettava eri keinoin jo kuvassa. Jos kuva ei jostain syystä lataudu, linkkijoukon ymmärtäminen on erittäin ongelmallista.

Vaihtoehtoiset vaihtoehdot

Aina ei ole kiireellistä tarvetta käyttää kuvakarttoja, joten huomioi, että muitakin on olemassa mahdollisia vaihtoehtoja suorittamalla annettu tehtävä.

Flashin käyttäminen

Voit luoda Flash-videoihin erilaisia ​​linkkialueita ominaisuuksien avulla vektorigrafiikkaa. Sen laajojen ominaisuuksien ansiosta voit luoda upeita valikoita ja navigointia Flashissa. Mutta myös tässä vaaditaan varovaisuutta, jotta et menetä metsää puille.

Kuvan leikkaus

Tämä on yksi suosituimmista tavoista suunnittelussa. Tässä tapauksessa yksi kuva leikataan käyttämällä erityisiä ohjelmia palasiksi, jotka lopulta kootaan yhteen, luoden illuusion kokonaisesta kuvasta. Vaikka leikkausalueet voivat olla vain suorakaiteen muotoisia, useimmissa tapauksissa tämä riittää linkkien luomiseen.

Jokaiselle fragmentille voit valita sopivimman graafisen muodon, jossa se tallennetaan, optimointiparametrit ja lisätä vaihtoehtoista tekstiä. Silloin alueiden rajat ja kuvan korvaava teksti näkyvät selvästi, vaikka kuvien näyttö ei ole käytössä.

Jatkaa