HTML vaizdo žemėlapiai

Html Vaizdo Zemelapiai



Dažnai galbūt lankėtės svetainėse, kuriose galite rasti tokią nuorodą: „ Norėdami sužinoti daugiau, apsilankykite nuorodoje “. Todėl, jei spustelėsite tai, būsite nukreipti į kitą svetainę. Lygiai taip pat HTML vaizdų susiejimo funkcija leidžia prie vaizdų pridėti spustelėjamas nuorodas. Puslapis nukreips mus į kitą šaltinį, kai spustelėsite nurodytą sritį.

Šis įrašas išmokys jus:

Kas yra HTML vaizdo žemėlapiai?

Vaizdo žemėlapis yra paveikslėlis su sritimis, kurias galima spustelėti. Norėdami sukurti vaizdo žemėlapį HTML, „ <žemėlapis> “ naudojamas elementas. Be to, vienas ar keli ' “ žymos yra įtrauktos į elementą „“, kad būtų nurodytos sritys.





Sintaksė



Sintaksė, skirta HTML dokumente nurodyti vaizdo žemėlapius, paminėta toliau:



< img src = 'images/img1.jpg' viskas = 'nešiojamas kompiuteris' naudojimo žemėlapį = '#clickspace' >

< žemėlapis vardas = 'clickspace' >

< plotas figūra = 'teisinga' koordinates = '224,37,422,312' href = 'nešiojamas kompiuteris.html' >

< / žemėlapis >

„ “ elementas yra apibrėžtas šiais atributais:



  • “ src “ nurodo vaizdo kelią.
  • “ viskas “ rodo alternatyvų tekstą, kai negalima įkelti vaizdo.
  • “ naudojimo žemėlapį “ yra nurodyta, kad vaizdo sritis būtų galima spustelėti. Norint sukurti nuorodą, jos reikšmė turi būti tokia pati kaip elemento „“ klasė arba ID.

„ <žemėlapis> “ elementas pridedamas su šiais atributais:

  • “ figūra “ nurodo HTML srities dydį “ <žemėlapis> “ elementas.
  • “ koordinates “ atributas apibrėžia spustelėjamos srities koordinates.
  • “ href “ atributas nustato šaltinio URL.

Kaip sukurti vaizdo žemėlapius HTML dokumente?

Norėdami sukurti vaizdo žemėlapį HTML dokumente, peržiūrėkite pateiktas instrukcijas:



  • HTML pridėkite „
    “ elementą ir priskirkite klasę “ vaizdas-žemėlapis “.
  • Šiame skyrelyje pridėkite „ “ elementą, kad pridėtumėte vaizdą, susietą su aukščiau aptartais atributais.
  • Tada pridėkite HTML ' <žemėlapis> “ elementą ir priskirkite jam „ clickspace ' vardas.
  • Atkreipkite dėmesį, kad „ naudojimo žemėlapį 'atributui priskirtas pavadinimas' #clickspace “, rodantis į „ vardas “ žymos „<žemėlapis>“ atributas.
  • Jo viduje pridėkite „ “ žymą su aukščiau nurodytais atributais:
< div klasė = 'vaizdas-žemėlapis' >

< img src = 'images/img1.jpg' viskas = 'nešiojamas kompiuteris' naudojimo žemėlapį = '#clickspace' >

< žemėlapis vardas = 'clickspace' >

< plotas figūra = 'teisinga' koordinates = '224,37,422,312' href = 'nešiojamas kompiuteris.html' >

< / žemėlapis >

< / div >

Norėdami pakoreguoti vaizdo dydį, pereikime prie CSS skyriaus.

Stilius „
“ CSS

Pasinaudokite ' .vaizdas-žemėlapis “ klasė, kad pasiektumėte „

“ elementą ir pritaikykite šias CSS ypatybes:

.vaizdas-žemėlapis {

plotis : 700 taškų;

marža: automobilis;

}

Štai minėtų CSS ypatybių aprašymas:

  • „ plotis “ ypatybė nustato div elemento plotį.
  • „ marža “ savybė suteikia daugiau vietos aplink elementą.

Stiliaus „img“ elementas

.image-map img {

plotis : 100 %;

}

Žr. ploto koordinates, nurodytas „ koordinates “ atributus dabar galima spustelėti:

Kitame skyriuje sužinosime, kaip susieti vaizdo žemėlapį su kitu šaltiniu.

Kaip sukurti vaizdo žemėlapį, susietą su kitu puslapiu?

Sukurkite kitą HTML puslapį su plėtiniu ' .html “, atlikdami toliau nurodytus veiksmus:

  • Mūsų atveju mes suteikiame jam pavadinimą ' nešiojamas kompiuteris.html “.
  • Pridėkite div elementą ir priskirkite jam klasę ' nešiojamas kompiuteris-img “.
  • Tada įdėkite vaizdą naudodami „ “ elementą ir susiekite „ src “ ir „ plotis “ atributai.
  • Tada nurodykite pastraipą naudodami „

    “ elementas:

< div klasė = 'nešiojamas kompiuteris-img' >

< img src = '/images/laptop.jpg' plotis = '400 piks.' >

< p >Nešiojamasis kompiuteris yra nešiojamas kompiuteris, kurį galima perkelti ir naudoti įvairiais nustatymais.< / p >

< / div >

CSS nurodykite šias CSS ypatybes prie „ nešiojamas kompiuteris-img ' klasė:

.nešiojamas kompiuteris-img {

plotis : 500 taškų;

marža: automobilis;

}

Išvestis

Dabar mes susiesime „ nešiojamas kompiuteris.html “ puslapyje į vaizdą “ “ pirmojo puslapio elementas. Norėdami tai padaryti, nurodykite puslapio URL į „ href “ elemento „ “ atributas, kaip parodyta toliau:

< plotas figūra = 'teisinga' koordinates = '310,57,590,470' href = 'nešiojamas kompiuteris.html' >

Išvestis

Sėkmingai sužinojome, kas yra vaizdų žemėlapiai ir kaip jie susieti su kitais šaltiniais.

Išvada

HTML“ <žemėlapis> “ elementas naudojamas kuriant vaizdo žemėlapį arba vaizdą su spustelėjamomis sritimis. Norėdami apibrėžti vaizdo sritis, kurias galima spustelėti, vieną ar daugiau „ “ žymos yra įtrauktos į elementą „“. Be to, su „ “ žyma susieti atributai yra „ figūra “, „ koordinates “ ir „ href “. Šis įrašas iliustruoja, kaip sukurti HTML vaizdų žemėlapius su pavyzdžiu.

Kita

Kategorija

Populiarios Temos

Kaip išspręsti „Klaidą: klausykite EADDRINUSE: adresas jau naudojamas“?

Kuo Elasticsearch skiriasi atitikmuo ir Būlio reikšmė?

Susiekite „Asana“ su „Salesforce“.

Kaip įdiegti duomenų srautinį perdavimą realiuoju laiku „Python“.

Kas yra Docker run -it Flag?

Kaip skaityti ir rašyti JSON failus C++

Kas yra neapibrėžta Vs neapibrėžta JavaScript

LWC – QuerySelector()

Kaip įdiegti „Visual Studio IDE“ sistemoje „Windows 10/11“.

Kaip patvirtinti „Discord“ paskyrą be telefono

Kaip naudoti Lisp Emacs

Paketinio failo pavyzdys: kaip automatizuoti SFTP perkėlimus naudojant paketinius failus

Kas yra „Bighead“ ir „Bighead“ serijos „Roblox“.

Kas yra „Roblox“ tėvų PIN kodas?

Kaip gauti naujausius vaizdo įrašų ir ekrano bendrinimo atnaujinimus sistemoje „Discord“.

Patikrinkite, ar kūnas turi specifinę klasę naudodami „JavaScript“.

Kaip įdiegti „Linux“ branduolio antraštes „Debian 12“.

Kas yra Objects.equals() Java

Kuo skiriasi int ir double C#

Kas yra linspace Naudojama MATLAB