كيفية إدراج الروابط في الصورة

اضغط على الصورة

LIENS UTILS: (HTML, photo)

كيفية إدراج الروابط داخل الصور باستخدام HTML Image Map وطريقة استعمال HTML Map Creator

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

✅ ما هو Image Map في HTML؟

الـ Image Map هو طريقة لتحديد مناطق قابلة للنقر داخل صورة واحدة، بحيث يؤدي كل جزء إلى رابط مختلف. بدلاً من تقسيم الصورة لعدة أجزاء، يمكنك ببساطة تحديد إحداثيات المناطق وتعيين الروابط.

🟢 كيفية كتابة كود Image Map يدويًا

إليك مثال بسيط لكيفية كتابة كود HTML لإضافة خريطة روابط:

<img src="your-image.jpg" usemap="#mymap" alt="صورة قابلة للنقر">

<map name="mymap">
  <area shape="rect" coords="34,44,270,350" href="https://example.com/link1" alt="رابط 1">
  <area shape="circle" coords="337,300,44" href="https://example.com/link2" alt="رابط 2">
  <area shape="poly" coords="400,350,500,350,450,400" href="https://example.com/link3" alt="رابط 3">
</map>

• shape: نوع المنطقة (مستطيل rect - دائرة circle - مضلع poly).
• coords: الإحداثيات داخل الصورة.
• href: الرابط عند الضغط على المنطقة.

🔵 لماذا HTML Map Creator أداة مفيدة؟

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

🟢 خطوات استعمال HTML Map Creator

1. اذهب إلى موقع الأداة عبر البحث عن HTML Image Map Creator أو زيارة أدوات شهيرة مثل: image-map.net.
2. حمّل الصورة التي ترغب بإنشاء خريطة لها.
3. باستخدام الماوس، اختر أداة التحديد المناسبة (مستطيل، دائرة، مضلع).
4. قم بتحديد المنطقة داخل الصورة التي ترغب بربطها.
5. أدخل الرابط URL الخاص بالمنطقة.
6. كرّر الخطوات لكل منطقة تريد تحديدها.
7. بعد الانتهاء، اضغط زر Generate لنسخ الكود النهائي.
8. انسخ الكود والصقه داخل تدوينتك أو صفحتك HTML.

💡 نصيحة: تأكد من أن الصورة المستخدمة لها حجم ثابت حتى لا يختلف مكان الإحداثيات في المتصفحات المختلفة.

⚠️ ملاحظات هامة

• الـ Image Map قد لا يكون مناسبًا تمامًا للمواقع المتجاوبة على الهاتف، لذا اختبر دائمًا في شاشات مختلفة.
• يُفضل إضافة نص بديل alt لكل منطقة لتعزيز الوصولية.
• تجنب وضع الكثير من الروابط داخل صورة واحدة حتى لا تربك الزائر.

📌 الخلاصة

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

إذا احتجت مساعدة في توليد الأكواد أو ضبط الإحداثيات، لا تتردد في طرح سؤالك!