فوائد وعيوب استخدام خرائط الصور
كانت هناك نقطة في تاريخ تصميم الويب حيث استخدم العديد من المواقع ميزة تعرف باسم "خرائط الصور". هذه قائمة بالإحداثيات المرفقة بصورة معينة على الصفحة. تعمل هذه الإحداثيات على إنشاء مناطق ارتباط تشعبي على تلك الصورة ، إضافة أساسية إلى "النقاط الساخنة" إلى رسم ، يمكن ترميز كل منها لربطها بأماكن مختلفة. وهذا يختلف كثيرًا عن إضافة علامة رابط إلى صورة ، مما قد يؤدي إلى أن يصبح الرسم بالكامل رابطًا كبيرًا لوجه واحد.
أمثلة - تخيل وجود ملف رسومي مع صورة للولايات المتحدة. إذا كنت تريد أن تكون كل ولاية "قابلة للنقر" حتى ينتقلوا إلى صفحات حول هذه الحالة المحددة ، فيمكنك القيام بذلك باستخدام خريطة صورة. وبالمثل ، إذا كان لديك صورة لفرقة موسيقية ، فيمكنك استخدام خريطة صورة لجعل كل عضو فردي قابل للنقر إلى صفحة لاحقة حول هذا العضو في النطاق.
هل خرائط الصور سليمة مفيدة؟ هم بالتأكيد كانوا ، لكنهم خسروا من على شبكة الإنترنت اليوم. هذا ، على الأقل جزئيًا ، لأن خرائط الصور تتطلب إحداثيات محددة للعمل. يتم تصميم المواقع اليوم بحيث تكون مستجيبة وصورًا بحجم يعتمد على حجم الشاشة أو الجهاز. وهذا يعني أن الإحداثيات التي تم ضبطها مسبقًا ، وهي طريقة عمل خرائط الصور ، تنهار عندما يتغير حجم الموقع ويتغير حجم الصور. ولهذا السبب نادرًا ما يتم استخدام خرائط الصور في مواقع الإنتاج حاليًا ، ولكن لا يزال هناك مزايا للعروض التوضيحية أو المثيلات التي تفرض فيها حجم الصفحة.
هل تريد معرفة كيفية إنشاء خريطة صورة ، وتحديدًا كيفية القيام بذلك باستخدام Dreamweaver؟ . العملية ليست صعبة بشكل خاص ، ولكنها ليست سهلة ، لذلك يجب أن يكون لديك بعض الخبرة قبل أن تبدأ.
ابدء
هيا بنا نبدأ. الخطوة الأولى التي يتعين عليك اتخاذها هي إضافة صورة إلى صفحة الويب الخاصة بك. ستنقر بعد ذلك على الصورة لتمييزها. من هناك ، عليك الانتقال إلى قائمة الخصائص (والنقر فوق أحد أدوات الرسم الثلاث الساخنة: المستطيل ، الدائرة أو المضلع. لا تنس تسمية صورتك ، والتي يمكنك القيام بها في شريط الخصائص. يمكنك تسمية أي شيء تريده ، استخدم "الخريطة" كمثال.
الآن ، ارسم الشكل الذي تريده على صورتك باستخدام إحدى هذه الأدوات. إذا كنت بحاجة إلى بقع مستطيلة ، فاستخدم المستطيل. نفسه بالنسبة للدائرة. إذا كنت تريد المزيد من أشكال النقاط الفعالة المعقدة ، فاستخدم المضلع. هذا ما ستستخدمه على الأرجح في مثال الخريطة الأمريكية ، لأن المضلع سيسمح لك بإسقاط النقاط وإنشاء أشكال معقدة جدًا وغير منتظمة على الصورة.
في نافذة الخصائص لنقطة الاتصال ، اكتب أو تصفح إلى الصفحة التي يجب أن تصل إليها نقطة الاتصال. هذا هو ما خلق تلك المنطقة القابلة للربط. استمر في إضافة النقاط الفعالة حتى تكتمل الخريطة وتمت إضافة جميع الروابط التي تريد إضافتها.
بمجرد الانتهاء من ذلك ، قم بمراجعة خريطة الصور الخاصة بك في المستعرض للتأكد من أنه يعمل بشكل صحيح. انقر فوق كل رابط لضمان انتقاله إلى المورد أو صفحة الويب المناسبة.
عيوب خرائط الصور
مرة أخرى ، كن على دراية بأن خرائط الصور لها عدة سلبيات ، حتى خارج نقص الدعم المذكور مع مواقع الويب المتجاوبة. التنوب ، التفاصيل الصغيرة قد تكون محجوبة في خريطة الصورة. على سبيل المثال ، قد تساعد خرائط الصور الجغرافية في تحديد القارة التي ينتمي إليها المستخدم ، ولكن هذه الخرائط قد لا تكون مفصلة بما يكفي لتحديد بلد المنشأ للمستخدم. هذا يعني أن خريطة الصورة قد تساعد في تحديد ما إذا كان المستخدم من آسيا ولكن ليس من كمبوديا على وجه الخصوص.
يمكن أيضًا تحميل خرائط الصور ببطء. لا يجوز استخدامها عدة مرات على موقع الويب لأنها تشغل مساحة كبيرة جدًا لاستخدامها في كل صفحة من صفحات موقع الويب. الكثير من خرائط الصور على صفحة واحدة من شأنها خلق اختناق خطير وتأثير كبير على أداء الموقع .
أخيرًا ، قد لا تكون خرائط الصور سهلة للمستخدمين الذين لديهم مشاكل بصرية للوصول إليها. إذا كنت قد استخدمت خرائط الصور ، فيجب عليك أيضًا إنشاء نظام ملاحة آخر لهؤلاء المستخدمين كبديل.
الحد الأدنى
أستخدم خرائط الصور من وقت لآخر عندما أحاول إعداد عرض توضيحي سريع للتصميم وطريقة عمله. على سبيل المثال ، ربما أستهزأ بتصميم تطبيق جوّال وأرغب في استخدام خرائط الصور لإنشاء نقاط اتصال لمحاكاة تفاعل التطبيق. هذا أسهل كثيرًا من القيام به من أجل ترميز التطبيق ، أو حتى إنشاء صفحات ويب وهمية مبنية على المعايير الحالية مع HTML و CSS. في هذا المثال المحدد ، ولأنني أعرف ما هو الجهاز الذي سأقوم بعرض التصميم عليه ويمكنه تغيير الكود إلى هذا الجهاز ، تعمل خريطة الصور ، ولكن وضعها في موقع إنتاج أو تطبيق أمر صعب للغاية ومن المرجح أن يتم تجنبه في الوقت الحالي. المواقع.
المقالة الأصلية لجنيفر كرينين. حرره جيريمي جيرار في 9/7/17.