چه باید بدانیم
• از یک تصویر با اندازه معمولی استفاده کنید که مرورگر آن را تغییر مقیاس ندهد. شما همچنین به یک ویرایشگر تصویر و یک ویرایشگر HTML یا متن نیاز دارید.
• هنگام درج تصویر، یک ویژگی اضافی برای شناسایی مختصات نقشه اضافه کنید.
• به عنوان مثال:
این مقاله نحوه ایجاد نقشه های تصویری با استفاده از تگ های HTML به جای ویرایشگر نقشه تصویر را توضیح می دهد. اکثر ویرایشگرهای تصویر وقتی به تصویر اشاره می‌کنید مختصات ماوس را به شما نشان می‌دهند، که تمام داده‌هایی است که برای شروع کار با نقشه‌های تصویر نیاز دارید.
ایجاد نقشه تصویر
برای ایجاد یک نقشه تصویری، ابتدا تصویری را انتخاب کنید که اساس نقشه باشد. تصویر باید "اندازه معمولی" باشد - یعنی نباید از تصویری آنقدر بزرگ استفاده کنید که مرورگر آن را مقیاس کند.
هنگامی که تصویر را درج می کنید، یک ویژگی اضافی اضافه می کنید که مختصات نقشه را مشخص می کند:
هنگامی که یک نقشه تصویری ایجاد می کنید، منطقه ای را ایجاد می کنید که روی تصویر قابل کلیک است، بنابراین مختصات نقشه باید با ارتفاع و عرض تصویری که انتخاب کرده اید مطابقت داشته باشد. نقشه ها از سه نوع شکل مختلف پشتیبانی می کنند:
- rect-یک مستطیل یا شکل چهار وجهی
- پلی-یک چند ضلعی یا شکل چند وجهی
- دایره-یک دایره
برای ایجاد مناطق، باید مختصات خاصی را که می خواهید نقشه برداری کنید، جدا کنید. یک نقشه ممکن است از یک یا چند ناحیه تعریف شده روی تصویر تشکیل شده باشد که با کلیک بر روی آنها، یک پیوند جدید باز می شود.
برای یک مستطیل، فقط گوشه سمت راست بالا و پایین را نقشه برداری می کنید. همه مختصات به صورت x، y (بالا، بالا) فهرست شده اند. بنابراین، برای گوشه بالا سمت چپ 0، 0 و گوشه پایین سمت راست 10، 15، باید 0، 0، 10، 15 را تایپ کنید. سپس آن را در نقشه قرار دهید:
برای یک چند ضلعی، هر مختصات x، y را جداگانه ترسیم می کنید. مرورگر وب به طور خودکار آخرین مجموعه مختصات را با اولین مختصات متصل می کند. هر چیزی در داخل این مختصات بخشی از نقشه است.
اشکال دایره فقط به دو مختصات نیاز دارند، مانند مستطیل، اما برای مختصات دوم، شعاع یا فاصله از مرکز دایره را مشخص می کنید. بنابراین، برای دایره ای با مرکز 122، 122 و شعاع 5، باید 122، 122، 5: بنویسید.
همه مناطق و اشکال ممکن است در یک برچسب نقشه گنجانده شوند:
ملاحظات
نقشه های تصویری در عصر وب 1.0 از دهه 1990 تا اوایل دهه 2000 بسیار رایج تر بودند - نقشه های تصویری اغلب اساس ناوبری یک وب سایت را تشکیل می دادند. یک طراح نوعی تصویر برای نشان دادن آیتم های منو ایجاد می کند، سپس یک نقشه تنظیم می کند.
رویکردهای مدرن طراحی واکنشگرا را تشویق می کنند و از شیوه نامه های آبشاری برای کنترل قرار دادن تصاویر و لینک ها در یک صفحه استفاده می کنند.
اگرچه تگ نقشه هنوز در استاندارد HTML پشتیبانی می شود، استفاده از دستگاه های تلفن همراه با فاکتورهای کوچک ممکن است منجر به مشکلات عملکرد غیرمنتظره در نقشه های تصویری شود. علاوه بر این، مشکلات پهنای باند یا تصاویر شکسته، ارزش یک نقشه تصویر را به چالش می کشد.
بنابراین، با خیال راحت به استفاده از این فناوری پایدار و کاملاً درک شده ادامه دهید، زیرا بدانید که جایگزین های کارآمدتری در حال حاضر برای طراحان وب وجود دارد.
