نقشه های تصویری مورد نیاز است. تصویر نقشه در HTML

نقشه تصویر (نقشه تصویر) به شما اجازه می دهد لینک ها را به قطعات تصویر متصل کنید. با کلیک بر روی بخش های فردی تصویر، کاربر می تواند به یک لینک داده شده به صفحات وب مختلف تغییر کند.

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

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

ویژگی های برچسب

مختصات پیش فرض در پیکسل ها اندازه گیری می شود.

منشا مختصات گوشه بالا سمت چپ صفحه نمایش، I.E.

نمونه هایی از انواع مختلف کارت های کارت تصویر

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

برای استفاده از تصویر به عنوان یک نقشه، در برچسب شما باید یک ویژگی اضافی را وارد کنید. usemapتعریف نام نقشه تصویر قبل از این نام علامت "#" است.

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

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

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

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

به منظور تصویر به کار، من در مورد چنین کد 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 + وارد کنید.

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

تگ

عنصر نام عنصر

ویژگی برچسب ما هر دو مختصات منطقه (ویژگی Counts) و نوع ارقام مورد نیاز شما را نشان می دهیم (ویژگی شکل):

مثال استفاده

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

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

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

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

• تصویر را قرار داد (برچسب )، که بعدا بعد از طراحی یک کارت تصویر استفاده خواهیم کرد. در ویژگی USMAP، شما باید نام کارت تصویر را مشخص کنید که ما در عنصر استفاده خواهیم کرد
• نقشه تصویر را قرار دهید (برچسب
• ما چهار برچسب را قرار می دهیم که مناطق تعاملی را در نقشه تعریف می کنند:
  • اولین ما میپرسیم منطقه مستطیلی (ویژگی شکل با مقدار "RECT")، آن را با ما منطبق است اولین تصویر ( دو نفر اول مقادیر مربوط به گوشه بالا سمت چپ، زیر است دو مقادیر زاویه بالا و پایین سمت راست را تعریف می کنند).
  • دومین نشان دادن منطقه گرد (ویژگی شکل با ارزش "دایره")، آن را با ما منطبق است دومین تصویر ( اولین ارزش مربوط به مختصات محور است ایکس.، و دوم در امتداد محور y.، سوم تعیین می کند شعاع).
  • مربوط به تاخت و رقم چهارمسپس آنها بر اساس اصل قرار می گیرند منطقه چند ضلعی (ویژگی شکل با "پلی"). شما تعداد مورد نیاز نقاط مورد نظر را تعریف می کنید، مختصات این نقاط (ویرایشگر گرافیک) را محاسبه کنید و در این سفارش مشخص کنید تا مرورگر بتواند آنها را به یک خط متصل کند. در مثال یک مثلث (نقاشی سوم): اولین نقطه (مختصات ایکس. و y. رگه ها) دومین نقطه (مختصات ایکس. و y. گوشه پایین سمت چپ) و کوچک نقطه (مختصات ایکس. و y. گوشه پایین تر)

من توجه شما را به این واقعیت جلب می کنم که اگر برچسب دارای یک کار عملی 26 باشد.

نایب: برای خلوص کار عملی، من پیشنهاد می کنم به عنوان اولین نکته برای استفاده از بالای ستاره و حرکت در جهت عقربه های ساعت. به عنوان مقدار ویژگی HREF، من نشان دادم # در این مورد، آن را به عنوان یک پلاگین عمل می کند (شما در همان صفحه باقی می ماند)، شما می توانید انتقال به هر صفحه را انجام دهید.

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

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

سلام همه با شما Bernatsky Andrei.

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

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

به عنوان مثال، هنگامی که ماوس را روی منطقه فعال فشار می دهید، به یک URL خاص بروید. اگر شما در vkontakte.ru نشسته اید، نمونه ای از یک تصویر نقشه وجود دارد - این زمانی است که در عکس جشن گرفته می شود، و هنگامی که مکان نما را روی یک شخص مشخص شده در عکس قرار می دهید، نام و نام خانوادگی نشان داده شده است، و هنگامی که شما روی ماوس کلیک کنید، به صفحه این شخص بروید.

اول، من به شما یک نسخه ویدئویی از این درس ارائه می دهم:

این به اندازه کافی درست است ما هر عکس را با دوستانمان می گیریم بهتر است آن را در بلوک جداگانه خود قرار دهید.