الإعلانات

يمكن أن تكون الصور بلا حياة ومملة - ما لم تكن تفاعلية ورائعة ، هذا هو. و qTip يجعل هذا الأمر سهلاً بفضل قوة jQuery. تابع القراءة لمعرفة كيفية إضافة تسميات تفاعلية تظهر عندما يمرر المستخدم الماوس فوق أجزاء من الصورة.

لماذا تريد القيام بذلك؟ أنا شخصياً أستخدم التقنية في موقع جديد للتجارة الإلكترونية - حتى يتمكن المستخدم من تمرير عناصر مشهد (مثل كتالوج ايكيا) ، مع ظهور عنوان المنتج وإضافة زر إلى سلة التسوق ديناميكيًا. يمكن استخدامه أيضًا للتأثير الجيد على شيء مثل الحرم الجامعي أو خريطة المدينة ، حيث يوجد الكثير من العناصر ذات الأشكال الغريبة التي يمكن أن تفعلها بالفعل مع الوصف دون تشوش الخريطة. من الأمثلة البسيطة أيضًا علامات Facebook ، حيث يؤدي التحويم فوق وجه الشخص إلى إخبارك من هم. استخداماته محدودة فقط من خيالك.

ملاحظة: أفترض معرفة أساسية جدًا بـ jQuery و HTML هنا - على الأقل تأكد من أنك قرأت عنها المحددات jQuery Tutorial - الشروع في العمل: الأساسيات والمحدداتفي الأسبوع الماضي ، تحدثت عن مدى أهمية jQuery لأي مطور ويب حديث ولماذا هو رائع. هذا الأسبوع ، أعتقد أن الوقت قد حان لأن تكون أيدينا متسخة ببعض التعليمات البرمجية وتعلمنا كيف ... قراءة المزيد

instagram viewer
, طرق مقدمة إلى jQuery (الجزء الثاني): الطرق والوظائفهذا جزء من مقدمة مستمرة للمبتدئين لسلسلة برمجة الويب jQuery. تناول الجزء الأول أساسيات jQuery حول كيفية تضمينها في مشروعك والمحددات. في الجزء 2 ، سنستمر في ... قراءة المزيد و وظائف مجهولة مقدمة إلى jQuery (الجزء 3): انتظار تحميل الصفحة والوظائف المجهولةيمكن القول إن jQuery مهارة أساسية لمطور الويب الحديث ، وفي هذه السلسلة القصيرة القصيرة آمل أن أعطيك المعرفة لبدء الاستفادة منها في مشاريع الويب الخاصة بك. في... قراءة المزيد .

qTip

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

qtip -1

عمل خريطة صورة

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

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

image-map-1

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

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

صورة خريطة إنشاء الأشكال

عندما تكون مستعدًا ، قم بالتمرير لأسفل وانسخ الرمز المعطى.

رمز صورة الخريطة

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

تذكر أن تعطي الصورة خريطة الموقع السمة ، مشيرا إلى #هوية شخصية من الخريطة التي تحتوي على الإحداثيات (usemap = "# mymap"، فمثلا).

كمان

مضيفا في qTip

إذا قمت بلصق الكود الخاص بك في JSFiddle ، فسترى أن هناك خيارًا على الشريط الجانبي لتضمين jQuery. تأكد من تمكين ذلك. يمكننا أيضًا إضافة موارد خارجية أخرى هنا ، لذا امض قدمًا وأضف عناوين URL لـ CSS و JS المدرجة في صفحة تنزيل qTip. انسخ روابط "جميع الميزات والأنماط" والصقها في JSFiddle - على الرغم من أنك في الممارسة العملية ، ستستخدم أداة التهيئة أدناه لإنشاء مجموعة مخصصة من الميزات أو الأنماط.

يمكن أن يكون دليل التنفيذ الكامل ل qTip وجدت هنا، لكن دعنا نمضي قدمًا وننشئ بعض تلميحات الأدوات البسيطة القائمة على النص. سوف يستهدف جافا سكريبت التالي جميع عناصر المنطقة (العناصر التي تحدد أجزاء خريطة الصورة) عند تحميل الصفحة ، مما يخبر qTip بالعمل عليها مع محتوى أي شيء موجود في سمة alt.

$ (document) .ready (function () { $ ("area"). لكل (دالة (فهرس ، عنصر) { var link = $ (this) ، $ (link). qtip ({ content: link.attr ("alt") }); }); });
فعله لكن قبيح

التصميم الافتراضي قبيح جدًا - يمكنك عرض عرض توضيحي له هنا - ولكن لا بأس ، فلنطبق تصميمًا مخصصًا على النوافذ المنبثقة مثل هذا (لقد حذفت جزءًا من الرمز ، مع عرض قسم qTip المحدد فقط).

$ (link). qtip ({ content: link.attr ("alt") ، النمط: { الفئات: "qtip-bootstrap qtip-shadow" } });

لقد قمت أيضًا بتضمين BootStrap CSS كملف خارجي ، لفرز خطوط المتصفح القياسية القبيحة. هذا مبالغة للغاية ، أعرف. لا يزال: أفضل بكثير!

على غرار

شيء واحد ألاحظه الآن هو أن الموضع الافتراضي أسفل اليمين ليس مثاليًا حقًا. لضبط هذا ، دعنا نستخدم إعداد الموضع:

$ (link). qtip ({ content: link.attr ("alt") ، النمط: { الفئات: "qtip-bootstrap qtip-shadow" }، موضع: { الهدف: "الماوس" ، اضبط: { الماوس: صحيح // يمكن حذفه (مثل السلوك الافتراضي) } } }); });

الآن قم بالمرور فوق أي عنصر ، وسيتبع تلميح الأدوات الماوس. تستطيع شاهد العرض التوضيحي النهائي هنا.

يمكنك أيضًا جعل النافذة المنبثقة مشروطة (بحيث يكون كل شيء آخر خافتًا ، وتحتاج إلى النقر للخارج للعودة إليه) ، أو حتى تحميل بعض المحتوى من خلال طلب AJAX. أعتقد أنه مكوّن إضافي صغير وأنيق يُنقل حياة جديدة إلى معيار HTML غير مستخدم إلى حد ما - دعنا نرى ما يمكنك أن تصل إليه ، ويرجى إخبارنا في التعليقات إذا قمت بعمل شيء ما عليه.

جيمس حاصل على درجة البكالوريوس في الذكاء الاصطناعي ، وهو حاصل على شهادة CompTIA A + و Network +. وهو المطور الرئيسي لـ MakeUseOf ، ويقضي وقت فراغه في لعب كرة الطلاء VR وألعاب الطاولة. لقد كان يبني أجهزة الكمبيوتر منذ أن كان طفلاً.