HTML - الدرس 15. خرائط الملاحة - الخريطة

يمكن أن تكون خرائط الصور هذه من جانب العميل أو من جانب الخادم. يتم تخزين روابط خريطة العميل في المستند نفسه، وبالنقر فوق الماوس، يحدد المتصفح نفسه المنطقة التي تنتمي إليها إحداثيات هذه النقطة وينتقل إلى الرابط المطلوب.

مع إصدار الخادم، يتم إرسال هذه الإحداثيات أولاً إلى الخادم، ومعالجتها هناك بواسطة برنامج خاص، وبعد ذلك فقط يتم اتباع الرابط. ومن الواضح أن خرائط التنقل الخاصة بالعميل هي الأفضل. سوف ننظر فيها.

على سبيل المثال، لنتخيل أننا متجر أدوات منزلية وفي رأس موقعنا لدينا الصورة التالية:

دعونا نصنع منها خريطة ملاحية، على سبيل المثال. عند الضغط على الثلاجة، سيتم إعادة توجيهك إلى صفحة مخصصة للثلاجات (مع الموديلات والأوصاف والأسعار)، عند الضغط على المكنسة الكهربائية والغسالة، سيتم نقلك إلى الصفحات المقابلة لها.

للقيام بذلك، نحتاج إلى وصف المناطق في هذه الصورة التي ستكون روابط. يتم استخدام العلامات لوصف مثل هذه المناطق مع معلمة واحدة فقط اسم، والذي يحدد اسم خريطة الارتباط ثم يتم استخدامه للارتباط بهذه الخريطة.

• شكل- يحدد شكل المنطقة، ويمكن أن يأخذ القيم التالية:
  • مستقيم- المساحة على شكل مستطيل،
  • دائرة- المساحة على شكل دائرة،
  • بولي- المساحة على شكل مضلع،
  • تقصير- المنطقة كلها.
• com.cootds- يحدد إحداثيات منطقة منفصلة:
  • ل مستقيمتم تحديد إحداثيات الزاويتين العلوية اليسرى والسفلية اليمنى للمستطيل،
  • ل دائرةيتم تحديد إحداثيات مركز الدائرة ونصف قطرها،
  • ل بولييتم تحديد إحداثيات رؤوس المضلع بالترتيب المطلوب.
• href- يحدد عنوان الارتباط.
• هدف- يستخدم عند استخدام الإطارات ويشير إلى الإطار الذي يجب تحميل الصفحة فيه.
• بديل- تعيين نص بديل للمنطقة.

لهذه الأغراض، عادة ما يتم استخدام بعض البرامج، على سبيل المثال، Image Ready، الذي يحتوي على أداة خاصة لتحديد المناطق ويقوم تلقائيًا بإنشاء أوصاف لهذه المناطق. لم يتم تضمين النظر في تشغيل هذه البرامج في دورة HTML، لذلك سنقوم هنا بتعيين الإحداثيات "بالعين". ألق نظرة على صورتنا مرة أخرى:

عرض صورتنا هو 738 بكسل وارتفاعها 192 بكسل. لنرسم خطوطًا على طول حدود مناطقنا ونحدد الإحداثيات تقريبًا. نحن الآن جاهزون لإضافة هذه المعلمات إلى علاماتنا .

الآن أصبحت مناطقنا روابط (إذا قمت بتحريك مؤشر الماوس، فإنه يتحول إلى كف). لا توجد صفحات في هذا الموقع مخصصة للثلاجات، وبالتالي فإن الروابط ستأخذك إلى نفس الصفحة، لكن إذا قمت بإنشاء الصفحات التي تريدها، فإن الضغط على المنطقة سينقلك إلى الصفحة.

وبهذا نختتم دروسنا. لقد أصبحت على دراية بجميع إمكانيات لغة HTML. لتعزيز مهاراتك، راجع الدرسين إنشاء موقع ويب - التخطيط الجدولي.

أخيرا، يجب أن أقول أن هناك عنصرين رائعين آخرين في HTML - العلامات

علامة

داخل الحاوية

• عنصر واحد أو أكثر< >. لا تحتوي هذه العناصر على محتوى ولكنها تحدد المناطق الهندسية لخريطة الصورة والارتباطات التشعبية المرتبطة بكل منطقة
• محتوى مستوى الكتلة. يجب أن يتضمن هذا المحتوى< >والتي تحدد المناطق الهندسية للخريطة والروابط المرتبطة بكل منطقة

إذا العلامة

إذا تداخلت المناطق، فإن العنصر الذي يحدد المنطقة والذي يظهر مسبقًا في المستند له الأسبقية.

HTML: 3.2 | 4 / XHTML: 1.0 | 1.1

بناء الجملة

صفات

فصل	يحدد اسم الفئة المراد استخدامها
دير	يحدد اتجاه الشخصيات: لتر - من اليسار إلى اليمين رتل - من اليمين إلى اليسار
بطاقة تعريف	معرف فريد
لانج	يحدد لغة الوثيقة المعروضة
اسم	اسم بطاقة الصورة. تُستخدم كقيمة لمعلمة usemap الخاصة بالعلامة
com.onblur	العنصر يفقد التركيز
عند النقر	انقر على عنصر
com.ondblclick	انقر مرتين على عنصر
com.onfocus	عنصر الحصول على التركيز
عند الضغط على الزر لأسفل	الضغط على مفتاح عندما يكون العنصر محل تركيز
com.onkeypress	الضغط على المفتاح وتحريره عندما يكون هناك تركيز على أحد العناصر
com.onkeyup	تحرير المفتاح الذي تم الضغط عليه مسبقًا عندما يكون العنصر محل تركيز
com.onmousedown	النقر على زر الماوس عندما يكون هناك تركيز على العنصر
com.onmousemove	حركة مؤشر الماوس عندما يكون هناك تركيز على العنصر
onmouseout	تحريك مؤشر الماوس بعيدًا عن العنصر
com.onmouseover	وضع مؤشر الفأرة على عنصر ما
com.onmouseup	تحرير زر الماوس الذي تم الضغط عليه مسبقًا عندما يكون هناك تركيز على أحد العناصر
أسلوب	يحدد ورقة الأنماط المضمنة
عنوان	تلميح الأدوات

مثال

• علامة الإغلاق مطلوبة ()
• سمة المعرف مطلوبة
• يوصى بتوفير بديل نصي لبطاقة الرسومات في الحالات التي لا تتوفر فيها الرسومات أو لا يستطيع المستخدم الحصول عليها
• لا يُنصح باستخدام خريطة الصور كوسيلة تنقل رئيسية، نظرًا لضعف الدعم في المتصفحات القديمة والمتصفحات الصوتية

علامة — عنصر مستوى الكتلة، أي يبدأ محتوى العلامة دائمًا بسطر جديد. تتم إضافة فاصل أسطر أيضًا بعد العلامة.

مرحبًا. لقد أتيحت لي الفرصة مؤخرًا للتعامل مع ميزة html محددة مثل خريطة الصورة. لأكون صادقًا، لم تتح لي الفرصة لاستخدامه كثيرًا، وبعد ذلك، عادةً ما يتم كل شيء في مناطق مستطيلة الشكل. لكن هذه لم تكن نفس الحالة. كانت المهمة هي نشر روابط لمناطق فردية من الصورة، والتي كانت عبارة عن خريطة للبلد، ولسوء الحظ، لم يكن هناك شك في وجود أي لوحات قماشية أو ملفات SVG. أتش تي أم أل فقط المتشددين فقط! إذن، تم تعيين المهمة، وتم تنشيط Google، ويمكننا البدء.

نظرية

• إحداثيات- إحداثيات منطقة الاختيار
• href- الرابط الذي ستنتقل إليه عند النقر فوق المنطقة
• com.nohref- يشير إلى أن المنطقة لا تحتوي على رابط
• شكل- استمارة الاختيار
  • دائرة- منطقة الاختيار على شكل دائرة
  • تقصير- تحديد منطقة الصورة بأكملها
  • بولي- منطقة التحديد على شكل مضلع
  • مستقيم- منطقة التحديد على شكل مستطيل
• هدف- يحدد مكان فتح الرابط

نظرًا لأن منطقة التحديد الخاصة بي يجب أن تكون متعددة الأضلاع، فإننا نحدد قيمة سمة الشكل، وعلامة المنطقة، كمنطقة متعددة الأضلاع. في هذا الوضع، تتم الإشارة إلى إحداثيات النقطة بالنسبة إلى الزاوية اليسرى العليا، مفصولة بفواصل - x,y. يتم أيضًا فصل الفواصل بين الفترات، مما يسبب ارتباكًا في البداية عند قراءة مثل هذا الرمز.

نكتب الطلاء

أولاً، دعونا نجهز التخطيط:

النص (الهامش: 0؛ المساحة المتروكة: 20 بكسل؛ عائلة الخط: Arial، Helvetica، sans-serif؛) img (الحدود: لا شيء؛ المخطط التفصيلي: لا شيء؛ العرض: كتلة؛ -moz-user-select: لا شيء؛ -webkit-user -حدد: لا شيء؛ حدد المستخدم: لا شيء) .canvas (الحدود: 2 بكسل صلب #333؛ الحشو: 2 بكسل؛ الهامش السفلي: 16 بكسل؛ العرض: كتلة مضمنة؛ // العرض: مضمن؛ // التكبير: 1؛ ) .canvas.draw ( لون الحدود: #3C0; ) .canvas .inner ( الموضع: نسبي؛ ) .canvas .point ( العرض: 1px; الارتفاع: 1px; لون الخلفية: #fff; الحدود: 1px صلب #000 الفائض: مخفي؛ الموضع: مطلق؛ .bar (الهامش السفلي: 16 بكسل؛) .info (لون الخلفية: #FCFCFC؛ الحد: 1 بكسل منقط #CCC؛ حجم الخط: 12 بكسل؛ نمط الخط: مائل؛ الحشو: 8 بكسل؛
في جافا سكريبت، كل شيء بسيط للغاية سيتم تقديمها وسيتم تسجيل إحداثياتها.

var addPoint = function(e)( var e = _.getEvent(e), offset = _.getOffset(nodes["canvas"]), x = e.clientX + _.getDocScrollLeft() - offset, y = e. clientY + _.getDocScrollTop () - الإزاحة، العقدة = العقد["canvas"].appendChild(_.node("div", ("class":point"))); العقدة.style.top = y-1 +"px";node.style.left = x-1+"px"; ;
بعد ذلك، سنكتب وظيفة من شأنها إنشاء كود html لخريطتنا.

var renderInfo = function())( var text; _.clearNode(nodes["info"]); العقد["info"].appendChild(_.node("span", " ")); };
) text += "">"; العقد["info"].appendChild(_.node("span", text)); العقد["info"].appendChild(_.node("br")); ) ) العقد["info"].appendChild(_.node("span", "

لنضع إطارًا لكل شيء في الفصل الدراسي، وبعض الوظائف المساعدة، هذا كل شيء. آمل أن تكون هذه الأداة مفيدة لشخص ما.

"لقد قمت بإنشاء قالب لوضع روابط لصفحات ويب مختلفة ("") في مناطق معينة منه

الآن إذا نقرت على الأشكال التي تحتوي على نقوش، فسيتم فتح الصفحات المقابلة: الملف الشخصي أو المذكرات أو جميع المشاركات من قسم "دروس الفوتوشوب" (انتبه! بعد نقل المدونة إلى WordPress وإعادة صياغتها، الروابط لا تعمل! ولكن يبقى الدرس ذو صلة!)

لكي تعمل الصورة، قمت بكتابة كود HTML التالي تقريبًا:

يمكن إدراج هذا الرمز في حقل الرسالة (مع الضغط على زر "المصدر") أو في النقش...بالمناسبة هناك مشاركات أخرى حول هذا الموضوع: "ما هو HTML"، "رمز HTML للصور"، "

رابط الصورة" وهكذا.

1. الإحداثيات

لتكوين الكود أعلاه، تذكرت القليل من الهندسة :)
نظام الإحداثيات: المحور X - من الأعلى إلى الأسفل، المحور Y - من اليسار إلى اليمين
لتعيين إحداثيات الشكل، عليك ضبط:
- مربع (أو مستطيل)، جوانبه متوازية مع المحاور - إحداثيات زاويتين متقابلتين - X1، Y1 وX2، Y2
- المضلع - إحداثيات جميع الزوايا

— الدائرة — إحداثيات المركز ونصف القطر. في حالتي، اتضح أنني بحاجة إلى الإحداثيات- بالنسبة لارتباط "الملف الشخصي" (المستطيل)، النقاط D، E، F، G، H - لارتباط "اليوميات" (المضلع)، Q والطول R - لارتباط "دروس الفوتوشوب" (دائرة). تم تمييز كل هذه الأرقام الموجودة في كود HTML أعلاه باللون الأحمر.

بالإضافة إلى ذلك، تحتاج إلى معرفة حجم الصورة بالبكسل (اللون الأخضر) ليست هناك حاجة إلى دقة خاصة، لذا يمكنك تحديد الإحداثيات باستخدام "المسطرة" في Photoshop - لاستدعائها، انقر فوق

السيطرة + ر لقد كان أكثر إثارة للاهتمام بالنسبة لي أن أطلب من شخص آخر حساب الإحداثيات. للقيام بذلك أطلقإم إس الرسام

(ابدأ - كافة البرامج - الملحقات - الرسام) وافتح الرسم فيه. عند تحريك المؤشر فوق النقاط المطلوبة، تظهر إحداثياتها في اللوحة السفلية، والتي أكتبها بعناية

2. كود HTML

يتم تحديد خرائط التنقل بواسطة العلامة تتضمن علامة الخريطة علامات

والتي تحدد المناطق الهندسية لخريطة الرسم والروابط المرتبطة بها.

— هذه هي الطريقة التي اكتشفت بها الأمر: لإنشاء خريطة تنقل تحتاج إلى:

— العلامات مع وصف الصورة

— علامات الخريطة

علامات المنطقة

• في حالتي، تبين أن القيم هي: العرض="640" الارتفاع="367"
• - أبعاد الصورة
• src="https://site/f02c73a3cd94.jpg" - عنوان الصورة على الموقع خريطة الاستخدام = "#صورة" — الاسم التقليدي لخريطة الصورة
• (يمكن أن يكون أي) اسم الخريطة="صورة" (- اسم البطاقة بالكامل

يتوافق مع ما سبق)

تتوافق قيم مناطق الارتباط - href - هدف الارتباط، والشكل - شكل المنطقة، والإحداثيات - مع ثلاث مناطق في الصورة.

• مستطيل "الملف الشخصي"
• href="https://site/profile/" — عنوان صفحة الملف الشخصي
• الشكل = "مستقيم" - تسمية الشكل "المستطيل".

الإحداثيات = "235,61,472,117" — إحداثيات النقطتين A (235,61) وC (472,117)

• المضلع "مذكرات"
• href="https://site/blog" - عنوان صفحة اليوميات
• الشكل = "بولي" - تسمية الشكل "المضلع".

coords = "235,118,362,118,474,152,457,207,229,146" - إحداثيات زوايا المضلع: النقاط D (235,118)، E (362,118)، F (474,152)، G (457,207) وH (229,146)

• دائرة "دروس الفوتوشوب"
• href="https://site/showjournal.php?journalid=2447247&keywordid=929323" - عنوان صفحة المنشورات من قسم "برامج Photoshop التعليمية"
• الشكل = "الدائرة" - تسمية الشكل "الدائرة".

الإحداثيات = "551,198,65" — إحداثيات الدائرة: المركز — النقطة Q (551,198) ونصف القطر — R=65

3. إنهاء

لقد استبدلت جميع القيم التي تم الحصول عليها في كود HTML "النظام" لخريطة صورة التنقل وحصلت على ما يلي:

هذا هو الرمز الذي "يتحول" عند استخدامه إلى صورة بها مناطق الارتباط.

إذا وجدت خطأ، يرجى تحديد جزء من النص والنقر عليه السيطرة + أدخل.

فلاد ميرزيفيتش

تسمح لك خرائط الصور بربط الروابط بمناطق مختلفة من نفس الصورة. تم تنفيذها في اثنين خيارات مختلفة - الخادم والعميل. عند استخدام خيار الخادم، يرسل المتصفح طلبًا إلى الخادم للحصول على عنوان الرابط المحدد وينتظر الرد بالمعلومات المطلوبة. يتطلب هذا النهج وقتًا إضافيًا لانتظار النتيجة و ملفات منفصلةلكل بطاقة صورة.

في إصدار العميل، توجد الخريطة في نفس مستند HTML الذي يحتوي على رابط الصورة.

نسخة العميل من خريطة الصورة

للإشارة إلى أن الصورة عبارة عن خريطة، استخدم سمة usemap الخاصة بالعلامة .

القيمة عبارة عن رابط لوصف تكوين البطاقة.

علامة التبويب 4

.

يجب أن تتطابق قيمة سمة الاسم لهذه العلامة مع الاسم الموجود في خريطة الاستخدام.

لتعيين المنطقة النشطة، وهي رابط لمستند HTML، استخدم العلامة

سمات علامة المنطقة

شكل

يحدد شكل المنطقة النشطة. يمكن أن يكون الشكل على شكل دائرة (دائرة)، مستطيل (مستقيم)، مضلع (بولي).

بديل

يضيف نصًا بديلاً لكل منطقة. يعمل فقط كتعليق على الرابط، حيث لا يتم عرضه على الشاشة.

إحداثيات

يضبط إحداثيات المنطقة النشطة. يتم قياس الإحداثيات بالبكسل من الزاوية اليسرى العليا من الصورة، وهو ما يتوافق مع القيمة 0.0. الرقم الأول هو الإحداثي الأفقي، والثاني هو الإحداثي الرأسي. تعتمد قائمة الإحداثيات على شكل المنطقة.

بالنسبة للدائرة، يتم تحديد ثلاثة أرقام - إحداثيات مركز الدائرة ونصف القطر.

بالنسبة للمستطيل، إحداثيات الزاويتين العلوية اليسرى والسفلية اليمنى.

بالنسبة للمضلع، يتم تحديد إحداثيات رؤوسه (الشكل 2).

أرز. 2. تنسيق النقاط للمضلع

1. تسمح لك الخرائط بتعيين أي شكل لمنطقة الارتباط. وبما أن الصور مستطيلة بطبيعتها، فإنه لا يمكن إنشاء رابط رسومي لشكل معقد، على سبيل المثال، للإشارة إلى منطقة جغرافية، دون خرائط الصور. كقاعدة عامة، في الموضوعات الجغرافية، يتم استخدام خرائط الصور في أغلب الأحيان.

2. يعد العمل باستخدام ملف واحد أكثر ملاءمة - فلا داعي للقلق بشأن ضم الأجزاء الفردية ويمكن وضع الرسم بسهولة في المكان المناسب.

عيوب

1. لا يمكنك تعيين تلميح الأدوات والنص البديل للمناطق الفردية. يتيح لك النص البديل الحصول على معلومات نصيةحول الرسم عند تعطيل تحميل الصور في المتصفح. نظرًا لأنه يتم تحميل الصور بعد أن يتلقى المتصفح معلومات عنها، فإن النص البديل للصورة يظهر مسبقًا. وأثناء تحميله، سيتم استبدال النص بصورة.

بالنسبة لخرائط الصور، تعد هذه الميزة ذات صلة، لأنه إذا قمت بإيقاف تشغيل عرض الصور، وهو ما يفعله العديد من المستخدمين، فسوف ينتهي بك الأمر إلى رؤية مستطيل واحد فارغ فقط.

2. مع الشكل المعقد لمنطقة الارتباط، يزداد مقدار تعليمات HTML البرمجية. يتم تقريب الكفاف بواسطة مجموعة من المقاطع المستقيمة؛ لكل نقطة من هذا المقطع، يجب تحديد إحداثيتين، ويمكن أن يكون العدد الإجمالي لهذه النقاط كبيرًا جدًا. من أجل العدالة، تجدر الإشارة إلى أن النماذج المعقدة هي حالة خاصة ونادرا ما تستخدم.

3. باستخدام بطاقات الصور، لا يمكنك إنشاء تأثيرات متنوعة متاحة عند قص صورة واحدة إلى أجزاء: تأثير التدحرج، والرسوم المتحركة الجزئية، والتحسين الفردي للصور لتحميلها بسرعة.

سهولة الاستخدام من وجهة نظر راحة المستخدم، تتمتع خرائط الصور بميزة واحدة فقط - روابط ذات أشكال مختلفة. وهذا يضيف الوضوح إلى عرض المعلومات - فنحن لا نقتصر على الشكل المستطيل للرابط ويمكننا استخدام روابط ذات تكوين معقد لأغراضنا الخاصة. في جميع النواحي الأخرى، فهي غير مفيدة - الروابط النصية العادية أكثر إفادة ولا تخشى إيقاف عرض الصور في المتصفح. والحقيقة هي أن صورة واحدة يتم تحميلها بشكل أسرع من نفس الصورة، ولكن يتم تقطيعها إلى أجزاء وحفظها كمجموعة، من السهل الحصول عليه. يمكن تقليل كل ملف من هذه الملفات النهائية باستخدام إعدادات التحسين الفردية. ونتيجة لذلك، فإن الحجم الإجمالي لجميع الأجزاء سوف يستغرق مساحة أقل من صورة واحدة. لا ينبغي لأحد أن يستبعد العامل النفسي - حيث يبدو للشخص أن مجموعة من الصور الصغيرة يتم تحميلها بشكل أسرع من صورة واحدة كبيرة.

العيب الرئيسي للخرائط هو عدم وجود حدود واضحة للروابط. لذلك، يجب إبراز هذه الحدود باستخدام وسائل مختلفة موجودة بالفعل في الصورة. إذا لم يتم تحميل الصورة لسبب ما، يصبح فهم مجموعة الروابط مشكلة كبيرة.

خيارات بديلة

ليست هناك دائمًا حاجة ملحة لاستخدام خرائط الصور، لذا يجب ملاحظة أن هناك خرائط أخرى الخيارات الممكنةاستكمال المهمة المعينة.

باستخدام فلاش

يمكنك إنشاء مناطق ارتباط مختلفة في مقاطع فيديو Flash باستخدام الميزات رسومات المتجهات. بفضل إمكانياته الواسعة، يمكنك إنشاء قوائم مذهلة وملاحة في Flash. ولكن هنا أيضاً لا بد من الحذر حتى لا تضيع الغابة من أجل الأشجار.

تقطيع الصورة

هذه هي واحدة من الوسائل الشعبية في التصميم. في هذه الحالة، يتم قطع صورة واحدة باستخدام برامج خاصةإلى أجزاء يتم تجميعها معًا في النهاية، مما يخلق وهم الصورة الكاملة. على الرغم من أن مناطق القطع يمكن أن تكون مستطيلة فقط، إلا أن هذا يكفي في معظم الحالات لإنشاء الروابط.

لكل جزء، يمكنك تحديد تنسيق الرسم المناسب الذي سيتم حفظه به، ومعلمات التحسين، وإضافة نص بديل. بعد ذلك، حتى مع تعطيل عرض الصور، ستكون حدود المناطق والنص الذي يحل محل الصورة مرئية بوضوح.

سيرة ذاتية