Taggd के साथ सरल छवि टूलटिप लेबल जोड़ें

आपको पता है कि फेसबुक आपको कैसे देता है लेबल चेहरे तस्वीरों में? कुंआ, Taggd CSS / JS समतुल्य की तरह थोड़े है डॉट्स का उपयोग नोट करने के लिए जहां टूलटिप्स एक छवि पर दिखाई देनी चाहिए.

पुस्तकालय पूरी तरह से स्वतंत्र है, और किसी भी निर्भरता की आवश्यकता नहीं है जैसे कि jQuery। यह शुद्ध वेनिला जावास्क्रिप्ट पर चलता है, और इसे स्थापित करना बहुत आसान है.

आप टैगग होम पेज से थोड़ा और जान सकते हैं एक डेमो और कुछ बुनियादी कदम शामिल हैं आरंभ करने के लिए.

वहाँ भी एक कड़ी है ऑनलाइन प्रलेखन Doclets का उपयोग करते हुए, जेएस प्रलेखन के लिए बनाया गया एक छोटा सा वेब ऐप। आप ऐसा कर सकते हैं टैगगड संस्करणों की खोज करें, या वर्तमान संस्करण ब्राउज़ करें मास्टर शाखा में.

वहाँ से, आपको एक मिल जाएगा गुणों की विशाल सूची आप उपयोग कर सकते हैं। प्रत्येक डॉक्टर कार्यों द्वारा विभाजित है छवि पर काम करते हैं (जैसे कि टैग जोड़ो() या getTag ()) कार्यों के बाद जो आपकी मदद करते हैं विशिष्ट टैग में हेरफेर करें (जैसे कि setPosition ()).

फिर, सब कुछ वेनिला जावास्क्रिप्ट पर चलता है इसलिए आपको सिंटैक्स समस्याओं के बारे में चिंता करने की आवश्यकता नहीं है.

आरंभ करना GitHub रेपो की जाँच करें, और सेटअप निर्देशों का पालन करें.

आप बस Taggd CSS और JS फ़ाइलों को जोड़ते हैं तुम्हारे अंदर अनुभाग , और फिर एक नया उदाहरण बनाएँ टैगगड तत्वों के। इन्हें परिभाषित किया जा सकता है एक एक करके या एक सरणी में.

फिर उन्हें एक छवि में जोड़ें, और प्रेस्टो! आप जाने के लिए पूरी तरह तैयार हैं.

मैं देखना चाहूंगा टैग लेबल को अनुकूलित करने के लिए अतिरिक्त सुविधाएँ, और उनके आकार को बदल दें। एक छोटे गुलाबी बिंदु के बजाय किसी ऑब्जेक्ट को घेरने के लिए एक स्क्वायर टैग बनाना भयानक होगा। लेकिन शून्य निर्भरता वाले एक मुक्त पुस्तकालय के लिए, मैं ज्यादा शिकायत नहीं कर सकता.

अब तक यह पुस्तकालय बना है केवल आधुनिक ब्राउज़रों के लिए, और सुशोभित गिरावट का समर्थन नहीं करता है। हालाँकि, आप हमेशा रेपो पेज पर एक समस्या को खोल सकते हैं या अन्य समस्याओं को हल करने का प्रयास कर सकते हैं यदि आपको कोई सरल दिखाई देता है। फिर भी, Taggd अभी भी एक प्लगइन की एक बिल्ली है, और यह किसी भी परियोजना के लिए उपयोग करने के लिए व्यावहारिक है.

के लिए लेखक का मुख पृष्ठ देखें नमूना कोड तथा डीएल लिंक साथ में ए प्रलेखन पृष्ठ के लिए लिंक.

और यदि आपके पास कोई प्रश्न या सुझाव है तो अपने ट्विटर @TimSeverien पर निर्माता टिम सेवरियन को संदेश देने के लिए स्वतंत्र महसूस करें.