MohirDox

Ko'rinishi

HTML Image Maplar ​

HTML image maplar yordamida siz rasmda bosiladigan sohalarni yaratishingiz mumkin.

Image Maplar ​

HTML <map> tegi image mapni belgilaydi. Image map — bu bosiladigan sohalarga ega rasm. Sohalar bir yoki bir nechta <area> teglar bilan belgilanadi.

Quyidagi rasmda kompyuter, telefon yoki kofe stakanini bosib ko'ring:

html
<img alt="Ish joyi" src="workplace.jpg" usemap="#ishjoyimap" />
<map name="ishjoyimap">
  <area alt="Kompyuter" coords="34,44,270,350" href="kompyuter.htm" shape="rect" target="_blank" />
  <area alt="Telefon" coords="290,172,333,250" href="telefon.htm" shape="rect" target="_blank" />
  <area alt="Kofe" coords="337,300,44" href="kofe.htm" shape="circle" target="_blank" />
</map>

Qanday ishlaydi? ​

Image mapning g'oyasi — rasmning qaysi qismiga bosganingizga qarab turli harakatlarni bajarish imkoniyati.

Image map yaratish uchun sizga rasm va bosiladigan sohalarni tavsiflovchi HTML kod kerak bo'ladi.

Rasm ​

Rasm <img> tegi yordamida kiritiladi. Boshqa rasmlardan farqi — siz usemap atributini qo'shishingiz kerak:

html
<img src="workplace.jpg" alt="Ish joyi" usemap="#ishjoyimap">

usemap qiymati # belgisi bilan boshlanadi va image map nomi bilan davom etadi. Bu rasm va image map o'rtasida bog'lanishni yaratadi.

Maslahat: Istalgan rasmni image map sifatida ishlatishingiz mumkin!

Image Map yaratish ​

Keyin, <map> elementini qo'shing.

<map> elementi image map yaratish uchun ishlatiladi va rasmga majburiy name atributi orqali bog'lanadi:

html
<map name="ishjoyimap">

name atributi <img> tegi usemap atributidagi qiymat bilan bir xil bo'lishi kerak.

Sohalar ​

Endi bosiladigan sohalarni qo'shing.

Bosiladigan soha <area> elementi yordamida belgilanadi.

Shape ​

Bosiladigan sohaning shaklini belgilashingiz kerak, quyidagi qiymatlardan birini tanlashingiz mumkin:

  • rect — to'rtburchak soha
  • circle — doira soha
  • poly — ko'p burchakli soha
  • default — butun soha

Bosiladigan sohani rasmga joylashtirish uchun koordinatalarni ham belgilash zarur.

Shape="rect" ​

shape="rect" uchun koordinatalar juftlikda keladi: biri x-o'q, biri y-o'q uchun.

Masalan, 34,44 — chap chetidan 34 piksel, yuqoridan 44 piksel.

270,350 — chap chetidan 270 piksel, yuqoridan 350 piksel.

Endi to'rtburchak bosiladigan soha yaratish uchun yetarli ma'lumot bor:

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

Bu soha bosilganda foydalanuvchi "kompyuter.htm" sahifasiga yo'naltiriladi.

Shape="circle" ​

Doira soha qo'shish uchun avval doiraning markaz koordinatalarini aniqlang: 337,300

Keyin radiusni belgilang: 44 piksel

Endi bosiladigan doira soha yaratish uchun yetarli ma'lumot bor:

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

Bu soha bosilganda foydalanuvchi "kofe.htm" sahifasiga yo'naltiriladi.

Shape="poly" ​

shape="poly" bir nechta koordinata nuqtalarini o'z ichiga oladi, bu to'g'ri chiziqlar bilan shakl hosil qiladi (ko'p burchak).

Bu istalgan shaklni yaratish uchun ishlatiladi.

Masalan, kruassan shakli!

Quyidagi rasmda kruassan bosiladigan link bo'lishi uchun nima qilish kerak?

Kruassanning barcha chetlarining x va y koordinatalarini topish kerak.

Koordinatalar juftlikda keladi: biri x-o'q, biri y-o'q uchun:

html
<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="kruassan.htm">

Bu soha bosilganda foydalanuvchi "kruassan.htm" sahifasiga yo'naltiriladi.

Image Map va JavaScript ​

Bosiladigan soha JavaScript funksiyasini ham ishga tushirishi mumkin.

<area> elementiga click hodisasini qo'shing va JavaScript funksiyasini bajaring:

Bu yerda onclick atributi yordamida soha bosilganda JavaScript funksiyasini ishga tushiramiz:

html
<map name="ishjoyimap">
  <area shape="circle" coords="337,300,44" href="kofe.htm" onclick="kofeBosildi()">
</map>

<script>
function kofeBosildi() {
  alert("Siz kofe stakanini bosdingiz!");
}
</script>

Bob yakuni ​

  • HTML <map> elementi yordamida image map yarating
  • HTML <area> elementi yordamida image mapda bosiladigan sohalarni belgilang
  • <img> elementining usemap atributi yordamida image mapga bog'laning

HTML Image Teglari ​

TegTavsifi
<img>Rasmni belgilaydi
<map>Image mapni belgilaydi
<area>Image map ichida bosiladigan sohani belgilaydi
<picture>Bir nechta rasm manbalari uchun konteynerni belgilaydi

HTML teglarining to'liq ro'yxati uchun HTML Tag Reference sahifasiga tashrif buyuring.