ما يجب معرفته
• استخدم صورة بالحجم الطبيعي لن يقوم المتصفح بتغيير حجمها. ستحتاج أيضًا إلى محرر صور و HTML أو محرر نصوص.
• عند إدراج الصورة ، أضف سمة إضافية لتحديد إحداثيات الخريطة.
• على سبيل المثال:
تشرح هذه المقالة كيفية إنشاء خرائط الصور باستخدام علامات HTML بدلاً من محرر خريطة الصور. سيُظهر لك معظم محرري الصور إحداثيات الماوس عندما تشير إلى الصورة ، وهي كل البيانات التي تحتاجها للبدء في خرائط الصور.
إنشاء خريطة صورة
لإنشاء خريطة صورة ، حدد أولاً صورة ستكون بمثابة أساس الخريطة. يجب أن تكون الصورة "بالحجم الطبيعي" - أي يجب ألا تستخدم صورة كبيرة جدًا بحيث يقوم المتصفح بتحجيمها.
عند إدراج الصورة ، ستضيف سمة إضافية تحدد إحداثيات الخريطة:
عند إنشاء خريطة صورة ، فأنت تقوم بإنشاء منطقة قابلة للنقر على الصورة ، لذلك يجب أن تتماشى إحداثيات الخريطة مع ارتفاع وعرض الصورة التي حددتها. تدعم الخرائط ثلاثة أنواع مختلفة من الأشكال:
- مستطيل أو شكل رباعي الجوانب
- مضلع أو شكل متعدد الجوانب
- دائرة-دائرة
لإنشاء المناطق ، يجب عزل الإحداثيات المحددة التي تنوي تعيينها. قد تتكون الخريطة من منطقة محددة أو أكثر في الصورة ، والتي عند النقر عليها ، تفتح ارتباطًا تشعبيًا جديدًا.
بالنسبة للمستطيل ، يمكنك فقط تعيين الزوايا العلوية اليسرى والسفلية اليمنى. يتم سرد جميع الإحداثيات على أنها x ، y (فوق ، أعلى). لذلك ، بالنسبة للركن الأيسر العلوي 0 و 0 والزاوية اليمنى السفلية 10 و 15 ، اكتب 0 ، 0 ، 10 ، 15. ثم تقوم بإدراجه في الخريطة:
بالنسبة إلى المضلع ، يمكنك تعيين كل من إحداثيات x و y بشكل منفصل. يقوم مستعرض الويب تلقائيًا بتوصيل آخر مجموعة من الإحداثيات مع الأولى ؛ أي شيء داخل هذه الإحداثيات هو جزء من الخريطة.
تتطلب أشكال الدائرة إحداثيين فقط ، مثل المستطيل ، ولكن بالنسبة للإحداثي الثاني ، فإنك تحدد نصف القطر أو المسافة من مركز الدائرة. لذلك ، بالنسبة لدائرة مركزها 122 ، 122 ونصف قطرها 5 ، اكتب 122 ، 122 ، 5:
يمكن تضمين جميع المناطق والأشكال في نفس علامة الخريطة:
اعتبارات
خرائط الصور كانت أكثر شيوعًا في عصر الويب 1.0 في تسعينيات القرن الماضي حتى أوائل العقد الأول من القرن الحادي والعشرين ، غالبًا ما شكلت خرائط الصور أساس التنقل في موقع الويب. سيقوم المصمم بإنشاء نوع من الصور للإشارة إلى عناصر القائمة ، ثم تعيين الخريطة.
تشجع الأساليب الحديثة التصميم سريع الاستجابة واستخدام أوراق الأنماط المتتالية للتحكم في وضع الصور والارتباطات التشعبية على الصفحة.
على الرغم من أن علامة الخريطة لا تزال مدعومة في معيار HTML ، إلا أن استخدام الأجهزة المحمولة ذات عوامل الشكل الصغيرة قد يؤدي إلى مشاكل أداء غير متوقعة في خرائط الصور. بالإضافة إلى ذلك ، مشاكل عرض النطاق الترددي أو الصور المكسورة تناقش قيمة خريطة الصورة.
لذا ، لا تتردد في الاستمرار في استخدام هذه التكنولوجيا المستقرة والمفهومة جيدًا مع العلم أن هناك بدائل أكثر كفاءة حاليًا رائجة مع مصممي الويب.
