WorldWideScripts.net Delivering the best Add-Ons in more than 37 languages.

中文(简体), English, हिन्दी/हिंदी, Español/Castellano, العربية, Русский язык, Français, 中文 (台灣), বাংলা, Bahasa Indonesia, اردو, Português, Deutsch, Bahasa Melayu (بهاس ملايو‎), 日本語 (にほんご), فارسی, Italiano, తెలుగు, Türkçe, ગુજરાતી, Język polski/polszczyzna, Tiếng Việt, ಕನ್ನಡ, Українська мова, ไทย
HTML5 / Canvas

HTML5 canvas Image Mapper

— जोड़ें पर WorldWideScripts.net को

तारीख तक रहने के लिए हमारे फ़ीड की सदस्यता लें!

नई! आप यह चाहते हैं के रूप में हमें का पालन करें!


HTML5 canvas Image Mapper - CodeCanyon Item for Sale

Ads

Ad: Bluehost hosting

यह वेब डेवलपर्स के लिए बनाया गया एक HTML छवि मानचित्रण है।

उपकरण एचटीएमएल 5 कैनवास का उपयोग कर विकसित किया गया है, इसलिए इसके उपयोग कैनवास कि समर्थन ब्राउज़रों तक ही सीमित है, लेकिन यह भी फ़ाइल एपीआई:

IE10 +, FF3.6 + FF14-, FF18 (+ FF15 FF18 में हल हो जाएगा कि कुछ कैनवास कार्यक्षमताओं, बग 787,623, के साथ समस्या है), Chrome6 + Safari6 + Opera11.1 +

इस डेवलपर्स के लिए एक उपकरण है के बाद से मैं एक वेब डेवलपर के लिए एक उचित ब्राउज़र का चयन करने के लिए कोई समस्या नहीं है, लगता है कि क्योंकि मैं इस एक बड़ी सीमा नहीं है कि लगता है।

मैं इस उपकरण को विकसित करने के FF14 का इस्तेमाल किया है, तो यह सबसे अच्छा choise है, लेकिन उपकरण Chrome22 और Opera12 में भी परीक्षण किया गया है


नोट: यदि आप लाइव पूर्वावलोकन लिंक में देख सकते हैं कि उपकरण के संस्करण, उपकरण की एक सीमित संस्करण है। इस संस्करण के साथ आप केवल मुख पृष्ठ पर सूचीबद्ध छवियों का एक विशिष्ट सेट, लोड कर सकते हैं। एक छवि लोड करने के बाद आप सभी आकृति आकर्षित कर सकते हैं, लेकिन केवल पहले 6 आकार एचटीएमएल कोड में उत्पन्न हो जाएगा। यह सीमा है कि आप उपकरण के सभी कार्यक्षमताओं का परीक्षण करने से नहीं रोकता है।


एक छवि मानचित्र क्या है?

एक छवि नक्शा एक छवि के उपयोगकर्ता क्लिक करने योग्य विभिन्न क्षेत्रों में आता है कि एक एचटीएमएल कोड है। एचटीएमएल कोड आप, आयताकार बहुभुज और गोल आकार के साथ क्षेत्रों को परिभाषित करने की अनुमति देता है कि क्षेत्र टैग के साथ संयोजन के रूप में, नक्शे एचटीएमएल टैग के होते हैं।
आप अपने HTML पृष्ठ में image1.png छवि है एक उदाहरण के रूप में, आप निम्नलिखित कोड लिख सकते हैं:

 <img src="image1.png" width="145" height="126" alt="map example" usemap="#image1map" /> <map name="image1map"> <area shape="rect" coords="0,0,82,126" href="area1.html" alt="area1"> <area shape="poly" coords="108, 145, 174, 71, 205, 139, 153, 192" href="area2.html" alt="area2"> <area shape="circle" coords="124,58,8" href="area3.html" alt="area3"> <area shape="default" href="http://default.html" alt = "the whole image"/> </map> 

आप देख सकते हैं, आप नक्शे टैग में नाम विशेषता का एक ही मूल्य होगा कि आइएमजी टैग में usemap विशेषता, निर्धारित किया है। आप चाहते हैं के रूप <नक्शा> और </ नक्शा> के बीच आप जुड़े छवि पर एक उपयोगकर्ता के क्लिक करने योग्य क्षेत्र का प्रतिनिधित्व करने के लिए हर एक के रूप में कई <क्षेत्र> टैग परिभाषित कर सकते हैं। रंगरूट, पाली और सर्कल: प्रत्येक क्षेत्र 3 मूल्यों में से एक हो सकता है कि एक आकार विशेषता, होना चाहिए। रंगरूट आकार पूरी तरह से 2 अंक से परिभाषित किया गया है, एक पाली आकार अंक के एक दृश्य से परिभाषित किया गया है और एक चक्र के आकार केंद्र का प्रतिनिधित्व करता है कि एक बिंदु है, और एक त्रिज्या से परिभाषित किया गया है। सभी अंक निर्देशांक के एक दंपति द्वारा परिभाषित कर रहे हैं, छवि के ऊपरी-बाएं कोने में रिश्तेदारों, पिक्सल में व्यक्त किया। आकार गुण भी नहीं पिछले आकार की किसी के साथ मैप छवि के भागों को देखें कि "डिफ़ॉल्ट" मूल्य, हो सकता है। आकार नक्शे में परिभाषित कर रहे हैं जिस क्रम में बहुत महत्वपूर्ण हैं कि, बजाय, खाते में ले लो: आप नक्शे में पहली आकार के रूप में "डिफ़ॉल्ट" आकार को परिभाषित है, यह बाद के सभी आकार को पार कर जाएगी "डिफ़ॉल्ट" क्योंकि आकार पूरी छवि को दर्शाता है। आप एक बड़ा आकार में एक छोटे आकार को परिभाषित कर सकते हैं, लेकिन आप तो एक बड़ा पहली छोटी आकार को परिभाषित किया है और: यह एक दूसरे को ओवरलैप है कि आकार के साथ यह भी सच है। 2 आकार छवि के एक हिस्से का हिस्सा है, तो पहले परिभाषित आकार, जीतता है।

आप स्वयं एक छवि मानचित्र में स्थापित करना चाहते हैं, तो आप अलग अलग आकार को परिभाषित करने के लिए जरूरी सभी बिंदुओं के निर्देशांक पता है। शायद यह है आप परिपत्र या आयताकार क्षेत्रों में है, खासकर अगर आप नक्शा करने के लिए कुछ क्षेत्रों में है, तो एक बड़ी समस्या नहीं है। लेकिन अगर आप एक बहुभुज आकार के साथ, कई क्षेत्रों में है, तो उन्हें मैन्युअल सेट एक आसान काम नहीं है।

छवि मैपर उपकरण आप छवि उपयोगकर्ता के क्लिक करने योग्य के क्षेत्रों में आता है कि इसी HTML कोड में स्वचालित रूप से अनुवाद किया जाएगा कि इस तरह के चयनित छवि पर रंगरूट, पाली, और चक्र के रूप में आकार, आकर्षित करने के लिए अनुमति देता है।

दिया छवि पर आकार ड्राइंग के बाद, आप बस एक बटन पर क्लिक एचटीएमएल कोड उत्पन्न कर सकते हैं और कोड एक textarea में displayied किया जाएगा। आप एचटीएमएल कोड को कॉपी और अपने HTML पृष्ठ (ओं) में इसका इस्तेमाल कर सकते हैं। आप रिवर्स प्रक्रिया ऐसा भी कर सकते हैं: textarea में एचटीएमएल कोड चिपकाने, आप इस कोड को बस एक बटन क्लिक लोड कर सकते हैं; इस छवि पर आकृतियों में अनुवाद किया जाएगा और आप उन्हें संशोधित नए आकार जोड़ सकते हैं और एचटीएमएल कोड को फिर से उत्पन्न कर सकते हैं। इस रिवर्स तंत्र आप एक आंशिक मानचित्रण प्रक्रिया को बचाने के लिए और बाद में छवि नक्शा करने के लिए जारी रखने के लिए अनुमति देने के लिए उपयोगी है। Textarea में कोड पैदा करने के बाद, तुम उड़ पर textarea में निर्देशांक संशोधित कर सकते हैं और इसे फिर से लोड: यह "मैन्युअल" आकार डिजाइनिंग / स्थिति को निखारने के लिए भी उपयोगी है।

मुख्य विशेषताएं:

  • आप एक स्थानीय या दूरदराज छवि का चयन कर सकते हैं
  • आप लक्ष्य छवि आकार सेट कर सकते हैं: इन छवि अपने HTML पृष्ठ में होगा कि आकार रहे हैं
  • आप ने और किसी भी क्षण में छवि से बाहर ज़ूम कर सकते हैं और यह केवल फोटो के लक्ष्य के आकार पर निर्भर करता है कि उत्पन्न हो जाएगा कि असली निर्देशांक के साथ हस्तक्षेप नहीं करेगा। जूम की सुविधा आप आकृतियों को आकर्षित करने में मदद करने के लिए ही उपयोगी है।
  • आप इस तरह के "href" विशेषता, "Alt" विशेषता, "आईडी" और "वर्ग" जिम्मेदार बताते हैं और अंत में 'लक्ष्य' विशेषता के रूप में प्रत्येक आकृति के लिए कई मापदंडों सेट कर सकते हैं। आप आकार का चयन किया है पैरामीटर सेट करने के लिए: आप उपकरण पट्टी में शीर्ष बाएँ तीर का चयन करें और फिर आकृति पर क्लिक करने के लिए एक आकार का चयन करने के लिए।
  • नक्शा "नाम", डिफ़ॉल्ट यूआरएल और लक्ष्य: आप नक्शे के लिए कुछ मानकों सेट कर सकते हैं।
  • आप एक उपकरण पट्टी से आकार का चयन एक आकार आकर्षित कर सकते हैं।
  • उपकरण पट्टी से यह चयन करने के बाद, एक आकार आकर्षित करने के लिए, आप बस आप आकार शुरू करना चाहते हैं, जहां छवि, पर माउस से क्लिक कर सकते हैं।
  • आकार में एक चक्र है, तो firts बिंदु केंद्र है: (क्लिक किया है या जारी) माउस चलती है, आप कर्सर का पालन करें कि एक चक्र देख सकते हैं। फिर से माउस क्लिक वृत्त चित्र बंद हो जाएगा।
  • आकार एक रंगरूट है। पहला बिंदु कोने में से एक है। (क्लिक किया है या जारी) माउस को ले जाकर एक रंगरूट आकर्षित करेगा। फिर से माउस क्लिक ड्राइंग बंद हो जाएगा।
  • आकार एक पाली है, तो प्रक्रिया थोड़ी अलग है: एक बिंदु की स्थापना की जाएगी माउस के प्रत्येक क्लिक; वर्तमान बात हमेशा हमेशा पाली एक बंद आकार, जिससे एफआइआर एक के साथ जुड़ा हुआ है; पाली आकर्षित करने के लिए बंद करने के लिए आप माउस क्लिक दोगुना करने की है (पिछले बिंदु निर्धारित करने के लिए)।
  • सभी आकृति के लिए आप भी उन्हें "रोक" बटन (उपकरण पट्टी में शीर्ष बाएँ तीर) पर क्लिक आकर्षित करने के लिए बंद कर सकते हैं।
  • यदि आप इस चित्र पर यह कदम जब आप माउस निर्देशांक देख सकते हैं।
  • आप सीमा का उपयोग कर सकते हैं तो यह छवि का हिस्सा था, जैसा कि आप छवि के किनारे निर्देशांक निर्धारित करने के लिए छवि के आसपास ग्रे-धराशायी सीमा का उपयोग कर सकते हैं: हां, तो आप आकार ड्राइंग के दौरान सीमा पर क्लिक कर सकते हैं, जूस यह रूप छवि का हिस्सा था। आप सीमा के ऊपरी-बाएं कोने पर क्लिक करते हैं, उदाहरण के लिए, आप पर एक बिंदु की स्थापना की जाएगी (0, 0) निर्देशांक। तुम छोड़ दिया सीमा पर क्लिक करते हैं, किसी भी बिंदु में, आप आदि, निर्देशांक (0, वाई) पर एक बिंदु की स्थापना की जाएगी
  • आप इसे हटाने / आकार बदलने के / एक पहले से ही तैयार की आकृति का चयन करें और संशोधित कर सकते हैं। इसे दूर करने के लिए आप एक ठुकरा दिया पेंसिल केवल एक आकार चयन के रूप में दिखाई देगा कि उपकरण पट्टी में "रबड़", का प्रयोग किया है।
  • (यह एक डिजाइन उपकरण नहीं है, इसलिए मैं रंग की संख्या सीमित है और यह भी आप प्रत्येक आकार के लिए एक अलग रंग का चयन नहीं कर सकते हैं) 5 रंग का एक सेट से आकार के समोच्च के रंग का चयन कर सकते हैं।
  • आप छवि पर तैयार की कुछ आकार है, तो आप एक textarea में एचटीएमएल कोड देखेंगे: आप उपकरण पट्टी पर "रोक" बटन का चयन करें और कोई आकृति का चयन किया जाता है केवल जब कि दिखाई दे रहा है, "नक्शा" बटन पर क्लिक कर सकते हैं आप अभी तक एक आकृति तैयार नहीं किया है तो आप एक खाली textarea देखेंगे, लेकिन आप इसे कुछ एचटीएमएल कोड में पिछले कर सकते हैं और इसे लोड।
  • (आप केवल "नक्शा" बटन पर क्लिक करने के बाद देख सकते हैं) "लोड" बटन पर क्लिक करके, textarea में एचटीएमएल कोड वर्तमान छवि पर आकार में अनुवाद किया जाएगा।

आप नीचे दिए गए लिंक पर उपकरण की पूरी मैनुअल से परामर्श कर सकते हैं: ऑनलाइन मैनुअल

आप किसी भी प्रश्न हैं, सिर्फ एक टिप्पणी छोड़ या मुझे एक ईमेल ड्रॉप!


डाउनलोड करें
इस श्रेणी में अन्य घटकोंइस लेखक के सभी घटकों
टिप्पणियाँअक्सर पूछे जाने वाले सवाल और जवाब पूछा

गुण

बनाया गया:
10 अक्टूबर 12

आखिरी अपडेट:
एन / ए

उच्च संकल्प:
नहीं

संगत ब्राउज़र:
फ़ायरफ़ॉक्स, ओपेरा, क्रोम

फ़ाइलें:
जावास्क्रिप्ट जे एस, एचटीएमएल, सीएसएस

सॉफ्टवेयर संस्करण:
एचटीएमएल 5

कीवर्ड

ईकामर्स, ईकामर्स, सभी आइटम, एप्लिकेशन, क्षेत्र, कैनवास, वृत्त, समन्वय स्थापित, एचटीएमएल 5, की छवि, नक्शा, मैपर, पाली, रंगरूट, आकार, लक्ष्य, साधन, ज़ूम