خرائط الملاحة. إنشاء الروابط في مناطق الصورة: خريطة الروابط الخرائط الرسومية html

بطاقة شعار

داخل الحاوية

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

إذا العلامة

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

لغة البرمجة: 3.2 | 4 / XHTML: 1.0 | 1.1

بناء الجملة

صفات

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

مثال

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

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

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

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

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

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

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

مثال 1: استخدام خريطة الصور

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

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

شكل

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

بديل

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

إحداثيات

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

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

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

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

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

href

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

فوائد خرائط الصور

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

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

عيوب

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

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

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

سهولة الاستخدام

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

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

خيارات بديلة

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

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

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

تقطيع الصورة

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

ملخص

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

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

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

تتكون خريطة الصورة من مناطق الصور والروابط المقابلة لها. يصف قسمًا من الصورة ويعين له علامة واحدة كرابط .

سمات العلامة

افتراضيًا، يتم قياس الإحداثيات بالبكسل.

أصل الإحداثيات هو الزاوية اليسرى العليا من الشاشة، أي.

أمثلة على أشكال مختلفة من مناطق خريطة الصورة

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

لاستخدام صورة كخريطة في علامة تحتاج إلى إدخال سمة إضافية com.usemap، والذي يحدد اسم خريطة الصورة. هذا الاسم مسبوق بعلامة "#".

مثال على استخدام خريطة الصورة

عند النقر فوق مناطق مختلفة من صورة معينة، يتغير لون النص المقابل.

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

ولإنجاز هذه المهمة، لا يمكننا الاستغناء عن ما يسمى بخرائط الملاحة.

لنفترض أن لدينا صورة مثل هذه:

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

أولاً، دعونا نحدد رسمنا ليس كصورة رسومية عادية، ولكن كخريطة تنقل، مع إعطاء هذا الرسم اسمًا فرديًا خاصًا بنا. ويتم ذلك باستخدام السمة com.usemapبطاقة شعار (أعتقد أنك لست بحاجة إلى التذكير بأن العلامة لديه السمة المطلوبة srcمما يدل على المسار إلى صورة معينة )

دعونا نسمي الرسم/الخريطة الخاصة بنا لوحة. سوف يبدو مثل هذا:

خريطة الاستخدام = "#لوحة">

لا تنس أن تضع العلامة وفقًا لقواعد بناء الجملة # علامات التجزئة أمام الاسم..

حسنًا، لنقم الآن بإنشاء خريطة ملاحية. يتم تحديده بواسطة العلامة الذي له صفة اسم- اسم .. هل ترى إلى أين سأذهب بهذا؟ حسنًا، كما خمنت بالفعل، سنشير على أساس الرسم الذي سنبني عليه خريطة الملاحة الخاصة بنا من خلال الإشارة إلى اسمها..

لنبدأ الآن بالإشارة للمتصفح إلى مناطق الصورة التي ستكون بمثابة روابط، وفي نفس الوقت سنكتب المسارات الانتقالية لهذه الروابط. يتم تولي هذه المهمة بواسطة العلامة ، فهو لا يتطلب علامة إغلاق، ويحتوي على السمات التالية التي سنعمل بها:

)
شكل- شكل منطقة الرسم التي ستكون بمثابة مرجع. وقد يكون له أحد المعاني الثلاثة:

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

إحداثيات- إحداثيات الشكل

منطقة مستطيلة

الآن تبدو خريطتنا كما يلي:

في الواقع، أصبح الزر المربع "الأخضر" يعمل الآن.

كما ترون من خلال الضغط عليه في هذا المثال:

Usemap = "#panel">

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

href = "primer1.html"- هنا أعتقد أن الأمر واضح، هذا هو المسار إلى المستند الذي يجب فتحه عند النقر على "الزر الأخضر".

نظرًا لأن الزر الخاص بنا مربع، والمربع، كما نعلم، هو مستطيل "عادي"، فإننا نخصص شكل منطقة الرسم إلى مستطيل الشكل = "مستقيم" .

والآن الجزء الممتع الإحداثيات = "15,15,82,82"- الإحداثيات.. بالنسبة للمستطيل يتم تحديدها بنقطتين وفقا لمبدأ "X1، Y1، X2، Y2" حيث X1، Y1 هي النقطة الأولى، وبالتالي X2، Y2 الثانية. تتم الإشارة إلى الإحداثيات بالبكسل. تبلغ أبعاد الرسم/الخريطة لدينا 300 × 100 بكسل، والبكسل العلوي الأيسر له إحداثيات X=0,Y=0، وأدنى بكسل على اليمين X=300,Y=100. إذا لم يكن الأمر واضحًا، فلنتعمق في الهندسة للصف الخامس..

نلقي نظرة على الصورة:

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

مضلع (مضلع).

دعونا نتعامل مع "الزر الأصفر"، وهو ممثل على شكل مثلث. من أجل تحديد منطقة "العمل" من الرسم لدينا، نقوم بتعيين السمة شكلمعنى بولي- المضلع الذي سيحدد هذه المنطقة كنوع من المضلع، حيث ستكون الإحداثيات المفصولة بفواصل هي رؤوسها، يمكن أن يكون هناك أي عدد تريده "X1،U1،X2،U2،X3،U3،X4، U4...X124,U124" الشكل المتكون من هذه النقاط ورؤوس الزوايا يمكن أن يبدو مثل أي مضلع، سواء كان منتظمًا أو غير منتظم. في حالتنا هناك ثلاث زوايا فقط، ولهذا فهو مثلث، وبالتالي سيتم إعطاء إحداثياته ​​من خلال ثلاثة أزواج من القيم “X1,Y1,X2,Y2,X3,Y3”

لذلك نكتب كل شيء معًا مثل هذا:

الشكل = "بولي" الإحداثيات = "148،15،185،82،110،82">

وهذه صورة توضح بوضوح من أين تأتي إحداثيات النقاط..

دائرة

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

هنا الرسم:

هنا مثال:

فلنضعه في الاعتبار..

الآن القليل عن ما يُنصح به أيضًا باستخدام خريطتنا قبل "تثبيتها" على أي صفحة.

دعونا نحدد الأبعاد الثابتة لخريطة الصورة بالسمات عرضو ارتفاع

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

دعونا نتخلص من الإطار الحدودي... فلنفعل ذلك الحدود = "0".. (حسنًا، إذا كنت تفضل ذلك مع الحدود، فلا داعي للقيام بذلك.. أنا لا أصر..)

في النهاية يجب أن يبدو الأمر كالتالي:

العرض = "300" الارتفاع = "100" الحدود = "0" alt = " لوحة التحكم" title="لوحة التحكم"> !}

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

في بعض الأحيان يكون من المناسب تشكيل منطقة "العمل" للصورة عن طريق "خلط" الأشكال المختلفة.

لنفترض أن الزر التالي يبدو كما يلي:

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

في هذا المثال، يمكنك تحديد شكلين مستطيلين مستقيموالدائرة دائرةكما هو موضح في الصورة:

وفي الكود أشر إلى المسار إلى نفس المستند:

"ليست منطقة"

دعونا نلقي نظرة على مثال... لنفترض أنك بحاجة إلى إنشاء زر مثل هذا:

وماذا عن الثقب الموجود فيه؟

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

سيتم تحديد الخريطة بمنطقتين، دائرة غير نشطة دائرةومنطقة مستطيلة نشطة مستقيموكما هو موضح في الرسم، لها الإحداثيات التالية:

كما ذكرنا سابقًا، عندما تتقاطع المناطق، سيتم إعطاء الأولوية القصوى للمنطقة الموجودة داخل العلامة في الكود المدرجة أولا

لذلك سيبدو المثال كالتالي:

الخريطة على الخادم.

مقتطفات من الدليل (سمات العلامة ):

com.usemap- الصورة عبارة عن خريطة تنقل من جانب العميل.
com.ismap- الصورة عبارة عن خريطة تنقل على الخادم.

غير واضح؟ ثم دعونا نقرأ...

مع السمة com.usemapيبدو أننا اكتشفنا ذلك.. انظر، المستخدم (العميل)، بعد أن فتح صفحتك، بالتزامن مع كل المحتوى الآخر، يقوم بتحميل "على جانبه" كلاً من الرسم نفسه وخريطة التنقل الخاصة به، وكل شيء تتم معالجتها بواسطة متصفحه.

وهنا السمة com.ismapبطاقة شعار يخبر المتصفح أن هناك خريطة تنقل لهذه الصورة على الخادم، حسنًا، حيث نشرت أو ستنشر موقع الويب الخاص بك (اقرأ المقال :). والآن، عندما يقوم الزائر (العميل) بالنقر على أي منطقة من الصورة بها هذه السمة، سيتذكر المتصفح إحداثيات هذه النقرة ويرسلها إلى الخادم، حيث سيقوم برنامج خاص بمعالجة هذه البيانات وإعادة توجيه المستخدم إلى العنوان المشار إليه في الخريطة على الخادم، وفقًا لإحداثيات النقطة المستلمة من متصفح العميل.

هو مكتوب مثل هذا:

أين عنوان خريطة التنقل على أي موقع .. مستضاف على خادم أو آخر ..

سمة اسم العنصر

سمات العلامة نشير إلى إحداثيات المنطقة (سمة الإحداثيات) ونوع الشكل الذي نحتاجه (سمة الشكل):

مثال الاستخدام

دعونا نلقي نظرة على مثال حيث عند النقر على شكل معين في صورة واحدة، فإنك تنتقل إلى صفحات ويب مختلفة تصف هذه الأشكال (روابط إلى ويكيبيديا):

اختر الشكل:

"4 أشكال متاحة للاختيار" >

وبالترتيب، ما فعلناه في هذا المثال:

• تم نشر صورة (tag )، والتي سنستخدمها لاحقًا عند إنشاء خريطة الصور. في سمة usemap، يجب عليك تحديد اسم صورة الخريطة التي سنستخدمها في العنصر
• ضع صورة الخريطة (tag
• ضع أربع علامات ، والتي تحدد المناطق التفاعلية في صورة الخريطة:
  • أولاًنحن نسأل منطقة مستطيلة(سمة الشكل ذات القيمة "المستقيم")، فهي تتوافق مع الخاصية الخاصة بنا أولاًصورة ( الأولينالقيم تتوافق مع الزاوية اليسرى العليا، ما يلي اثنينتحدد القيم الزاوية اليمنى العلوية والسفلية).
  • ثانيةيشير منطقة مستديرة(سمة الشكل ذات القيمة "دائرة")، فهي تتوافق مع الخاصية الخاصة بنا ثانيةصورة ( أولاًالقيمة تتوافق مع إحداثيات المحور سوالثاني على طول المحور ذ، والثالث يحدد نصف القطر).
  • بخصوص الثلثينو الشكل الرابعثم يتم تجميعها وفقًا لهذا المبدأ منطقة متعددة الأضلاع(سمة الشكل بقيمة "بولي"). يمكنك تحديد عدد النقاط المطلوبة في الصورة، وحساب إحداثيات هذه النقاط (المحرر الرسومي) وتحديدها بالترتيب الذي يمكن للمتصفح من ربطها بخط واحد. باستخدام المثلث كمثال (الصورة الثالثة): أولاًالنقطة (الإحداثيات سو ذالرؤوس)، ثانيةالنقطة (الإحداثيات سو ذالزاوية اليسرى السفلى) و ثالثالنقطة (الإحداثيات سو ذالزاوية اليمنى السفلى).

ألفت انتباهكم إلى أنه إذا كانت العلامة تحتوي على المهمة العملية رقم 26.

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