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