Rasm xaritalari

Rasm xaritalari bilan ramning bosiluvchi maydonini yaratishingiz mumkin

Rasm xaritalari

HTMLning <map> tegi rasmning xaritasini belgilab beradi. Rasm xaritasi rasmning bosiluvchi maydoni hisoblanadi. Bu maydo bir yoki bir nechta <area> teglari bilan belgilanadi.

Quyidagi rasmda joylashgan kompyuter, telefon yoki qahva finjonini bosib ko'ring:

Bu yuqoridagi rasm xaritasining HTML kodi

 <img src="workplace.jpg" alt="Workplace" usemap="#workmap">

<map name="workmap">
  <area shape="rect" coords="34,44,270,350" alt="Computer" href="computer.htm">
  <area shape="rect" coords="290,172,333,250" alt="Phone" href="phone.htm">
  <area shape="circle" coords="337,300,44" alt="Coffee" href="coffee.htm">
</map>

Bu qanday ishlaydi ?

Rasm xaritasining g'oyasi shundaki, siz rasmning qayerini bosganingizga qarab turli xil amallarni bajarishingiz kerak.

Rasm xaritasini yaratish uchun sizga rasm va bosiladigan maydonlarni belgilab beruvchi HTML kod kerak bo'ladi.

Tasvir

Rasn <img> tegi yordamida kiritiladi. Uning boshqa rasmlardan yagona farq shundaki, siz unga usemap attributini qo'shishingiz kerak:

<img src="workplace.jpg" alt="Workplace" usemap="#workmap">

usemap qiymati rasm xaritasi nomidan keyin # hesh teg bilan boshlanadi va rasm va rasm xaritasi o'rtasida aloqa yaratish uchun ishlatiladi.

Maslahat: Rasm xaritasi sifatida istalgan rasmdan foydalanishingiz mumkin!

Rasmlar xaritasini yaratish

Keyin, <map> elementini qo'shing.

<map> elementi rasm haritaisini yaratish uchun ishlatiladi va talab qilinuvchi name attributi bilan bog'lanadi.

<map name="workmap">

name attributi <img> elementining usemap attributi kabi bir xil qiymatga ega bo'lishi shart.

Maydonlar

Keyin, bosiluvchi maydonnin qo'shing.

Bosiluvchi maydon <area> elementi bilan beriladi.

Shakl

Bosiluvchi maydonning shaklini belgilashingiz shart va quyidagi qiymatlardan birini tanlashingiz mumkin:

rect- to'rtburchak maydonni belgilaydi
circle- doira maydonini belgilaydi
poly- ko'pburchakli maydonni belgilaydi
default- butun hududni belgilaydi

Rasmning bosiladigan maydonini joylashtirish uchun ba'zi koordinatalarni ham berishingiz kerak.

Shape="rect"

shape="rect" uchun kordinatalar juft hisoblanib, biri x boshqasi y o'qi uchun bo'ladi.

Shunday qilib, 34,44 koordinatalar rasmning chap tomonidan 34 piksel va yuqorisidan 44 piksel masofada joylashadi:

270,350 koordinatalar rasmning chap tomonidan 34 piksel va yuqorisidan 44 piksel masofada joylashadi:

Endi bizda bosiladigan to'rtburchaklar maydonini yaratish uchun yetarli ma'lumotlar bor:

<area shape="rect" coords="34, 44, 270, 350" href="computer.htm">

W3Schools online HTML editor

Bu bosiluvchi maydon hisoblanadi va foydalanuvchini "computer.htm" sahifasiga o'tkazadi.

Shape="circle"

Aylana maydonni qo'shish uchun avval aylana markazining koordinatalarini toping:

337,300

Keyin aylananing radiusini belgilang:

44piksel

Ana endi bosiladigan aylana maydonni yaratish uchun yetarli ma'lumotlarga egasiz:

<area shape="circle" coords="337, 300, 44" href="coffee.htm">

W3Schools online HTML editor

Bu bosiladigan maydon hisoblanib, foydalanuvchini "coffe.htm" sahifasiga o'tkazadi:

Shape="poly"

shape="poly" to'g'ri chiziqlar bilan hosil qilingan shaklni yaratadigan bir nechta kordinata nuqtalarini o'z ichiga oladi.

Bu har qanday shaklni yaratish uchun ishlatilishi mumkin.

Huddi, kruvasan shakli kabi!

Qanday qilib ushbu rasmdagi kruvasanni bosiladigan havola qilish mumkin ?

Kruvasanning barcha qirralari uchun x va y koordinatalarini topishimiz kerak:

Kordinatalar juft qilib yoziladi, biri x boshqasi y o'qi uchun bo'ladi:

<area shape="poly" 
 coords="140,121,181,116,204,160,204,222,191,270,140,329,85,355,58,352,37,322,40,259,103,161,128,147"
 href="croissant.htm">

Bu bosiladigan maydon hisoblanib, foydalanuvchini "coffe.htm" sahifasiga o'tkazadi:

Rasm haritasi va Javascript

Bosluvchi maydonni javascript yordamida ham yaratish mumkin.

JavaScript funksiyasini ishlashi uchun <area> elementiga click hodisasini qo'shing:

Bu yerda biz maydon bosilganda JavaScript funksiyasini bajarish uchun onclick atributidan foydalanamiz:

<map name="workmap">
  <area shape="circle" coords="337,300,44" href="coffee.htm" onclick="myFunction()">
</map>

<script>
function myFunction() {
  alert("You clicked the coffee cup!");
}
</script>