HTML Rasm Xaritalari (Image Maps)

HTML Rasm Xaritalari (Image Maps)

HTML rasm xaritalari yordamida rasmda bosish mumkin bo'lgan sohalarni yaratishingiz mumkin.

Rasm Xaritalari HTML <map> tegi rasm xaritasini aniqlaydi. Rasm xaritasi - bosish mumkin bo'lgan sohalar bilan rasm. Ushbu sohalar bir yoki bir nechta <area> teglar bilan belgilanadi.

Quyidagi rasmda kompyuter, telefon yoki qahva krujkasi ustiga bosing:

Ish joyi Misol: Quyida yuqoridagi rasm xaritasi uchun HTML manba kodini ko'rishingiz mumkin:

<img src="workplace.jpg" alt="Ish joyi" usemap="#workmap" />
 
<map name="workmap">
  <area shape="rect" coords="34,44,270,350" alt="Kompyuter" href="computer.htm" />
  <area shape="rect" coords="290,172,333,250" alt="Telefon" href="phone.htm" />
  <area shape="circle" coords="337,300,44" alt="Qahva" href="coffee.htm" />
</map>

Rasm xaritasi yaratish uchun sizga rasm va bosish mumkin bo'lgan sohalarni tasvirlaydigan HTML kod kerak bo'ladi.

Rasm Rasm <img> tegi yordamida joylashtiriladi. Boshqa rasmlardan farqi shundaki, siz usemap atributini qo'shishingiz kerak:

<img src="workplace.jpg" alt="Ish joyi" usemap="#workmap" />

usemap qiymati # belgisi bilan boshlanadi va rasm va rasm xaritasi o'rtasida bog'lanish yaratish uchun ishlatiladi.

Rasm Xaritasini Yaratish

Keyin, <map> elementini qo'shing.

<map> elementi rasm xaritasini yaratish uchun ishlatiladi va talab qilinadigan name atributidan foydalanib rasmga bog'lanadi:

<map name="workmap"></map>

name atributining qiymati <img> tegi usemap atributining qiymati bilan bir xil bo'lishi kerak.

Sohalar Keyin, bosish mumkin bo'lgan sohalarni qo'shing.

Bosish mumkin bo'lgan soha <area> elementi yordamida aniqlanadi.

Shakl Siz bosish mumkin bo'lgan sohaga shakl berishingiz kerak va quyidagi qiymatlardan birini tanlashingiz mumkin:

• rect - to'rtburchakli hududni belgilaydi
• circle - dumaloq hududni belgilaydi
• poly - ko'pburchakli hududni belgilaydi
• default - butun hududni belgilaydi

Shuningdek, bosish mumkin bo'lgan sohani rasmga joylashtirish uchun ba'zi koordinatalarni aniqlashingiz kerak.

Shakl="rect" shape="rect" uchun koordinatalar juftliklarda keladi, biri x o'qida, ikkinchisi y o'qida.

Misol:

<area shape="rect" coords="34, 44, 270, 350" href="https://www.apple.com/uz/macbook-pro/" />

Bu soha bosish mumkin bo'lgan joy bo'lib, foydalanuvchini "https://www.apple.com/uz/macbook-pro/" sahifasiga yo'naltiradi.

Shakl="circle" Dumaloq soha qo'shish uchun avval dumaloq markazining koordinatalarini aniqlang:

Misol:

<area shape="circle" coords="337, 300, 44" href="https://en.wikipedia.org/wiki/Coffee" />

Bu soha bosish mumkin bo'lgan joy bo'lib, foydalanuvchini "https://en.wikipedia.org/wiki/Coffee" sahifasiga yo'naltiradi.

Shakl="poly" shape="poly" bir necha koordinata nuqtalarini o'z ichiga oladi, bu esa to'g'ri chiziqlar bilan shakllangan ko'pburchakni yaratadi.

Misol:

<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="https://en.wikipedia.org/wiki/Croissant"
/>

Bu soha bosish mumkin bo'lgan joy bo'lib, foydalanuvchini "https://en.wikipedia.org/wiki/Croissant" sahifasiga yo'naltiradi.

Rasm Xarita va JavaScript

Bosish mumkin bo'lgan soha JavaScript funksiyasini ham ishga tushirishi mumkin.

Misol:

<map name="workmap">
  <area shape="circle" coords="337,300,44" href="coffee.htm" onclick="myFunction()" />
</map>
 
<script>
  function myFunction() {
    alert('Siz qahva krujkasiga bosdingiz!');
  }
</script>

Bo'lim Xulosasi

• HTML <map> elementi yordamida rasm xaritasini aniqlang
• HTML <area> elementi yordamida rasm xaritasidagi bosish mumkin bo'lgan sohalarni aniqlang
• HTML <img> elementining usemap atributidan rasm xaritasini ko'rsatish uchun foydalaning