کارت گرافیک HTML. نقشه نقشه ماوس

مرورگرهای پشتیبانی

ویژگی های

مثال استفاده

بیایید نمونه ای را در نظر بگیریم که هنگام کلیک کردن بر روی یک شکل خاص در یک تصویر، انتقال به صفحات مختلف وب وجود دارد که این ارقام را توصیف می کنند (پیوندهایی به ویکی پدیا):

یک شکل را انتخاب کنید:

"4 ارقام برای انتخاب در دسترس هستند"

و به همین ترتیب آنچه ما در این مثال انجام دادیم:

در این مقاله، ما در نظر خواهیم داشت که چگونه یک کارت تصویر مشتری را در نظر بگیریم، زمانی که روی یک منطقه خاص کلیک میکنید، ما قادر خواهیم بود به یک لینک خاص برویم. نقشه های نقشه برداری را می توان به ندرت در سایت ها یافت، به عنوان این فرایند کاملا وقت گیر است، اما اگر می خواهید بازدیدکنندگان خود را با یک فرم غیر معمول برای مراجع تعجب کنید و وقت خود را برای تحصیلات خود آزاد کنید، این مقاله برای شما مناسب است.

تگ

مثال استفاده

بیایید نمونه ای را در نظر بگیریم که هنگام کلیک کردن بر روی یک شکل خاص در یک تصویر، انتقال به صفحات مختلف وب وجود دارد که این ارقام را توصیف می کنند (پیوندهایی به ویکی پدیا):

یک شکل را انتخاب کنید:

"4 ارقام برای انتخاب در دسترس هستند"

و به همین ترتیب آنچه ما در این مثال انجام دادیم:

سریع: برای به دست آوردن مختصات تصویر، از ویرایشگر تصویر، حتی ساده ترین ویرایشگر، به عنوان مثال، استفاده کنید رنگمختصات مکان نما را نمایش می دهد. مختصات را روی ورق یا در یک فایل جداگانه بنویسید و مقادیر را روی صفحه قرار دهید.

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

ولادی مرزویچ

کارت های تصویر به شما این امکان را می دهد که لینک ها را به مناطق مختلف یک تصویر متصل کنید. این در دو نسخه مختلف - سرور و مشتری اجرا می شود. اگر سرور اعمال شود، مرورگر یک درخواست را به سرور ارسال می کند تا آدرس لینک انتخاب شده را دریافت کند و منتظر پاسخ به اطلاعات مورد نیاز است. این رویکرد نیاز به زمان بیشتری برای صبر کردن برای نتایج و فایل های فردی برای هر کارت تصویر دارد.

در نسخه مشتری، نقشه در همان سند HTML به عنوان لینک به تصویر واقع شده است.

کارت تصویر مشتری

برای مشخص کردن تصویر یک نقشه، از ویژگی برچسب USMAP استفاده کنید . این مقدار لینک را به توضیح پیکربندی نقشه نشان می دهد.

مثال 1. با استفاده از یک تصویر نقشه

برای مشخص کردن مرورگر که تصویر نقشه است، ویژگی USEMAP اعمال می شود. این یک اشاره به پیکربندی پیکربندی کارت است که توسط برچسب تنظیم شده است

ویژگی منطقه برچسب

شکل

شکل منطقه فعال را تعیین می کند. شکل می تواند به شکل یک دایره (دایره)، یک مستطیل (RECT)، چند ضلعی (پلی) باشد.

aLT

متن جایگزین را برای هر منطقه اضافه می کند. این فقط یک نظر برای مرجع است، زیرا صفحه نمایش نمایش داده نمی شود.

هماهنگی

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

برای دایره، سه عدد تنظیم می شوند - مختصات مرکز دایره و شعاع.

برای یک مستطیل - مختصات گوشه پایین سمت چپ و راست چپ.

برای چند ضلعی، مختصات رأس های آن تنظیم شده اند (شکل 2).

شکل. 2. نقاط مختصات برای دفن زباله

href

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

مزایای کارت

1. کارت به شما اجازه می دهد هر نوع منطقه مرجع را مشخص کنید. با توجه به اینکه تصاویر با طبیعت آنها مستطیل هستند، یک مرجع گرافیکی از یک فرم پیچیده، به عنوان مثال، برای نشان دادن منطقه جغرافیایی، بدون تصاویر کارت امکان پذیر نیست. به عنوان یک قانون، در موضوعات جغرافیایی تصویر نقشه و اغلب اعمال می شود.

2. با یک فایل راحت تر به کار - شما مجبور نیستید از خرید قطعات فردی مراقبت کنید و تصویر را می توان به راحتی در جای مناسب قرار داد.

معایب

1. شما نمی توانید یک نوک پاپ آپ و متن جایگزین را برای مناطق فردی نصب کنید. متن جایگزین به شما اجازه می دهد اطلاعات متن را در مورد تصویر دریافت کنید، زمانی که بارگذاری تصویر در مرورگر غیر فعال شده است. از آنجا که بارگیری تصاویر پس از دریافت مرورگر اطلاعات در مورد آن رخ می دهد، متن الگوی جایگزینی پیش از آن ظاهر می شود. و همانطور که بارگذاری می شود، متن توسط تصویر جایگزین خواهد شد. برای کارت ها، این ویژگی مرتبط است، زیرا اگر شما مشاهده تصاویر را که بسیاری از کاربران انجام می دهند را غیرفعال کنید، ما در نهایت تنها یک مستطیل خالی را می بینیم.

2. با یک فرم پیچیده، منطقه مرجع مقدار کد HTML را افزایش می دهد. این کانتور با مجموعه ای از بخش های مستقیم تقریب می شود، دو مختصات باید برای هر نقطه از چنین بخش تعیین شود، و تعداد کل این نقاط می تواند بسیار بزرگ باشد. در عدالت، لازم به ذکر است که اشکال پیچیده یک مورد خاص است و به ندرت اعمال می شود.

3. با کارت ها، تصاویر را نمی توان جلوی های مختلفی را انجام داد که در هنگام برش یک الگوی در هر قطعه در دسترس قرار می گیرند: اثر نورد، انیمیشن جزئی، بهینه سازی فردی از تصاویر برای بارگیری سریع.

تمجید

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

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

گزینه های جایگزین

هیچ نیاز فوری برای استفاده از تصاویر کارت وجود ندارد، بنابراین شما باید به این واقعیت توجه کنید که گزینه های دیگری برای انجام این کار وجود دارد.

با استفاده از فلش

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

برش تصاویر

این یکی از بودجه های محبوب در طراحی است. یک تصویر در این مورد از طریق برنامه های ویژه به قطعات قطع شده است، که در نهایت با هم کاهش می یابد، ایجاد یک توهم یک تصویر جامد. اگر چه مناطق برش تنها می توانند مستطیل شکل باشند، در اغلب موارد این به اندازه کافی برای ایجاد منابع بسیار کافی است. برای هر قطعه، شما می توانید بهترین فرمت گرافیکی را انتخاب کنید که در آن ذخیره می شود، گزینه های بهینه سازی، اضافه کردن متن جایگزین. سپس حتی زمانی که تصاویر غیرفعال هستند، مرزهای مناطق و تصویر متن به وضوح قابل مشاهده خواهد بود.

خلاصه

همانطور که معلوم شد، دلیل استفاده از تصاویر نقشه ها تنها یک است - شکل پیچیده ارجاعات دیکته شده توسط وظایف طراحی. برنامه های معمول - مناطق یک نقشه جغرافیایی که به عنوان مراجع خدمت می کنند. در تمام موارد دیگر، شما می توانید لینک های متن را انجام دهید، و اگر شما نیاز به ایجاد ناوبری گرافیک، یک تصویر برای راحتی می تواند به قطعات برش داده شود. این رویکرد راحتی بیشتری برای کاربران ایجاد می کند، به ویژه آنهایی که به دلایل مختلف، نمایش تصاویر را در مرورگر جدا می کنند. آنها همچنین باید در مورد آنها به یاد داشته باشند.

"من یک قطعه کار ساختم تا پیوندها را به صفحات مختلف وب سایت های تعریف شده (" ")

در حال حاضر، اگر شما بر روی ارقام با کتیبه ها کلیک کنید، صفحات مربوطه باز خواهد شد: مشخصات، خاطرات و یا تمام پست ها از بخش "درس های فتوشاپ" (توجه! پس از انتقال وبلاگ به وردپرس و تغییرات او، لینک ها کار نمی کنند! اما درس باقی مانده است!)

به منظور تصویر به کار، من در مورد چنین کد HTML نوشتم:

این کد را می توان به فیلد پیام وارد کرد (زمانی که دکمه "منبع" فشار داده می شود) یا به epigraph ...

به هر حال، پست های دیگر در مورد موضوع وجود دارد: "HTML چیست؟ "کد HTML از نقاشی "،"تصویر لینک "و غیره

1. مختصات

برای کامپایل کد مشخص شده، من کمی هندسه را به یاد می آورم :)

سیستم مختصات: AXIS X - بالا به پایین، محور Y - از چپ به راست
برای مشخص کردن مختصات شکل، شما باید نصب کنید:
- مربع (یا مستطیل)، طرف هایی که موازی با محورها هستند - مختصات دو زاویه مخالف - X1، Y1 و X2، Y2
- چند ضلعی - مختصات تمام زوایای
- دایره - مختصات مرکز و شعاع.

در مورد من، معلوم می شود، مختصات نقاط A، C برای مرجع "مشخصات" (مستطیل)، نقاط D، E، F، G، H - برای لینک "دفتر خاطرات" (چند ضلعی)، Q و طول R - برای مرجع "درس های فتوشاپ" (دایره). تمام این اعداد در کد HTML در قرمز برجسته می شوند. علاوه بر این، شما باید اندازه تصویر را در پیکسل ها (سبز) بدانید

نیازی به دقت خاصی وجود ندارد، بنابراین ممکن است مختصات را با کمک "خط" در فتوشاپ تعیین کنید - برای تماس با آن تماس بگیرید Ctrl + R.

من برای شخص دیگری جالب تر شدم تا مختصات را محاسبه کنم. برای این راه اندازی MS رنگ (شروع - تمام برنامه ها - استاندارد - رنگ) و نقاشی در آن را باز کنید. هنگامی که مکان نما را به نقاط دلخواه در پانل پایین هدایت می کنید، مختصات آنها به نظر می رسد با دقت ضبط

2. کد HTML

کارت های ناوبری توسط برچسب تنظیم می شوند

نقشه برچسب شامل برچسب ها که زمینه های هندسی نقاشی و منابع مرتبط را تعریف می کند.

من آن را فهمیدم - برای ایجاد یک کارت ناوبری مورد نیاز:

— برچسب ها با توضیحات تصویر

— برچسب های کارت

— برچسب ها مناطق

در مورد من، مقادیر معلوم شد:

• عرض \u003d "640" ارتفاع \u003d. "367" - ابعاد تصویر
• src \u003d "https: //syt/f02c73a3cd94.jpg" - آدرس تصویر در سایت
• usemap \u003d "# تصویر " - نام کارت تصویر شرطی (شاید هر)
• نام نقشه \u003d "تصویر" - نام نقشه (به طور کامل مربوط به بالا است)

مقادیر برای مناطق لینک - HREF - هدف از لینک، شکل - شکل منطقه و هماهنگی - مختصات - مطابق با سه منطقه (منطقه) در تصویر.

مستطیل "مشخصات"

• href \u003d "https: // site // profile /" - آدرس صفحه پروفایل
• شکل \u003d "RECT" - تعیین فرم "مستطیل"
• coorss \u003d "235،61،472،117" - مختصات نقاط A (235.61) و C (472،117)

چند ضلعی "دفتر خاطرات"

• href \u003d "https: // سایت / وبلاگ" - آدرس صفحه خاطرات
• شکل \u003d "پلی" - تعیین فرم "چند ضلعی"
• coorss \u003d "235،118،362،118،47،152،146" - مختصات زاویه چند ضلعی: نقاط د (235،118)، E (362،118)، F (474،152)، G (457،207) و H (229،146)

دایره "درس های فتوشاپ"

• href \u003d "https: //syt/showjournal.php؟ required \u003d 2447247" - آدرس پست های پست از بخش "درس های فتوشاپ"
• شکل \u003d "دایره" - تعیین "دایره"
• cOOTS \u003d "551،198،65" - مختصات دایره: مرکز - نقطه Q (551،198) و RADIUS - R \u003d 65

3. پایان دادن به

تمام مقادیر به دست آمده را در "سیستم" کد HTML برای تصویر نقشه ناوبری فرو برد و موارد زیر را دریافت کرد:

این کد در هنگام استفاده از "چرخش" به تصویر با مناطق لینک است.

برای آموزش یک نسخه آسان "سبک وزن" از ایجاد لینک ها وجود دارد - پست "آموزش: لینک ها در تصویر"

اگر اشتباه کرده اید، لطفا متن را انتخاب کنید و روی کلیک کنید Ctrl + وارد کنید.