إنشاء روابط الصور وخرائط الصور

• قد 5, 2024

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

صورة مرتبطة في HTML

إن ربط صورة صغيرة أو رمز بسيط للغاية كل ما عليك القيام به هو وضع رابط الصورة الخاص بك داخل الارتباط التشعبي مثل:



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

تقطيع الصور في فوتوشوب

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

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

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

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

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

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

تعليمات الفيديو: حصريا!! طريقة تحويل الصور إلى خريطة قابلة للتصفح على تطبيق All-In-One OfflineMaps (قد 2024).