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 కాన్వాస్ ఉపయోగించి అభివృద్ధి చేయబడింది, దాని ఉపయోగం కాన్వాస్ మద్దతిచ్చే బ్రౌజర్లకు పరిమితం, కానీ కూడా ఫైలు API యొక్క:

IE10 +, FF3.6 +, FF14-, FF18 + (FF15 FF18 పరిష్కరించబడుతుంది కొన్ని కాన్వాస్ కార్యాచరణ, బగ్ 787623, సమస్యలు కలిగి), Chrome6 +, Safari6 +, Opera11.1 +

ఈ డెవలపర్లు ఉపకరణం నుండి నేను ఒక వెబ్ డెవలపర్ తగిన బ్రౌజర్ ఎంచుకోవడానికి సమస్య కలిగి ఊహించు ఎందుకంటే, నేను ఈ ఒక పెద్ద పరిమితి కాదని అనుకుంటున్నాను.

నేను సాధనం అభివృద్ధి FF14 ఉపయోగించారు, అందువలన ఈ ఉత్తమ choise ఉంది, కానీ సాధనం Chrome22 మరియు Opera12 కూడా పరీక్షించడం జరిగింది


గమనిక: మీరు Live ప్రివ్యూ లింక్ లో చూడండి సాధనం యొక్క వెర్షన్, సాధనం పరిమిత వెర్షన్. ఈ వెర్షన్ తో మీరు మాత్రమే హోమ్ పేజీలో జాబితా చిత్రాలు నిర్దిష్ట, లోడ్ చేయవచ్చు. ఒక చిత్రం లోడ్ తర్వాత మీరు అన్ని ఆకారాలు డ్రా చేయవచ్చు, కానీ మాత్రమే మొదటి 6 ఆకారాలు HTML కోడ్ లో ఉత్పత్తి అవుతుంది. ఈ పరిమితి మీరు సాధనం యొక్క అన్ని కార్యాచరణ పరీక్షించడానికి నిరోధించలేదు.


ఒక చిత్రం మ్యాప్ ఏమిటి?

ఒక చిత్రం మ్యాప్ చిత్రం యూజర్ క్లిక్ చేయగల వివిధ ప్రాంతాల్లో చేస్తుంది ఒక HTML కోడ్. HTML కోడ్ మీరు, దీర్ఘచతురస్రాకార, polygonal మరియు వృత్తాకార ఆకారాలు ప్రాంతాల్లో నిర్వచించటానికి అనుమతిస్తుంది ప్రాంతంలో ట్యాగ్, కలిసి చిహ్నం 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 గుణం, సెట్ ఉంటుంది. మీకు కావలసిన <map> మరియు </ చిహ్నం> మధ్య మీరు సంబంధం చిత్రంపై యూజర్ క్లిక్ చేయగల ప్రాంతంలో ప్రాతినిధ్యం ప్రతి ఒకటి పలు <area> టాగ్లు నిర్వచించలేదు. దీర్ఘచతురస్ర, పాలీ మరియు వృత్తం: ప్రతీ ప్రాంతం 3 విలువల్లో ఒకటిగా చేసే ఒక ఆకారం లక్షణం కలిగి ఉండాలి. దీర్ఘచతురస్ర ఆకారం పూర్తిగా 2 పాయింట్లు నిర్వచించబడింది, ఒక బహు ఆకారం పాయింట్ల క్రమాన్ని ద్వారా నిర్వచిస్తారు మరియు ఒక వృత్తం ఆకారం సెంటర్ సూచించే ఒక పాయింట్, మరియు ఒక వ్యాసార్థం నిర్వచించబడింది. అన్ని పాయింట్లు ఆర్డినేట్ ఒక జంట, నిర్వచించబడ్డాయి, చిత్రం యొక్క కుడి ఎగువ మూలలో బంధువులు, పిక్సెళ్ళు వ్యక్తం. ఆకారం లక్షణం మునుపటి ఆకారాలు ఏ మ్యాప్ కాదు చిత్రం భాగాలను సూచించడానికి ఆ "డిఫాల్ట్" విలువ కలిగిన. ఆకారాలు చిహ్నం లో నిర్వచించిన క్రమం చాలా ముఖ్యమైన, బదులుగా, ఖాతా లోకి తీసుకోవాలని: మీరు మాప్ లో మొదటి ఆకారం "డిఫాల్ట్" ఆకారం నిర్వచించే ఉంటే, అది అన్ని తరువాత ఆకారాలు భర్తీ చేస్తుంది "డిఫాల్ట్" ఎందుకంటే ఆకారం మొత్తం చిత్రం సూచిస్తుంది. మీరు ఒక పెద్ద ఆకారం లోకి కొద్దిగా ఆకారం నిర్వచించలేదు, కానీ మీరు అప్పుడు పెద్ద ఒకటి మొదటి చిన్న ఆకారం నిర్వచించే మరియు: ఈ ప్రతి ఇతర పోలిక ఆకృతులు కూడా వర్తిస్తుంది. 2 ఆకారాలు చిత్రం యొక్క భాగం భాగస్వామ్యం, మొదటి వివరణాత్మకమైన రూపంలో, విజయాలు.

మీరు మానవీయంగా ఒక చిత్రం మ్యాప్ సెట్ చేయాలనుకుంటే మీరు వివిధ ఆకారాలు నిర్వచించేందుకు అవసరమైన అన్ని పాయింట్లు అక్షాలు తెలుసుకోవలసి ఉంటుంది. బహుశా ఈ మీరు వృత్తాకార లేదా దీర్ఘచతురస్రాకార ప్రదేశాలు ముఖ్యంగా, మాప్ కొన్ని ప్రాంతాల్లో ఉంటే ఒక పెద్ద సమస్య కాదు. కానీ మీరు ఒక polygonal ఆకారంతో, అనేక ప్రాంతాల్లో ఉంటే, వాటిని మానవీయంగా సెట్ ఒక సాధారణ పని కాదు.

చిత్రం mapper సాధనం చిత్రం యూజర్ క్లిక్ చేయగల ప్రాంతాల్లో చేస్తుంది అనుగుణమైన HTML కోడ్ స్వయంచాలకంగా అనువదించబడుతుంది అలాంటి ఎంపిక చిత్రంపై దీర్ఘచతురస్ర, పాలీ, మరియు వృత్తం ఆకారాలు డ్రా అనుమతిస్తుంది.

ఇచ్చిన చిత్రంపై ఆకారాలు గీయడం తరువాత, మీరు కేవలం ఒక బటన్ క్లిక్ HTML కోడ్ రూపొందించవచ్చు మరియు కోడ్ టెక్స్ట్ఏరియా లో displayied చేయబడుతుంది. మీరు HTML కోడ్ కాపీ మరియు మీ HTML పేజీ (లు) లో దానిని ఉపయోగించవచ్చు. మీరు వ్యతిరేక ప్రక్రియ కూడా చేయవచ్చు: టెక్స్ట్ఏరియా లో HTML కోడ్ అతికించి, మీరు ఈ కోడ్ కేవలం ఒక బటన్ క్లిక్ లోడ్ చేయవచ్చు; ఈ చిత్రంపై ఆకారాలు లో అనువాదం మరియు మీరు వాటిని సవరించవచ్చు, కొత్త పోకడలు జోడించడానికి మరియు HTML కోడ్ తిరిగి రూపొందించవచ్చు. ఈ రివర్స్ విధానం మీరు ఒక పాక్షిక మ్యాపింగ్ ప్రక్రియ సేవ్ మరియు తరువాత చిత్రం ను కొనసాగించడానికి అనుమతిస్తుంది ఉపయోగపడుతుంది. టెక్స్ట్ఏరియా లో కోడ్ ఉత్పత్తి తర్వాత, మీరు ఫ్లై న టెక్స్ట్ఏరియా లో అక్షాంశాలు సవరించవచ్చు మరియు అది తిరిగి లోడ్: ఇది "మానవీయంగా" / స్థానాలు రూపకల్పన ఆకారం శుద్ధి ఉపయోగపడుతుంది.

ప్రధాన లక్షణాలు:

  • మీరు ఒక స్థానిక లేదా సుదూర చిత్రం ఎంచుకోవచ్చు
  • మీరు లక్ష్యం చిత్ర పరిమాణాలను సెట్ చేయవచ్చు: ఈ చిత్రం మీ HTML పేజీ లో ఉంటుంది పరిమాణాలు ఉన్నాయి
  • మీరు ఏ క్షణం లో చిత్రం మరియు బయటకు జూమ్ మరియు ఈ మాత్రమే చిత్రం యొక్క లక్ష్యం పరిమాణాలు మీద ఆధారపడి ఉత్పత్తి అవుతుంది నిజమైన కో జోక్యం ఉండదు. జూమ్ ఫీచర్ మీరు ఆకారాలు డ్రా సహాయం ఉపయోగపడుతుంది.
  • మీరు "href" లక్షణం "alt" లక్షణం, "id" మరియు "తరగతి" లక్షణాలను మరియు చివరికి "లక్ష్యం" లక్షణం వలే ప్రతి ఆకారం కోసం అనేక పారామితులు సెట్ చేయవచ్చు. మీరు ఆకారం ఎంచుకోవాలి పారామితి సెట్: మీరు టూల్బార్లో టాప్ ఎడమ బాణం ఎంచుకోండి మరియు తరువాత ఆకారం పై క్లిక్ చేసి ఒక ఆకారం ఎంచుకోండి.
  • చిహ్నం "పేరు", డిఫాల్ట్ url మరియు లక్ష్యం: మీరు చిహ్నం కోసం కొన్ని పారామితులు సెట్ చేయవచ్చు.
  • మీరు ఒక టూల్ బార్ నుండి ఆకారం ఎంపిక ఒక ఆకారాన్ని గీయండి చేయవచ్చు.
  • ఉపకరణపట్టీ నుండి దాన్ని ఎంచుకోవడం తరువాత, ఒక ఆకారాన్ని గీయండి, మీరు కేవలం మీరు ఆకారం మొదలు ఎక్కడ చిత్రం, మౌస్ తో క్లిక్ చేయవచ్చు.
  • ఆకారం ఒక వృత్తం ఉంటే, firts పాయింట్ కేంద్రం: (క్లిక్ లేదా విడుదల) మౌస్ కదిలే, మీరు కర్సర్ అనుసరించే ఒక వృత్తం చూడగలరు. మళ్ళీ మౌస్ క్లిక్ చేస్తే సర్కిల్ గీయడం ఆగిపోతుంది.
  • ఆకారం ఒక దీర్ఘచతురస్ర ఉంటే. మొదటి పాయింట్ మూలలో ఒకటి. (క్లిక్ లేదా విడుదల) మౌస్ కదిలే ఒక దీర్ఘచతురస్ర డ్రా ఉంటుంది. మళ్ళీ మౌస్ క్లిక్ చేస్తే డ్రాయింగ్ ఆగిపోతుంది.
  • ఆకారం పాలీ ఉంటే ప్రక్రియను భిన్నంగా ఉంటుంది: ఒక పాయింట్ సెట్ చేస్తుంది మౌస్ ప్రతి క్లిక్; ప్రస్తుత స్థానం ఎప్పుడూ ఎల్లప్పుడూ ఒక క్లోజ్డ్ ఆకారం పాలీ మేకింగ్, FIRS ఒక అనుసంధానం చేయబడివుంది; పాలీ డ్రా ఆపడానికి మీరు మౌస్ క్లిక్ రెట్టింపు ఉంటుంది (గత పాయింట్ సెట్).
  • అన్ని ఆకారాలు కోసం మీరు కూడా వాటిని "స్టాప్" బటన్ (టూల్బార్లో టాప్ ఎడమ బాణం) పై క్లిక్ డ్రా మానివేయవచ్చు.
  • మీరు చిత్రాన్ని న తరలించడానికి ఉన్నప్పుడు మౌస్ సమన్వయ చూడగలరు.
  • మీరు సరిహద్దు ఉపయోగించవచ్చు కాబట్టి అది చిత్రం కారణంగానే మీరు అంచు చిత్రం సమన్వయ గుర్తించడానికి చిత్రం చుట్టూ లేత గీతల సరిహద్దు ఉపయోగించవచ్చు: కాబట్టి, మీరు ఆకారం డ్రాయింగ్ సమయంలో సరిహద్దు అవుతుంది క్లిక్ చేయవచ్చు, సరియైన అది చిత్రం యొక్క భాగంగా ఉంది. మీరు సరిహద్దు యొక్క కుడి ఎగువ మూలలో క్లిక్ ఉదాహరణకు, మీరు ఒక పాయింట్ సెట్ (0, 0) అక్షాంశాలు. మీరు ఎడమ సరిహద్దు క్లిక్ చేస్తే, ఏ పాయింట్ లో, మీరు మొదలైనవి సమన్వయ (0, y) ఒక పాయింట్ సెట్ చేస్తుంది
  • మీరు తొలగించడానికి / పరిమాణాన్ని / ఇప్పటికే డ్రా ఆకారం ఎంచుకోండి మరియు సవరించవచ్చు. దీనిని తొలగించేందుకు మీరు ఒక పెన్సిల్ తోసిపుచ్చింది మాత్రమే ఆకారం ఎంపిక కనిపిస్తుంది టూల్బార్లో "రబ్బరు" ఉపయోగించడానికి కలిగి.
  • మీరు (ఈ నమూనా సాధనం కాదు కాబట్టి నేను రంగు సంఖ్య పరిమితంగా మరియు మీరు ప్రతి ఆకారం కోసం వేరే రంగు ఎంచుకోండి కాదు) 5 రంగులు సమితి నుండి ఆకారాలు రేఖాకృతి యొక్క రంగు ఎంచుకోవచ్చు.
  • మీరు చిత్రం పై తీసిన కొన్ని ఆకారాలు కలిగి ఉంటే మీరు టెక్స్ట్ఏరియా లో HTML కోడ్ చూస్తారు: మీరు టూల్బార్లో "స్టాప్" బటన్ ఎంచుకోండి మరియు ఆకారం ఎంపిక చేసినప్పుడు మాత్రమే ఆ కనిపిస్తుంది, "చిహ్నం" బటన్ పై క్లిక్ చేయవచ్చు మీరు ఇంకా ఒక ఆకారం డ్రా ఉండకపోతే మీరు ఒక ఖాళీ టెక్స్ట్ఏరియా చూస్తారు, కానీ మీరు కొన్ని HTML కోడ్ గత చెయ్యవచ్చు మరియు లోడ్.
  • (మీరు మాత్రమే "చిహ్నం" బటన్ పై క్లిక్ చేసిన తర్వాత చూడగలరు) "లోడ్" బటన్ పై క్లిక్, టెక్స్ట్ఏరియా ప్రస్తుతం HTML కోడ్ చిత్రంపై ఆకారాలు లో అనువదించబడుతుంది.

మీరు ఈ క్రింది లింక్ వద్ద సాధనం యొక్క పూర్తి మాన్యువల్ సంప్రదించండి చేయవచ్చు: మాన్యువల్

మీరు ఏవైనా ప్రశ్నలు ఉంటే, కేవలం ఒక వ్యాఖ్యను లేదా నాకు ఒక ఇమెయిల్ డ్రాప్!


డౌన్లోడ్
ఈ వర్గంలో ఇతర భాగాలుఈ రచయిత యొక్క అన్ని అంశాలు
వ్యాఖ్యలుతరచుగా ప్రశ్నలు మరియు సమాధానాలు కోరారు

లక్షణాలు

రూపొందించబడింది:
10 అక్టోబర్ 12

చివరి నవీకరణ:
N / A

హై రిజల్యూషన్:

అనుకూల బ్రౌజర్లు:
Firefox, Opera, Chrome

ఫైళ్ళు:
జావాస్క్రిప్ట్ JS, HTML, CSS

సాఫ్ట్వేర్ వెర్షన్:
HTML5

కీవర్డ్లు

కామర్స్, కామర్స్, ఆల్, అనువర్తనం, ప్రాంతం, కాన్వాస్, సర్కిల్, సమన్వయం, HTML5, చిత్రం, మాప్, mapper, పాలీ, దీర్ఘచతురస్ర, ఆకారం, లక్ష్యం, సాధనం, జూమ్