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 படத்தை ஒப்பீட்டை உள்ளது.

கருவி HTML5 கேன்வாஸ் பயன்படுத்தி உருவாக்கப்பட்டுள்ளது, அதனால் அதன் பயன்பாடு கேன்வாஸ் ஆதரவு என்று உலாவிகளில் மட்டுமே உள்ளது, ஆனால் கோப்பு ஏபிஐ தான்:

IE10 +, FF3.6 + FF14-, FF18 (+ FF15 FF18 சரி செய்யப்படும் என்று சில கேன்வாஸ் செயல்பாடுகள், பிழை 787623, பிரச்சினைகள்), Chrome6 + Safari6 + Opera11.1 +

இந்த டெவலப்பர்கள் ஒரு கருவி என்பதால் நான் ஒரு வலை டெவலப்பர் ஒரு பொருத்தமான உலாவி தேர்வு செய்ய எந்த பிரச்சனையும் இல்லை என்று நினைக்கிறேன், ஏனெனில், நான், இது ஒரு பெரிய குறைபாடு இல்லை என்று நினைக்கிறேன்.

நான் கருவியை உருவாக்க FF14 பயன்படுத்தி, இந்த சிறந்த choise, ஆனால் கருவி Chrome22 மற்றும் Opera12 கூட சோதனை செய்யப்பட்டது


குறிப்பு: நீங்கள் லைவ் முன்னோட்டம் இணைப்பை பார்க்க முடியும் என்று கருவி பதிப்பு கருவி ஒரு வரையறுக்கப்பட்ட பதிப்பு. இந்த பதிப்பு உங்களுக்கு மட்டும் முகப்பு பக்கத்தில் பட்டியலிடப்பட்டுள்ள படங்கள் ஒரு குறிப்பிட்ட தொகுப்பு, ஏற்ற முடியும். ஒரு படத்தை ஏற்றும் பின்னர் நீங்கள் அனைத்து வடிவங்கள் வரைய முடியும், ஆனால் முதல் 6 வடிவங்கள் HTML குறியீட்டை ல் உருவாக்கப்பட்ட வேண்டும். இந்த வரையறை நீங்கள் கருவி அனைத்து செயல்பாடுகள் சோதிக்க தடுக்க முடியாது.


ஒரு படத்தை வரைபடம் என்ன?

ஒரு படத்தை வரைபடத்தை ஒரு படத்தை பயனர் கிளிக் வெவ்வேறு பகுதிகளில் செய்கிறது என்று ஒரு HTML குறியீடு உள்ளது. HTML குறியீட்டை நீங்கள் செவ்வக, பல்கோணவடிவ மற்றும் வட்ட வடிவங்கள் பகுதிகளில் வரையறுக்க அனுமதிக்கிறது என்று பகுதியில் டேக், இணைந்து, வரைபடம் HTML குறியை கொண்டுள்ளது.
உங்கள் 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> 

நீங்கள் பார்க்க முடியும் என, நீங்கள் வரைபடத்தை டேக் பெயர் பண்பு அதே மதிப்பு இருக்கிறது என்று IMG குறிச்சொல் usemap பண்பு, அமைக்க வேண்டும். நீங்கள் விரும்பினால் <வரைபடம்> மற்றும் </ வரைபடம்> இடையே நீங்கள், தொடர்புடைய படத்தை ஒரு பயனர் கிளிக் பகுதியில் குறிக்கும் ஒவ்வொரு பல <பகுதியில்> குறிச்சொற்களை வரையறுக்க முடியாது. பாலிமற்றும்வட்டம் வட்டம்: ஒவ்வொரு பகுதியில் 3 மதிப்புகள் ஒன்றாக இருக்க முடியும் என்று ஒரு வடிவத்தை பண்பு, வேண்டும். RECT வடிவம் முற்றிலும் 2 புள்ளிகள் வரையறுக்கப்பட்டுள்ளது, ஒரு பாலி வடிவம் புள்ளிகள் வரிசை வரையறுக்கப்படுகிறது மற்றும் ஒரு வட்டம் வடிவம் சென்டர் பிரதிபலிக்கிறது என்று ஒரு புள்ளி, ஒரு ஆரம் வரையறுக்கப்படுகிறது. அனைத்து புள்ளிகள் ஆய ஒரு ஜோடி, வரையறுக்கப்படுகிறது படத்தின் மேல் இடது மூலையில் உறவினர்கள், பிக்சல்கள் வெளிப்படுத்தினர். வடிவத்தை பண்பு முந்தைய வடிவங்கள் எந்த ஒப்பிடப்படுகிறது இல்லை படத்தை பாகங்கள் குறிக்க "இயல்புநிலை" மதிப்பு, கொண்டிருக்கலாம். வடிவங்கள் வரைபடம் வரையறுக்கப்பட்டுள்ளன வரிசை மிகவும் முக்கியமானது என்று, அதற்கு பதிலாக, கணக்கில் எடுத்து: நீங்கள் வரைபடத்தை முதல் வடிவம் என "இயல்புநிலை" வடிவத்தை வரையறுக்கும் என்றால், அது அனைத்து பின்னர் வடிவங்கள் புறக்கணிக்க வேண்டும் "இயல்புநிலை" ஏனெனில் வடிவத்தை முழு படத்தை குறிக்கிறது. நீங்கள் ஒரு பெரிய உருவம் ஒரு சிறிய வடிவம் வரையறுக்க முடியாது, ஆனால் நீங்கள் பெரிய ஒரு முதல் சிறிய வடிவம் வரையறுக்க வேண்டும் மற்றும்: இந்த ஒருவருக்கொருவர் ஒன்றுடன் ஒன்று என்று வடிவங்கள் கூட உண்மை. 2 வடிவங்கள் படத்தை ஒரு பகுதியை பகிர்ந்து என்றால், முதலில் வரையறுக்கப்பட்ட வடிவம், வெற்றி.

நீங்கள் கைமுறையாக ஒரு படத்தை வரைபடத்தை அமைக்க விரும்பினால் நீங்கள் வெவ்வேறு வடிவங்கள் வரையறுக்க தேவையான அனைத்து புள்ளிகள் ஆய தெரிய வேண்டும். அநேகமாக இந்த நீங்கள் வட்ட அல்லது செவ்வக பகுதிகளில் இருக்கும் குறிப்பாக, வரைபடத்தில் சில பகுதிகள் இருந்தால், ஒரு பெரிய பிரச்சினை இல்லை. ஆனால் நீங்கள் ஒரு பல்கோண வடிவம், பல பகுதிகளில் இருந்தால், அவற்றை அமைக்க ஒரு எளிய பணி அல்ல.

படத்தை mapper கருவி பயனர் கிளிக் படத்தை பகுதிகளில் செய்கிறது என்று தொடர்புடைய HTML குறியீட்டை தானாக மொழிபெயர்க்கப்பட்டது இருக்கும் என்று போன்ற தேர்ந்தெடுக்கப்பட்ட படத்தை மீது பாலிமற்றும்வட்டம், மற்றும் வட்டம் போன்ற வடிவங்கள், வரைய அனுமதிக்கிறது.

கொடுக்கப்பட்ட படத்தை வரைய பின்னர், நீங்கள் வெறுமனே ஒரு பொத்தானை கிளிக் செய்து HTML குறியீட்டை உருவாக்க முடியும் மற்றும் குறியீடு ஒரு textarea உள்ள displayied வேண்டும். நீங்கள் HTML குறியீட்டை நகலெடுத்து உங்கள் HTML பக்கம் (கள்) பயன்படுத்த முடியும். நீங்கள் எதிர் செயல் செய்ய முடியும்: textarea உள்ள HTML குறியீட்டை ஒட்டி, நீங்கள் இந்த குறியீடு வெறுமனே ஒரு பொத்தானை சொடுக்கி ஏற்ற முடியும்; இந்த படத்தை வடிவங்கள் உள்ள மொழிபெயர்க்க வேண்டும் மற்றும் நீங்கள் அவர்களை மாற்ற முடியும், புதிய வடிவங்கள் சேர்த்து மீண்டும் உருவாக்க HTML குறியீடு உருவாக்க முடியும். இந்த தலைகீழ் பொறிமுறையை நீங்கள் ஒரு பகுதி மேப்பிங் செயல்முறை காப்பாற்ற பின்னர் படத்தை வரைய தொடர்ந்து அனுமதிக்க பயனுள்ளதாக இருக்கும். Textarea உள்ள குறியீடு உருவாக்கும் பிறகு, நீங்கள் ஈ இல் textarea உள்ள ஆய மாற்ற முடியும் அது மீண்டும் ஏற்ற: இது "கைமுறையாக" / பொருத்துதல் வடிவமைத்தல் வடிவம் சுத்தி பயனுள்ளதாக இருக்கிறது.

முக்கிய அம்சங்கள்:

  • நீங்கள் ஒரு உள்ளூர் அல்லது தொலை படத்தை தேர்ந்தெடுக்க முடியும்
  • நீங்கள் இலக்கு படஅளவுகளும் அமைக்க முடியும்: இந்த படத்தை உங்கள் HTML பக்கத்தில் வேண்டும் என்று அளவுகளில் உள்ளன
  • நீங்கள் எந்த நேரத்தில் படத்தை அவுட் பெரிதாக்கவும் முடியும் மற்றும் இந்த ஒரே படம் இலக்கு அளவுகள் பொறுத்தது என்று உருவாக்கப்படும் உண்மையான ஆய, தலையிட மாட்டேன். ஜூம் அம்சம் மட்டுமே நீங்கள் வடிவங்கள் வரைய உதவும் பயனுள்ளதாக இருக்கிறது.
  • நீங்கள் இது போன்ற "படம்" பண்பு, "Alt" பண்பு, "ஐடி" மற்றும் "வர்க்கம்" பண்புகளை இறுதியாக "இலக்கு" பண்பு போன்ற ஒவ்வொரு வடிவத்தில் பல காரணிகள், அமைக்க முடியும். நீங்கள் வடிவத்தை தேர்ந்தெடுக்க வேண்டும் அளவுரு அமைக்க: நீங்கள் கருவிப்பட்டியில் மேல் இடது அம்புக்குறி தேர்ந்தெடுத்து பின் வடிவத்தை கிளிக் வேண்டும் ஒரு வடிவத்தை தேர்ந்தெடுத்து.
  • வரைபடத்தை "பெயர்", இயல்புநிலை URL மற்றும் இலக்கு: நீங்கள் வரைபடத்தை சில அளவுருக்கள் அமைக்க முடியும்.
  • நீங்கள் ஒரு கருவி பட்டியில் இருந்து வடிவத்தை தேர்ந்தெடுத்து ஒரு வடிவத்தை வரைய முடியும்.
  • டூல்பார் இருந்து தேர்வு செய்த பின்னர், ஒரு வடிவத்தை வரைய, நீங்கள் வெறுமனே நீங்கள் வடிவத்தை தொடங்க வேண்டும் அங்கு படம், மீது சுட்டியை வைத்து கிளிக் செய்யலாம்.
  • வடிவத்தை ஒரு வட்டம் இருந்தால், firts புள்ளி மையம்: சுட்டி (சொடுக்கும் அல்லது வெளியிடப்பட்டது) நகரும், நீங்கள் கர்சரை பின்பற்ற என்று ஒரு வட்டம் பார்க்க முடியும். மீண்டும் சுட்டியை கிளிக் செய்து வட்டத்தை வரைந்து நிறுத்திவிடும்.
  • வடிவத்தை ஒரு RECT இருந்தால். முதல் கட்டத்தில் மூலையில் ஒன்றாகும். (சொடுக்கும் அல்லது வெளியிடப்பட்டது) நகரும் ஒரு RECT வரையும். மீண்டும் சுட்டியை கிளிக் செய்து வரைந்து நிறுத்திவிடும்.
  • வடிவத்தை ஒரு பாலி இருந்தால் செயல்முறை கொஞ்சம் வித்தியாசமாக இருக்கிறது: ஒரு கட்டத்தில் அமைக்க வேண்டும் சுட்டி ஒவ்வொரு கிளிக்; தற்போதைய புள்ளி எப்போதும் மூடிய வடிவத்தை பாலி செய்து, firs ஒரு இணைக்கப்பட்டுள்ளது; பாலி வரைய நிறுத்த நீங்கள் சுட்டி கிளிக் இரட்டை வேண்டும் (கடைசி புள்ளியை அமைக்க).
  • அனைத்து வடிவங்கள் நீங்கள் அவர்களை "ஸ்டாப்" பொத்தானை (கருவிப்பட்டியில் மேல் இடது அம்புக்குறி) கிளிக் செய்து வரைய தடுத்து நிறுத்த முடியாது.
  • நீங்கள் படத்தை நகர்த்த போது சுட்டி ஒருங்கிணைக்கும் பார்க்க முடியும்.
  • நீங்கள் எல்லை பயன்படுத்த முடியும் அது படத்தை ஒரு பகுதியாக இருந்தது நீங்கள் விளிம்பில் படத்தை ஒருங்கிணைக்கும் தீர்மானிக்க படத்தை சுற்றி சாம்பல்-கோடிட்ட எல்லை பயன்படுத்தலாம்: அதனால், நீங்கள் வடிவம் வரைதல் போது எல்லையில் உரிமை கிளிக் செய்யலாம், சரியான அது படத்தை ஒரு பகுதியாக இருந்தது. நீங்கள் எல்லை மேல் இடது மூலையில் கிளிக் உதாரணமாக, நீங்கள் ஒரு கட்டத்தில் அமைக்க வேண்டும் (0, 0) ஆய. நீங்கள் இடது எல்லை, எந்த புள்ளியில், நீங்கள் ஆய, முதலியன (0, y) ஒரு கட்டத்தில் அமைக்க வேண்டும்
  • நீங்கள் அதை / அளவை / நீக்க ஏற்கனவே வரையப்பட்ட வடிவத்தை தேர்ந்தெடுத்து மாற்ற முடியும். அதை நீக்க, நீங்கள் பென்சில் நிராகரித்தது ஒரு வடிவத்தை தேர்ந்தெடுத்து, என்று தோன்றும் டூல்பாரில் "ரப்பர்" பயன்படுத்த வேண்டும்.
  • நீங்கள் (இந்த ஒரு வடிவமைப்பு கருவி அல்ல, அதனால் நான் வண்ண எண்ணிக்கை குறைவாகவே உள்ளது, மேலும் ஒவ்வொரு வடிவத்தில் ஒரு வெவ்வேறு நிறம் தேர்வு செய்ய முடியாது) 5 நிறங்கள் ஒரு தொகுப்பில் இருந்து வடிவங்கள் உயர நிறம் தேர்ந்தெடுக்க முடியும்.
  • , நீங்கள் படம் வரையப்பட்ட சில வடிவங்கள் இருந்தால் நீங்கள் ஒரு textarea உள்ள HTML குறியீட்டை பார்ப்போம்: நீங்கள் கருவிப்பட்டியில் "நிறுத்து" பொத்தானை தேர்வு மற்றும் வடிவத்தை தேர்ந்தெடுக்கப்பட்டால் மட்டுமே தெரியும் என்று உள்ளது, "மேப்" பொத்தானை கிளிக் செய்யலாம் நீங்கள் இன்னும் ஒரு வடிவத்தை வரைய வேண்டும் என்றால் நீங்கள் ஒரு வெற்று textarea பார்ப்பீர்கள், ஆனால் நீங்கள் அதை சில HTML குறியீட்டை கடந்த முடியுமோ அதை ஏற்ற.
  • (நீங்கள் மட்டும் "மேப்" பொத்தானை கிளிக் செய்து பின்னர் பார்க்க முடியும் என்று) "சுமை" பொத்தானை கிளிக் செய்து, textarea உள்ள HTML குறியீட்டை படத்தை வடிவங்கள் உள்ள மொழிபெயர்க்க வேண்டும்.

நீங்கள் பின்வரும் இணைப்பில் கருவி முழுமையான கையேட்டினை முடியும்: கையேடு

நீங்கள் ஏதேனும் கேள்விகள் இருந்தால், ஒரு கருத்துரை அல்லது எனக்கு ஒரு மின்னஞ்சல் கைவிட!


பதிவிறக்க
இந்த பிரிவில் மற்ற கூறுகள்இந்த எழுத்தாளர் அனைத்து கூறுகளும்
Commentsஅடிக்கடி கேள்விகள் மற்றும் பதில்கள் கேட்டார்

பண்புகள்

உருவாக்கப்பட்டது:
10 அக்டோபர் 12

கடைசியாக புதுப்பிக்கப்பட்டது:
: N / A

உயர் தீர்மானம்:
இல்லை

தகுதியானதா உலாவிகள்:
பயர்பாக்ஸ், ஓபரா, குரோம்

கோப்புகள்:
ஜாவா JS, HTML, CSS,

மென்பொருள் பதிப்பு:
HTML5,

முக்கிய வார்த்தைகள்

இணையவழி, இணையவழி, அனைத்து பொருட்கள், பயன்பாட்டை, பகுதியில், கேன்வாஸ், வட்டம், ஒருங்கிணைக்க, HTML5, படத்தை, வரைபடம், மேப்பர், பாலி, சரியான, வடிவம், இலக்கு, கருவி, ஜூம்