HTML - درس 15. نقشه های ناوبری - نقشه

چنین نقشه های تصویری می توانند سمت مشتری یا سمت سرور باشند. لینک های نقشه مشتری در خود سند ذخیره می شوند و با کلیک ماوس خود مرورگر مشخص می کند مختصات این نقطه مربوط به کدام ناحیه است و به لینک مورد نظر می رود.

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

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

بیایید یک نقشه ناوبری از آن بسازیم، i.e. وقتی بر روی یخچال کلیک می کنید به صفحه اختصاصی یخچال هدایت می شوید (با مدل ها، توضیحات و قیمت ها)، با کلیک بر روی جاروبرقی و ماشین لباسشویی به صفحات مربوط به آنها هدایت می شوید.

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

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

برای این منظور معمولاً از برخی برنامه ها استفاده می شود، به عنوان مثال Image Ready که ابزار خاصی برای ترسیم مناطق دارد و به طور خودکار توضیحات مربوط به این مناطق را می سازد. در نظر گرفتن عملکرد این برنامه ها در دوره HTML گنجانده نشده است، بنابراین در اینجا مختصات را "با چشم" تنظیم می کنیم. دوباره به تصویر ما نگاه کنید:

عرض تصویر ما 738 پیکسل و ارتفاع آن 192 پیکسل است. بیایید در امتداد مرزهای مناطق خود خطوط بکشیم و مختصات را تقریباً مشخص کنیم. اکنون ما آماده ایم که این پارامترها را به تگ های خود اضافه کنیم .

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

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

در نهایت، باید بگویم که دو عنصر شگفت انگیز دیگر در HTML وجود دارد - تگ ها

برچسب بزنید

داخل ظرف

• یک یا چند عنصر< >. این عناصر محتوایی ندارند اما مناطق هندسی نقشه تصویر و لینک های مرتبط با هر منطقه را تعریف می کنند.
• محتوای سطح بلوک این محتوا باید شامل< >، که مناطق هندسی نقشه و پیوندهای مرتبط با هر منطقه را مشخص می کند

اگر تگ کنید

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

HTML: 3.2 | 4 / XHTML: 1.0 | 1.1

نحو

صفات

کلاس	نام کلاس مورد استفاده را تعریف می کند
کارگردان	جهت شخصیت ها را تعیین می کند: ltr - از چپ به راست rtl - از راست به چپ
شناسه	شناسه منحصر به فرد
زبان	زبان سند نمایش داده شده را تعریف می کند
نام	نام کارت تصویر به عنوان مقدار پارامتر usemap تگ استفاده می شود
روشن شدن	عنصر تمرکز خود را از دست می دهد
کلیک کنید	روی یک عنصر کلیک کنید
ondblclick	روی یک عنصر دوبار کلیک کنید
متمرکز	عنصر در حال تمرکز
روی کلید	فشار دادن یک کلید زمانی که عنصر فوکوس دارد
را فشار دهید	فشار دادن و رها کردن یک کلید زمانی که یک عنصر فوکوس دارد
روی کلید	هنگامی که عنصر فوکوس دارد، کلیدی را که قبلاً فشار داده شده رها کنید
به پایین	وقتی یک عنصر فوکوس دارد، روی دکمه ماوس کلیک کنید
onmousemove	حرکت اشاره گر ماوس زمانی که یک عنصر فوکوس دارد
سوار کردن	حرکت دادن نشانگر ماوس از روی یک عنصر
روی موشواره	قرار دادن نشانگر ماوس روی یک عنصر
onmouseup	هنگامی که یک عنصر فوکوس دارد، یک دکمه ماوس را که قبلاً فشار داده اید، رها کنید
سبک	یک شیوه نامه درون خطی را مشخص می کند
عنوان	راهنمای ابزار

مثال

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

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

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

نظریه

• هماهنگی ها- مختصات منطقه انتخاب
• href- پیوندی که با کلیک بر روی منطقه به آن خواهید رفت
• nohref- نشان می دهد که منطقه حاوی پیوند نیست
• شکل- فرم انتخاب
  • دایره- منطقه انتخاب به شکل یک دایره
  • پیش فرض- کل منطقه تصویر را انتخاب می کند
  • پلی- منطقه انتخاب به شکل چند ضلعی
  • راست- منطقه انتخاب به شکل مستطیل
• هدف- تعیین می کند که لینک در کجا باز شود

از آنجایی که ناحیه انتخابی من باید چند ضلعی باشد، مقدار مشخصه shape، تگ ناحیه را به عنوان ناحیه چند ضلعی مشخص می کنیم. در این حالت، مختصات نقطه نسبت به گوشه سمت چپ بالا نشان داده شده است، که با کاما - x،y از هم جدا می شوند. نقطه ها نیز با کاما از هم جدا می شوند که در ابتدا باعث سردرگمی هنگام خواندن چنین کدهایی می شود.

ما Paint را می نویسیم

ابتدا بیایید طرح را آماده کنیم:

بدنه (حاشیه: 0؛ بالشتک: 20 پیکسل؛ فونت-خانواده: Arial، Helvetica، sans-serif؛ ) img ( حاشیه: هیچ؛ طرح کلی: هیچ؛ نمایش: بلوک؛ -moz-user-select: هیچ؛ -webkit-user -انتخاب: هیچ‌کدام؛ انتخاب کاربر: هیچکدام. ) .canvas.draw ( حاشیه-رنگ: #3C0؛ .canvas .inner (موقعیت: نسبی؛) .canvas .point (عرض: 1px؛ ارتفاع: 1px؛ پس زمینه رنگ: #fff؛ حاشیه: 1px جامد #000 سرریز: موقعیت: مطلق; 8px word-wrap: break-word;
در جاوا اسکریپت، در طول فرآیند نوشتن، من از کتابخانه رزمی خودم استفاده کردم، بنابراین از توابع غیر استاندارد تعجب نکنید، اجازه دهید یک رویداد پایین‌آوردن ماوس را به #کانواس اضافه کنیم رندر می شود و مختصات آن ثبت می شود.

Var addPoint = function(e)( var e = _.getEvent(e)، offset = _.getOffset(nodes["canvas"])، x = e.clientX + _.getDocScrollLeft() - offset، y = e. clientY + _.getDocScrollTop() - offset, node = nodes["canvas"].appendChild(_.node("div", ("class":"point"))); +"px"; node.style.left = x-1+"px"; ;
سپس تابعی می نویسیم که کد html نقشه ما را تولید می کند.

Var renderInfo = function())( var text; _.clearNode(nodes["info"]); nodes["info"].appendChild(_.node("span", " ")); };
) text += "">"; nodes["info"].appendChild(_.node("span"، text)); nodes["info"].appendChild(_.node("br")); ) ) nodes["info"].appendChild(_.node("span", "

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

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

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

برای اینکه تصویر کار کند، تقریباً کد HTML زیر را نوشتم:

این کد را می توان در فیلد پیام (با فشردن دکمه "منبع") یا در متن ... درج کرد.به هر حال، پست های دیگری در این زمینه وجود دارد:HTML چیست، "کد HTML تصاویر، "

پیوند تصویر» و غیره.

1. مختصات

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

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

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

Ctrl+R برای من جالب تر بود که شخص دیگری مختصات را محاسبه کند. برای انجام این کار راه اندازی می کنمام اس پینت

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

2. کد HTML

نقشه های ناوبری توسط برچسب مشخص می شوند تگ نقشه شامل برچسب ها می شود

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

— من به این شکل متوجه شدم: برای ایجاد یک نقشه ناوبری شما نیاز دارید:

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

— برچسب های نقشه

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

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

مطابق با موارد فوق)

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

• مستطیل "پروفایل"
• href="https://site/profile/" — آدرس صفحه نمایه
• shape="rect" - تعیین شکل "مستطیل".

coords = "235,61,472,117" - مختصات نقاط A (235,61) و C (472,117)

• چند ضلعی "خاطرات"
• href="https://site/blog" - آدرس صفحه خاطرات
• shape="poly" - تعیین شکل "چند ضلعی".

coords="235,118,362,118,474,152,457,207,229,146" - مختصات گوشه های چند ضلعی: نقاط D (235,118)، E (362,118)، F (474,152)، G (457,207) و H (457,207)

• دایره "درس های فتوشاپ"
• href="https://site/showjournal.php?journalid=2447247&keywordid=929323" — آدرس صفحه پست ها از بخش "آموزش های فتوشاپ"
• shape="circle" - تعیین شکل "دایره".

coords="551,198,65" — مختصات دایره: مرکز — نقطه Q (551,198) و شعاع — R=65

3. تمام کنید

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

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

اگر خطایی پیدا کردید، لطفاً قسمتی از متن را برجسته کرده و کلیک کنید Ctrl+Enter.

ولاد مرژویچ

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

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

نسخه مشتری نقشه تصویر

برای نشان دادن اینکه یک تصویر یک نقشه است، از ویژگی usemap تگ استفاده کنید .

مقدار پیوندی به شرح پیکربندی کارت است.

برگه 4

.

مقدار ویژگی نام این تگ باید با نام موجود در نقشه کاربری مطابقت داشته باشد.

برای تنظیم ناحیه فعال، که پیوندی به یک سند HTML است، از تگ استفاده کنید

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

شکل

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

alt

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

هماهنگی ها

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

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

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

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

برنج. 2. نقاط مختصات برای چند ضلعی

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

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

ایرادات

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

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

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

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

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

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

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

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

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

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

برش تصویر

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

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

رزومه