Rasm faol hududlari

HTML rasm xaritalari yordamida rasm ustida bosiladigan joylar yarata olasiz.

Rasm xaritalari

HTML <map> tegi rasm xaritasini aniqlaydi. Rasm xaritasi — bu bosiladigan joylarga ega rasm. Bu joylar bir yoki bir nechta <area> teglari bilan aniqlanadi.

Quyidagi rasmdagi kompyuter, telefon yoki kofe finjoniga bosib ko‘ring:

U qanday ishlaydi?

Rasm xaritasining asosiy g‘oyasi shuki, rasmning qaysi joyini bosishingizga qarab turli amallarni bajarishingiz mumkin.

Rasm xaritasini yaratish uchun rasm va undagi bosiladigan sohalarni belgilovchi HTML kodi kerak.

Rasm

Rasm <img> tegi yordamida joylashtiriladi. Boshqa rasmlardan yagona farqi — usemap atributini qo‘shishingiz kerak:

usemap qiymati # belgisi bilan boshlanadi, undan keyin rasm xaritasining nomi yoziladi. U rasm bilan rasm xaritasini o‘zaro bog‘lash uchun ishlatiladi.

Rasm xaritasini yaratish

So‘ng <map> elementini qo‘shing.

<map> elementi rasm xaritasini yaratish uchun ishlatiladi va majburiy name atributi yordamida rasmga bog‘lanadi:

name atributining qiymati <img> tegidagi usemap atributida ko‘rsatilgan nom bilan bir xil bo‘lishi kerak.

Hududlar

So‘ng bosiladigan sohalarni qo‘shing.

Bosiladigan soha <area> elementi yordamida belgilanadi.

Shape

Bosiladigan sohaning shaklini belgilashingiz kerak. Buning uchun quyidagi qiymatlardan birini tanlashingiz mumkin:

• rect — to‘g‘ri to‘rtburchak shaklidagi sohani belgilaydi
• circle — doira shaklidagi sohani belgilaydi
• poly — ko‘pburchak shaklidagi sohani belgilaydi
• default — butun sohani belgilaydi

Bosiladigan sohani rasmga joylashtirish uchun uning koordinatalarini ham belgilashingiz kerak.

Shape="rect"

shape="rect" uchun koordinatalar juftliklarda beriladi: biri x o‘qi, ikkinchisi y o‘qi uchun.

Demak, 34,44 koordinatali nuqta chap chetdan 34 piksel va yuqoridan 44 piksel masofada joylashgan:

270,350 koordinatali nuqta chap chetdan 270 piksel va yuqoridan 350 piksel masofada joylashgan:

Endi bosiladigan to‘g‘ri to‘rtburchak soha yaratish uchun yetarli ma’lumotga egamiz:

Bu joy bosiladigan bo‘ladi va foydalanuvchini "computer.htm" sahifasiga yuboradi:

Shape="circle"

Doira shaklidagi joy qo‘shish uchun avval doira markazining koordinatalarini aniqlang:

337,300

So‘ngra doiraning radiusini belgilang:

44 piksel

Endi bosiladigan dumaloq joy yaratish uchun yetarli ma’lumotga ega siz:

Bu joy bosiladigan bo‘ladi va foydalanuvchini "coffee.htm" sahifasiga yuboradi:

Shape="poly"

shape="poly" bir nechta koordinata nuqtalarini o‘z ichiga oladi, bu esa to‘g‘ri chiziqlardan hosil bo‘lgan shaklni (ko‘pburchakni) yaratadi.

Bu har qanday shaklni yaratishda ishlatilishi mumkin.

Masalan, kruassan shakli!

Quyidagi rasmdagi kruassanni qanday qilib bosiladigan havolaga aylantiramiz?

Kruassanning barcha qirralari uchun x va y koordinatalarini topishimiz kerak:

Koordinatalar juft bo‘lib keladi, bittasi x o‘qi uchun, bittasi y o‘qi uchun:

Bu joy bosiladigan bo‘ladi va foydalanuvchini "croissant.htm" sahifasiga yuboradi:

Rasm xaritasi va JavaScript

Bosiladigan joy JavaScript funksiyasini ham ishga tushirishi mumkin.

JavaScript funksiyasini bajarish uchun <area> elementiga click hodisasini qo‘shing:

Bob xulosasi

• Rasm xaritasini aniqlash uchun HTML <map> elementidan foydalaning
• Rasm xaritasidagi bosiladigan joylarni aniqlash uchun HTML <area> elementidan foydalaning
• Rasm xaritasiga ishora qilish uchun <img> elementining HTML usemap atributidan foydalaning

HTML rasm teglari