بهترین سایت برای توسعه دهندگان وب

دروس HTML5

شروع HTML مقدمه HTML ویرایشگران HTML مثالهای اساسی HTML المان های HTML ویژگی های HTML عناوین HTML بندهای HTML سبک های HTML قالب بندی HTML نقل قول های HTML نظرات HTML رنگهای HTML HTML و CSS پیوندهای HTML تصاویر HTML جداول HTML لیست های HTML بلوک های HTML کلاس های HTML شناسه های HTML فریم های HTML HTML و JavaScript مسیرهای پرونده HTML HTML قسمت هدینگ چیدمان های HTML HTML پاسخگو کد رایانه HTML موجودیت HTML نمادهای HTML رمزگذاری HTML رمزگذاری URL HTML HTML و XHTML

HTML فرم ها

فرم های HTML عناصر فرم HTML انواع ورودی HTML صفات ورودی HTML

HTML5

مقدمه HTML5 پشتیبانی HTML5 عناصر جدید HTML5 عناصر معنایی HTML5 مهاجرت از HTML4 راهنمای سبک HTML5

HTML گرافیک

HTML Canvas HTML SVG

HTML رسانه

HTML ویدیوی HTML صوت HTML افزونه های HTML یوتیوب HTML

HTML API

مکان جغرافیایی HTML کشیدن / رها کردن HTML HTML ذخیره وب HTML کارهای وب HTML و SSE

HTML مثال

مثالهای HTML آزمون ها HTML تمرینات HTML گواهی HTML خلاصه HTML قابلیت دسترسی به HTML

HTML منابع

لیست برچسب های HTML صفات HTML صفات جهانی HTML رویدادهای HTML رنگهای HTML کانواس HTML صوتی / تصویری HTML نسخه معتبر HTML مجموعه نویسه های HTML رمزگذاری URL HTML رمزگذاری زبان HTML پیام های HTTP روشهای HTTP مبدل PX به EM میانبرهای صفحه کلید

HTML5 درسهایی برای مبتدیان

نقشه های تصویری HTML



با استفاده از نقشه های تصویری ، می توانید مناطق قابل کلیک را بر روی تصویر اضافه کنید.


نقشه-تصویر

برچسب <map> تصویر نقشه را تعریف می کند. نقشه تصویر - تصویر با مناطق قابل کلیک

در تصویر زیر روی رایانه ، تلفن یا قهوه کلیک کنید:

Workplace Sun Mercury Venus

مثال

<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>
خودتان آزمایش کنید »

چگونه کار می کند؟

ایده پشت نقشه تصویر این است که شما می توانید بسته به جایی که در تصویر کلیک می کنید ، اقدامات مختلفی را انجام دهید.

برای ایجاد نقشه تصویری به یک تصویر و چند کد HTML که مناطق قابل کلیک را توصیف می کند ، نیاز دارید.


تصویر

تصویر با استفاده از برچسب <img> درج می شود. تنها تفاوت با تصاویر دیگر این است که شما باید یک ویژگی نقشه کاربریusemap اضافه کنید:

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

مقدار استفاده از نقشه با هشتگ # و به دنبال آن نام نقشه تصویر شروع می شود و برای ایجاد رابطه بین تصویر و نقشه تصویرusemap استفاده می شود.

نکته:: شما می توانید از هر تصویری به عنوان نقشه تصویری استفاده کنید!


نقشه

سپس ، یک المان <map> اضافه کنید.

از المان <map> برای ایجاد نقشه تصویری استفاده می شود و با استفاده از ویژگی نامname مورد نیاز به تصویر پیوند داده می شود:

<map name="workmap">

ویژگی نامname باید دارای همان مقداری باشد که صفت نقشهusemap استفاده از <img> دارد.

نکته: می توانید یک المان<map> جایی که هر چیزی ، لازم نیست بلافاصله بعد از تصویر وارد شود. استفاده کنید


مناطق

سپس مناطق قابل کلیک را اضافه کنید.

مناطق قابل کلیک با المان <area> تعریف می شود.

فرم

شما باید شکل منطقه را مشخص کنید و می توانید یکی از این مقادیر را انتخاب کنید:

  • rect - یک منطقه مستطیل شکل را تعریف می کند
  • circle - یک منطقه دایره ای تعریف می کند
  • poly - یک منطقه چند ضلعی را تعریف می کند
  • default - کل منطقه را تعریف می کند

مختصات

برای اینکه بتوانید ناحیه قابل کلیک را در آن قرار دهید باید برخی مختصات تصویر را تعریف کنید

مختصات به صورت جفت هستند ، یکی برای محور x و دیگری برای محور y.

بنابراین ، مختصات 34, 44 در 34 پیکسل از حاشیه سمت چپ و 44 پیکسل از بالا قرار دارد:

Workplace

مختصات 270, 350 از حاشیه سمت چپ 270 پیکسل و از بالا 350 پیکسل قرار دارد:

Workplace

اکنون داده کافی برای ایجاد یک منطقه مستطیل شکل قابل کلیک داریم:

<area shape="rect" coords="34, 44, 270, 350" href="computer.htm">
خودتان آزمایش کنید »

این منطقه قابل کلیک شدن است و کاربر را به صفحه "computer.htm" می فرستد:

Workplace

یک دایره

برای افزودن منطقه ای از دایره ، ابتدا مختصات مرکز دایره را پیدا کنید:

337, 300

Workplace

سپس شعاع دایره را مشخص کنید:

44 پیکسل

Workplace

اکنون داده کافی برای ایجاد یک منطقه دایره ای تعاملی کافی دارید:

<area shape="circle" coords="337, 300, 44" href="coffee.htm">
خودتان آزمایش کنید »

این منطقه قابل کلیک شدن است و کاربر را به صفحه "coffee.htm" می فرستد:

Workplace

شکل = " polyچند ضلعی"

شکل = "چند ضلعی"poly شامل چندین نقطه مختصات است که باعث ایجاد شکلی می شود که با خطوط مستقیم (چند ضلعی) شکل گرفته است.

از این می توان برای ایجاد هر شکلی استفاده کرد.

مثل شکل کروسان!

چگونه می توانیم کروسانت موجود در تصویر زیر را به یک لینک قابل کلیک تبدیل کنیم؟

چند ضلعی نقشه تصویر

ما باید مختصات x و y را برای تمام لبه های کروسانت پیدا کنیم:

مختصات چند ضلعی نقشه تصویر

مختصات به صورت جفت هستند ، یکی برای محور x و دیگری برای محور y:

<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">
خودتان آزمایش کنید »

این منطقه قابل کلیک است و کاربر را به صفحه "croissant.htm" می فرستد:

منطقه قابل کلیک کروسانت

نقشه تصویر و جاوا اسکریپت

منطقه قابل کلیک نیازی به پیوند به صفحه دیگری نیست ، همچنین می تواند یک عملکرد JavaScript را فراخوانی کند.

برای اجرای یک تابع JavaScript یک رویداد click به عنصر <area> اضافه کنید:

مثال

برای اجرای عملکرد JavaScript می توانید از ویژگی onclick استفاده کنید هنگام کلیک بر روی یک منطقه

<area shape="circle" coords="337,300,44" onclick="myFunction()">
خودتان آزمایش کنید »





این سایت برای آموزش ، آزمایش و یادگیری بهینه شده است. نمونه ها را می توان برای بهبود ساده کرد خواندن و درک اساسی. آموزشها ، پیوندها و مثالها مرتباً تجدید نظر می شوند تا از آنها جلوگیری شود خطاها ، اما ما نمی توانیم صحت و عملکرد کامل همه مطالب را تضمین کنیم. با استفاده از این سایت ، شما موافقت می کنید که مطالعه کرده اید و پذیرفته ایدمقررات استفاده , کوکی و سیاست های حفظ حریم خصوصی. کپی رایت 1999-2020 حق چاپ و .. محفوظ توسط احمد فرجی
سایت توسط چارچوب farsiw3.ir طراحی شده است.

Farsiw3.ir