نقشه های تصویری HTML
در این درس:
با استفاده از نقشه های تصویری ، می توانید مناطق قابل کلیک را بر روی تصویر اضافه کنید.
نقشه-تصویر
برچسب <map> تصویر نقشه را تعریف می کند. نقشه تصویر
-
تصویر با
مناطق قابل کلیک
در تصویر زیر روی رایانه ، تلفن یا قهوه کلیک کنید:
مثال
<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 پیکسل از بالا
قرار دارد:
مختصات 270, 350 از حاشیه سمت چپ 270 پیکسل و از بالا 350 پیکسل قرار دارد:
اکنون داده کافی برای ایجاد یک منطقه مستطیل شکل قابل کلیک داریم:
<area shape="rect" coords="34, 44, 270, 350" href="computer.htm">
خودتان
آزمایش کنید »
این منطقه قابل کلیک شدن است و کاربر را به صفحه "computer.htm" می فرستد:
یک دایره
برای افزودن منطقه ای از دایره ، ابتدا مختصات مرکز دایره را پیدا کنید:
337, 300
سپس شعاع دایره را مشخص کنید:
44 پیکسل
اکنون داده کافی برای ایجاد یک منطقه دایره ای تعاملی کافی دارید:
<area shape="circle" coords="337, 300, 44" href="coffee.htm">
خودتان
آزمایش کنید »
این منطقه قابل کلیک شدن است و کاربر را به صفحه "coffee.htm" می فرستد:
شکل = " 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()">
خودتان
آزمایش کنید »
سایت توسط چارچوب farsiw3.ir طراحی شده است.
