Tasvir xaritalari nima kerak. HTML-dagi xaritasi

Rasm xaritasi (Image xaritasi) Sizga rasm bo'laklariga havolalarni bog'lashga imkon beradi. Rasmning alohida qismlarini bosish orqali foydalanuvchi turli veb-sahifalardagi ushbu havolani keltirib chiqarishi mumkin.

Rasm xaritasi juft yorliq bilan belgilanadi … . HTML hujjatida bir nechta rasm kartalari bo'lishi mumkin, shuning uchun har bir xaritani atribut bilan belgilanadigan noyob nom tayinlash kerak. ism..

Tasvir xaritasi rasm va tegishli havolalar bo'limlaridan iborat. Rasm maydonini tavsiflaydi va uni bitta yorliq havolasiga qo'yadi .

Yorliq atributlari

Odatiy koordinatalar pikselda o'lchanadi.

Koordinataning kelib chiqishi ekranning yuqori chap burchagi, i.e.

Image Card hududlarining turli shakllariga misollar

Agar tasvirlangan ikki soha bir-biriga juda katta bo'lsa, unda ulardan birinchisiga tegishli ma'lumot ishlatiladi. Ushbu xususiyatdan foydalanuvchi kartaning eng so'nggi xaritasini, to'rtburchaklar kengligi va barcha rasm sifatida kartaning so'nggi xaritasini belgilaydigan vaziyatda ishlatilishi mumkin.

Tasvirni xaritada ishlatish uchun Qo'shimcha atributni kiritishingiz kerak. uSEMAPRasm xaritasining ismini aniqlash. Bu nom "#" belgisi.

Rasm xaritasidan foydalanishning misoli

Ushbu rasmning turli sohalariga bosilganda, tegishli matnning rangi o'zgarmoqda.

"Men har xil veb-sahifalar (" ") ga havolalarni joylashtirish uchun ish joyini yasadim (" ")

Endi, agar siz yozuvlar bilan raqamlarni bossangiz, tegishli sahifalar ochiladi: Profil, Die yoki "Blorni WordPress" bo'limiga va uning o'zgartishlariga uzatilgandan so'ng, havolalar ishlamaydi! Ammo dars muhimligicha qolmoqda!)

Rasm ishlash uchun men bunday HTML-kod haqida yozdim:

Ushbu kodni xabar maydoniga kiritish mumkin («Manba» tugmasi bosilganda) yoki epigrafga ...

Aytgancha, mavzu bo'yicha boshqa xabarlar mavjud: "Html nima ","HTML kodeksi ","Havolasi "va boshqalar.

1. Koordinatalar

Belgilangan kodni tuzish uchun men bir oz geometriyani esladim :)

Koordinata tizimi: x o'q - yuqoridan pastga, y o'qi - chapdan o'ngga
Shaklning koordinatalarini belgilash uchun siz o'rnatishingiz kerak:
- uning tomonlari o'qlarga parallel bo'lgan kvadrat (yoki to'rtburchaklar) - x1, y1 va x2, y2-ning koordinatalari
- Poliqon - Barcha burchaklar koordinatalari
- aylana koordinatalari va radiusi.

Mening ishimda aylanadi, A, ballar koordinatalari "profil" (to'rtburchaklar), "kundalik" (ko'pgon), q va uzunlikdagi havola uchun R - "Photoshop darslari" (doiralar). HTML-koddagi barcha raqamlar qizil rangda ajratilgan. Bundan tashqari, siz rasmning o'lchamini pikselda (yashil) bilishingiz kerak

Maxsus aniqlikka ehtiyoj yo'q, shuning uchun koordinatalarni Photoshop-da "Line" yordamida aniqlash mumkin - uni qo'ng'iroq qilishga chaqirish Ctrl + R.

Men koordinatalarni hisoblash uchun boshqa birov uchun ko'proq qiziqdim. Ushbu ishga tushirish uchun Ms bo'yoq. (Boshlang'ich - Barcha dasturlar - Standard - bo'yoq) va unga rasm oching. Agar siz kursorni pastki paneldagi kerakli nuqtalarga ulaganingizda, ularning koordinatalari diqqat bilan yozib olishadi

2. HTML kod

Navigatsiya kartalari teg bilan o'rnatiladi

Teg xaritasi teglarni o'z ichiga oladi chizma va bog'langan ma'lumotlarning geometrik yo'nalishlarini aniqlaydi.

Men buni tushundim - navigatsiya kartasini yaratish uchun:

— rasm tavsifi bo'lgan teglar

— karta teglari

— teglar Teglar

Mening ishimda qadriyatlar quyidagicha bo'lingan:

kenglik \u003d. "640" Balandlik \u003d. "367" - Rasmning o'lchamlari
src \u003d "https: //ssilt/f02c73cd94.jpg" - saytdagi rasm manzili
uSEMAP \u003d "# rasm " - Shartli tasvir kartasi nomi (ehtimol har qanday)
xap nomi \u003d. "Rasm" - Xarita nomi (to'la yuqoridagilarga mos keladi)

Link yo'nalishlari uchun qiymatlar - HRE - HARE - Shaklning maqsadi - Muvofiqlik va koordlar - koordinatalar - rasmdagi uchta sohaga mos keladi.

"Profil" to'rtburchaklar

hREF \u003d "HTTPS: // Sayt / Profil /" - Profil sahifa manzili
shape \u003d "to'g'ri" - "to'rtburchak" shaklining belgisi
coords \u003d "235,61,472,117" - A (235,61) va C koordinatalari (235.61) va C (472,117)

Ko'pburchak "kundalik"

hREF \u003d "HTTPS: // Sayt / Blog" - Diala sahifasi manzili
shape \u003d "Pyam" - "Polgon" shaklining belgisi
coords \u003d "235,118 35,47,45,47,14,146" - Poytinlar koordinatalari: (235,118), g (474.152), g (457.152) va H (229,146)

"Photoshop darslari" doiralari

hREF \u003d "https: //showJournal.php? Jurniy \u003d 2447247" - "Photoshop darslari" bo'limidagi xabarlar postlarining manzili
shape \u003d "doira" - "doira" ni belgilash
coords \u003d "551,198,65" - aylanuvchi koordinatalar: markaz - Q (551,198) va radius - r \u003d 65

3. tugatish

Navigatsiya xaritasi uchun HTML kodining "tizimi" dagi barcha olingan qiymatlarni to'ldirdi va quyidagilarni qabul qildi:

Aynan shu kod "burilish" rasmga havolali joylar bilan foydalanish.

O'qish uchun "engil" mavjud "Engil" oson va aloqalarni yaratishning oson versiyasi mavjud - Post "O'quv: Rasmdagi havolalar"

Agar siz xato topsangiz, iltimos, matnli bo'lakni tanlang va cherting Ctrl + Enter..

Ushbu maqolada biz ma'lum bir sohani bosganingizda, biz ma'lum bir sohani bosganingizda, biz ma'lum bir turdagi havolani bosishingiz mumkin. Xaritalar xaritalarida kamdan-kam hollarda saytlarda topish mumkin, chunki bu jarayon juda ko'p vaqt talab qilinishi mumkin, ammo agar siz o'z tashrif buyuruvchilarni g'ayrioddiy shaklda ajablantirsangiz va siz o'zingizning ta'lim uchun bo'sh vaqtingiz bor, keyin ushbu maqola siz uchun.

Yorliq Tasvir kartasini aniqlash uchun ishlatiladi. Tasvir kartasi - bu aniqlangan faol hudud bilan tasvir. Element Rasm-kartadagi interfaol maydonlarni aniqlaydigan bir qator teglar mavjud, i.e. Rasmning ma'lum bir sohasini bosganingizda, masalan, alohida sahifa tasvirning ushbu qismini tavsiflash bilan alohida sahifa ochiladi.

Atribut nomi elementlari majburiydir, u USEMAP elementining atributi bilan bog'liq (Rasm va karta o'rtasidagi bog'liqlikni keltirib chiqaradi).

Atributlar teg Biz hududning koordinatalarini (Coorcors atributlari) va sizga kerak bo'lgan raqamlar turini (shakldagi atribut) ko'rsatamiz:

Foydalanish namunasi

Keling, bitta rasmda ma'lum bir rasmni bosganda, ushbu raqamlarni tavsiflovchi turli veb-sahifalar (Vikipediyaga havolada) turli xil veb-sahifalarga o'tish bor.

</span>Misol tegdan foydalanib <map>

Shaklni tanlang:

"4 raqam tanlash uchun mavjud" > "Qizil maydoni"> coords \u003d "200 55,50" hREF \u003d "Green.html" Alt \u003d "(! Lang: Yashil doira." > !} "Moviy uchburchak"> "450,25,435,60,400,75,435,90,450,125,465,90,500,75,465,60" HREF \u003d "Sariq.html" Alt \u003d "(! Lang: sariq yulduz" > !}

Xo'sh, biz bu misolda qilgan ishimiz uchun:

Rasmni joylashtirgan (yorliq) ) Keyinchalik ushbu rasm kartasini tuzishda foydalanamiz. USMAP atributida siz elementda foydalanadigan rasm kartasining nomini ko'rsatishingiz kerak (Ismdan oldin panjarani ko'rsatish kerak).

Rasm xaritasini joylashtiring (yorliq) ), ism elementi (ism) ning yagona va majburiy atributini o'rnating. E'tibor bering, yorliqdan farqli o'laroq Biz boshpanasiz nomdan so'raymiz, aks holda boshqalarga mos kelishi kerak.

Biz to'rtta tegni joylashtiramiz
Bu xaritada interfaol maydonlarni aniqlaydi:
- Avval Biz so'raymiz to'rtburchaklar mintaqa. ("To'g'ri" qiymat "qiymati bilan shakllantirilgan atribut, biz bizning avval Rasm ( birinchi ikkitasi qiymatlar yuqori chap burchakka mos keladi, quyidagilar ikki Qiymatlar yuqori va pastki burchakni aniqlaydi).
- Ikkinchi Ko'rsatmoq yumaloq maydoni ("Doira" qiymati bilan shakllantiruvchi atribut, u bizning ikkinchi Rasm ( avval Qiymati o'qning koordinatlariga mos keladi x.va ikkinchi o'q bilan y.uchinchisini aniqlaydi radius).
- Bor araqin va to'rtinchi raqamKeyin ular printsipial jihatdan tuzilgan poligonal hudud ("Poli" bilan shakldagi atribut. Siz rasmdagi kerakli nuqtalarni aniqlaysiz, ushbu nuqtalar koordinatalarini (grafik muharrir) hisoblang va brauzer ularni bitta qatorga ulashi uchun belgilang. Uchburchak misolida (uchinchi chizma): avval Nuqta (koordinata) x. va y. vertikallar) ikkinchi Nuqta (koordinata) x. va y. chap pastki burchakda) va qotib qolmoq Nuqta (koordinata) x. va y. pastki burchakka).

Agar sizning e'tiboringiz 26-sonli amaliy vazifaga ega bo'lsa, men sizning e'tiboringizni qarayman.

Nuans: Amaliy vazifa tozaligi uchun men yulduzning yuqori qismidan foydalanish va soat yo'nalishi bo'yicha harakatlanishini taklif qilaman. HREF atributining qiymati sifatida men ko'rsatdim # Bunday holda, u vilka sifatida ishlaydi (siz o'sha sahifada turasiz), siz har qanday sahifaga o'tishingiz mumkin.

tez: Rasm koordinatlarini olish uchun, masalan, rasm muharriridan foydalaning, masalan, masalan, Bo'yamoq.Kursorning koordinatalarini ko'rsatadi. Koordinatalarni varaqda yoki alohida faylda yozing va sahifada qiymatlarni qiling.

Agar siz vazifani bajarishda qiyinchiliklarga duch kelsangiz, unda alohida oynada misolni ochib, sahifada kodni tekshiring va diqqat bilan o'qing.

Hammaga salom. Siz bilan Bernterskiy Andrey.

Ushbu darsda men sizga qanday yaratishni aytaman hTML-dagi xaritalar.

Xarita rasm - Bu rasm, ehtimol bir nechta faol zonalarga ega bo'lgan fotosurat.

Masalan, sichqonchani faol zonada bosganingizda, ma'lum bir URL manziliga o'ting. Agar siz VKontakte.ru-da o'tirsangiz, xaritaning tasviri bor - bu fotosuratda yoritilgan joyda, uning nomi va familiyasi ko'rsatilganida, uning nomi va familiyasi ko'rsatilgan Sichqonchani bosing, bu odamning sahifasiga o'ting.

Birinchidan, men sizga ushbu darsning video-versiyasini taklif qilaman:

Hammasi etarlicha to'g'ri. Do'stlar bilan har qanday fotosuratni olamiz. Buni alohida blokingizga kiritish yaxshiroqdir.

Xhtml

Men rasmimni misol qilib oldim.

Uchun div sozlamoq id Ba'zi bir yozuvlarni tayinlash uchun yoki hali kerak bo'ladi, nima kerak bo'ladi. Men misolda hech narsa so'ramayman.

Yorliqning asosiy parametridir img Bunday holda, bu uSEMAP \u003d "# IMG-NE". U qanday nomni biz ko'rsatadigan xatni ko'rsatadi.

Xhtml

Biz buyurtma qilamiz.

- Ism parametrining qiymati USMAP parametrining qiymatiga mos kelishi kerak, faqat xarita yorlig'ida u belgilar bilan yozilgan.

Parametr shakl Yorliq - Bizning hududimizning qaysi turini namoyish etadi. Bizning mintaqamiz nima bo'lishini, parametrning qiymatini ko'rsatadi shakl:

to'g'ri - maydon to'rtburchaklar shaklida bo'lishini bildiradi.

polical - o'zboshimchalik bilan.

aylana - hudud doira shaklida bo'ladi.

Parametr cobigerlar. Bizning mintaqamiz koordinatalarini o'z ichiga oladi.

Agar a shape \u003d "to'g'ri"Bu chap yuqori burchakning koordinatalari va o'ng pastki qismini anglatadi. Ya'ni, birinchi juft raqamlar yuqori chap va ikkinchi juft raqamlar pastki o'ng burchakka.

Agar a shape \u003d "poli"Ko'pburchakning har birining koordinatalari ko'rsatilgan. shape \u003d "poli" koords \u003d "80,100,150,400,400,400,400,30010" Bunday holda, birinchi versiyalarning koordinatalari 80,100, ikkinchi 150,100, uchinchi - 210,40, to'rtinchi - 300,40, beshinchi - 300,110.

Agar a shape \u003d "doira"Men markaz va radiusning koordinatalarini ko'rsataman. shape \u003d "doira" Coorcs \u003d "300,300,100" markazning koordinatalari 300,300 va 100 radiusi.

sarlavha \u003d "(! Lang: Andrey" alt="Shodun" !} Allaqachon tanish parametrlar. Men ulardan to'xtamayman.

To'liq kod quyida keltirilgan:

Xhtml

Salom, do'stlar. Ushbu videoda biz HTML-dagi rasmlar xaritalari haqida suhbatni davom ettiramiz. Birinchidan, o'tgan videoda gaplashayotganimizni eslaylik. Gap shundaki, bu videolar bir-birlari bilan juda yaqin va oldingi videoni rasm bo'limidan olishimiz kerakligini tushunish.

Oxirgi video darsida biz hozirgina boshladik hTML-da tasvir xaritalari bilan tanishish. Biz uning skriptlarni qo'llash bilan qanday ko'rinishi kerakligini ko'rib chiqdik. Koordinatalar haqida ozgina gapirdi. Shunday qilib, ularni qanday qilib aniqlaymiz. Esingizda bo'lsa, men bir yo'l bilan tanladim, bu ismaap atributlaridan foydalanish usulidir, chunki menimcha, koordinatalarni aniqlashning bu usuli eng oddiy va unchalik qiyin, bu biz uchun mos ekanligini anglatadi .

Natijada, o'tgan videoda biz havolani amalga oshirdik. Va keyin rasmdan Faol sohalar koordinatalarini aniqlashda bizga yordam beradigan rasm kartasi tasviri yaratildi.

Endi HTML-da rasm xaritasini to'g'ridan-to'g'ri yaratishni davom ettirish vaqti keldi. Ushbu videoda biz nazariyadan boshlab, amaliyotga qarab harakatlanamiz.

Keling, yana ikkita HTML teglarini o'rganishni boshlaylik, bu teglar va . Ushbu teglar HTML hujjatida tasvir kartasini yaratish uchun yaratilgan.

HTML yorlig'i xaritasi.

Yorliq Faol hududlar ko'rsatilishi mumkin bo'lgan ma'lum idishni yaratadi. Yorliq qo'shishda HTML hujjatida biz sahifada hech qanday o'zgarishlarni ko'rmaymiz, chunki ushbu teg hech qanday ma'lumot qo'shmaydi. Bu shunchaki rasm kartasining boshlanishini va uning tugashini anglatadi.

Ushbu tegda majburiy nom atributi mavjud. Bizda bizning rasmimiz nomini ko'rsatishimiz kerak. Bundan tashqari, ushbu yorliq blok elementi emas, bu uni blok elempektsiyasida, masalan, paragraf yorlig'ini yoki universal Div yorlig'ini ro'yxatdan o'tkazish kerakligini anglatadi.

HTML yorliq maydoni.

Yorliq konteyner ichidagi faol joylarning ko'rsatilishi uchun javobgar . Bu ushbu HTML yorlig'i, biz ushbu rasmni belgilaydigan faol maydonni belgilaydi, bu maqsadli atributni, majburiy atributni yorliqni yorliq uchun ishlatishni ko'rsatadi Biz tasvir xaritasi hududlarining koordinatalari koordinatalarini belgilashimiz mumkin.

Bu erda men video darsda aytmoqchi bo'lgan narsalarimni aytib bermoqchimanki, HTML hujjatida giperhavolalarni ko'rsatish uchun bu tegni teg bilan almashtirish kerak. Ya'ni teg . Agar eslasangiz, teg Asosiy raqam va uning koordinatalarini ko'rsatish uchun aynan bir xil shakli va muvofiqlashtiruvchilar atributlari mavjud.

Kvadrat, to'rtburchaklar, aylana va ko'pburchakning koordinatalarini aniqlash.

Shuningdek, ushbu video darsida biz ma'lum bir shaxsning koordinatalarini to'g'ri belgilash kerakligini batafsil tahlil qilamiz. Muayyan raqam uchun qancha koordinatalar bo'lishi kerak. Buning sababi, har bir asosiy shakl uchun koordinatalar va ularni kvitansiya qilish tartibi mavjudligi sababli.

Birinchidan, biz maydonning koordinatalarini qanday aniqlash, keyin doira uchun va nihoyat ko'pburchak uchun qanday qilib batafsil ko'rib chiqamiz.

Shundan so'ng, bizda yashash misolida biz kvadrat va to'rtburchakning koordinatalari aniqlaymiz. Keyin biz aylananing koordinatalarini aniqlaymiz. Va nihoyat, biz uchburchakning o'rnagiga aylanadigan uchburchakning koordinatalarini ko'rsatamiz.

Umuman olganda, ushbu video HTML-da tasvir kartalarini yaratishga qiziqqanlar uchun juda foydali foyda bo'ladi.

Video dars: HTMLda saylov kartasini yaratish.

HTML katalogi va boshqa materiallarni yuklab olish mumkin!

Keyingi videoda biz oxirida rasm kartalarini yaratish mavzusini o'rganamiz, keling, yorliqning oxirgi atributi haqida gapiramiz USEMAP, rasmni xaritasi bilan bog'lashimizga yordam beradi. Va turli xil rasmlarda tasvirlarning tasvirlarining yana bir juftligini ko'rib chiqing.