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 પણ પરીક્ષણ કરવામાં આવ્યું છે


નોંધ: જો તમે લાઈવ પૂર્વદર્શન લિંક જોઈ શકો છો કે સાધનની આવૃત્તિમાં, સાધન મર્યાદિત આવૃત્તિ છે. આ આવૃત્તિ સાથે તમે માત્ર ઘર પાનાં પર યાદી થયેલ ઈમેજો એક ચોક્કસ સમૂહ, લાવી શકો છો. એક છબી લોડ કર્યા પછી તમે બધા આકાર ડ્રો કરી શકો છો, પરંતુ માત્ર પ્રથમ 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 લક્ષણ સેટ હોય છે. તમે ઇચ્છો તરીકે <નકશો> અને </ નકશો> વચ્ચે તમે સંકળાયેલ છબી પર વપરાશકર્તા શકાય તેવા વિસ્તાર રજૂ દરેક એક ઘણા <વિસ્તાર> ટૅગ્સ વ્યાખ્યાયિત કરી શકો છો. RECT, પોલી અને સર્કલ: દરેક વિસ્તાર 3 કિંમતો એક હોઈ શકે છે કે જે આકાર લક્ષણ હોવું આવશ્યક છે. આ RECT આકાર સંપૂર્ણપણે 2 ગુણો દ્વારા વ્યાખ્યાયિત કરવામાં આવે છે, એક પોલી આકાર પોઈન્ટ શ્રેણી દ્વારા વ્યાખ્યાયિત કરવામાં આવે છે અને એક વર્તુળ આકાર કેન્દ્ર પ્રતિનિધિત્વ કરતી એક બિંદુ છે, અને ત્રિજ્યા દ્વારા વ્યાખ્યાયિત કરવામાં આવે છે. બધા પોઈન્ટ કોઓર્ડિનેટ્સ એક દંપતિ દ્વારા વ્યાખ્યાયિત કરવામાં આવે છે, છબી ઉપર ડાબી ખૂણે સંબંધીઓ, પિક્સેલમાં વ્યક્ત કરી હતી. આકાર લક્ષણ પણ અગાઉના આકાર કોઈપણ સાથે જોડાયેલ નથી છબી ભાગો નો સંદર્ભ લો કે જે "મૂળભૂત" કિંમત હોઈ શકે છે. આકાર નકશામાં વ્યાખ્યાયિત કરવામાં આવે છે કે જે ક્રમમાં ખૂબ જ મહત્વપૂર્ણ છે કે, તેના બદલે, ધ્યાનમાં લો: જો તમે નકશો પ્રથમ આકાર તરીકે "મૂળભૂત" આકાર વ્યાખ્યાયિત તો, તે બધા વારાફરતી આકાર પર ફરીથી લખી નાંખશે "મૂળભૂત" કારણ કે આકાર સમગ્ર છબી ઉલ્લેખ કરે છે. તમે એક મોટી આકાર માં થોડી આકાર વ્યાખ્યાયિત કરી શકો છો, પરંતુ પછી તમે મોટા એક પ્રથમ થોડી આકાર વ્યાખ્યાયિત કરવા માટે હોય છે અને આ દરેક અન્ય ઓવરલેપ કે આકાર સાથે પણ સાચું છે. 2 આકાર ઇમેજ એક ભાગ શેર નહિં, તો પ્રથમ વ્યાખ્યાયિત આકાર, જીતે છે.

તમે જાતે જ એક છબી નકશો સેટ કરવા માંગો છો, તો તમે વિવિધ આકાર નક્કી કરવા માટે જરૂરી બધા પોઈન્ટ કોઓર્ડિનેટ્સ ખબર હોય છે. કદાચ આ તમે ગોળ અથવા લંબચોરસ વિસ્તારમાં છે, ખાસ કરીને જો તમે નકશા પર થોડા વિસ્તારોમાં હોય તો એક મોટી સમસ્યા નથી. પરંતુ તમે બહુકોણીય આકાર, કેટલાક વિસ્તારોમાં હોય તો, તેમને જાતે સુયોજિત સરળ કાર્ય નથી.

છબી મેપર સાધન તમને વપરાશકર્તા શકાય તેવા ઇમેજ વિસ્તારોમાં બનાવે છે કે અનુરૂપ HTML કોડ આપોઆપ અનુવાદ કરવામાં આવશે જેમ કે પસંદ કરેલી છબી પર RECT, પોલી, અને વર્તુળ તરીકે આકાર ડ્રો કરવા માટે પરવાનગી આપે.

આપેલ ઇમેજ પર આકાર દોરવાનું પછી, તમે માત્ર એક બટન પર ક્લિક HTML કોડ પેદા કરી શકે છે અને કોડ એક textarea માં displayied આવશે. તમે HTML કોડ કૉપિ કરો અને તમારા HTML પાનું (ઓ) માં તેનો ઉપયોગ કરી શકો છો. તમે વિપરીત પ્રક્રિયા કરી પણ કરી શકો છો: textarea માં HTML કોડ પેસ્ટ, તમે આ કોડ ફક્ત એક બટન પર ક્લિક લોડ કરી શકો છો; આ છબી પર આકાર અનુવાદિત કરવામાં આવશે અને તમે તેમને સુધારી નવા આકારો ઉમેરો અને HTML કોડ ફરી પેદા કરી શકે છે. આ વિપરીત પદ્ધતિ તમે આંશિક મેપિંગ પ્રક્રિયા સાચવવા માટે અને બાદમાં છબી નકશો સુધી ચાલુ રાખવા માટે પરવાનગી આપે છે માટે ઉપયોગી છે. Textarea માં કોડ પેદા કર્યા પછી, તમે ફ્લાય પર textarea માં કોઓર્ડિનેટ્સ સુધારી શકે છે અને તેને ફરીથી લોડ: તે પણ "જાતે" / સ્થિતિ ડિઝાઇન આકાર રિફાઇન કરવા માટે ઉપયોગી છે.

મુખ્ય લાક્ષણિકતાઓ:

  • જો તમે સ્થાનિક અથવા દૂરસ્થ ઈમેજ પસંદ કરી શકો છો
  • જો લક્ષ્ય ઇમેજ માપ સુયોજિત કરી શકો છો: આ છબી તમારી HTML પાનામાં છે કે માપ છે
  • તમે અને કોઈપણ ક્ષણ છબી બહાર ઝૂમ કરી શકો છો અને આ ફક્ત ઇમેજ લક્ષ્ય કદ પર આધાર રાખે છે કે જે પેદા થશે કે પ્રત્યક્ષ કોઓર્ડિનેટ્સ, સાથે દખલ નહીં. આ ઝૂમ લક્ષણ માત્ર તમે જ આકાર ડ્રો કરવા માટે મદદ કરવા માટે જ ઉપયોગી છે.
  • તમે જેમ કે "href" લક્ષણની, આ "Alt" લક્ષણની, આ "id" અને "વર્ગ" વિશેષતાઓ અને છેલ્લે "લક્ષ્ય" લક્ષણની તરીકે દરેક આકાર માટે વિવિધ પરિમાણો સુયોજિત કરી શકો છો. તમે આકાર પસંદ કરવા માટે હોય છે પરિમાણ સેટ કરવા માટે: તમે ટૂલબારમાં ઉપર ડાબી તીર પસંદ કરો અને પછી આકાર પર ક્લિક કરી એક આકાર પસંદ કરો.
  • નકશા "નામ", મૂળભૂત URL અને લક્ષ્ય: તમે નકશા માટે કેટલાક પરિમાણો સુયોજિત કરી શકો છો.
  • તમે એક સાધન પટ્ટીમાંથી આકાર પસંદ આકાર ડ્રો કરી શકો છો.
  • ટૂલબાર તે પસંદ કર્યા પછી, એક આકાર ડ્રો કરવા માટે, તમે ખાલી તમે આકાર શરૂ કરવા માંગો છો જ્યાં છબી પર માઉસ સાથે ક્લિક કરી શકો છો.
  • આકાર એક વર્તુળ છે, તો firts બિંદુ કેન્દ્ર છે: (ક્લિક અથવા પ્રકાશિત) માઉસ ખસેડી, તમે કર્સરને અનુસરો કે વર્તુળ જોઈ શકો છો. ફરી માઉસ ક્લિક કરવાનું તમને વર્તુળ દોરવાનું બંધ કરશે.
  • આકાર આરઇસીટી છે. પ્રથમ બિંદુ ખૂણે એક છે. (ક્લિક અથવા પ્રકાશિત) માઉસ ખસેડવું એક આરઇસીટી ડ્રો થશે. ફરી માઉસ ક્લિક કરવાનું રેખાંકન કરવાનું બંધ કરશે.
  • આકાર પોલી છે અને આ પ્રક્રિયા થોડી અલગ છે: એક બિંદુ સેટ કરશે માઉસ દરેક ક્લિક; વર્તમાન બિંદુ હંમેશા હંમેશા માટે બંધ આકાર પોલી બનાવીને FIRs એક સાથે જોડાયેલ છે; પોલી ડ્રો રોકવા માટે તમે માઉસ ક્લિક કરો ડબલ છે (છેલ્લા બિંદુ સુયોજિત).
  • બધા આકાર માટે તમે પણ તેમને "સ્ટોપ" બટન (ટૂલબાર માં ઉપર ડાબી તીર) પર ક્લિક ડ્રો બંધ કરી શકો છો.
  • જો તમે છબી પર તેને ખસેડવા જ્યારે માઉસ સંકલન જોઈ શકો છો.
  • તમે સરહદ ઉપયોગ કરી શકો છો તે છબી ભાગ હતો, કારણ કે તમે ઇમેજ ની ધાર કોઓર્ડિનેટ્સ નક્કી કરવા માટે ઇમેજ આસપાસ ગ્રે રેખાઓ સરહદ ઉપયોગ કરી શકો છો: તેથી, તમે આકાર ચિત્ર દરમિયાન સરહદ પર ક્લિક કરી શકો છો, જસ તે છબી ભાગ હતો. તમે સરહદ ના ઉપર ડાબી ખૂણે પર ક્લિક કરો જો ઉદાહરણ તરીકે, તમે એક બિંદુ સુયોજિત કરશે (0, 0) સંકલન. તમે ડાબી કિનારી ક્લિક કરો, તો કોઈપણ બિંદુએ, તમે વગેરે, સંકલન (0, વાય) ખાતે બિંદુ સેટ કરશે
  • જો તમે તેને દૂર / માપ બદલો / પહેલાથી દોરેલા આકાર પસંદ કરો અને સંશોધિત કરી શકો છો. તે દૂર કરવા માટે તમે એક પેંસિલ ચાલુ ફક્ત એક આકાર પસંદ તરીકે દેખાશે કે ટૂલબાર માં "રબર" વાપરવા માટે હોય છે.
  • તમે (આ ડિઝાઇન સાધન નથી, તેથી હું રંગ સંખ્યા મર્યાદિત છે અને તમને દરેક આકાર માટે એક અલગ રંગ પસંદ કરી શકો છો) 5 રંગો સમૂહ ના આકાર ના ઢાળ ના રંગ પસંદ કરી શકો છો.
  • , તમે છબી પર દોરેલા અમુક આકાર હોય છે, તો તમે એક textarea માં HTML કોડ જોશે: તમે ટૂલબાર પર "સ્ટોપ" બટન પસંદ કરો અને કોઈ આકાર પસંદ થયેલ છે ત્યારે જ દેખાય છે, "નકશો" બટન પર ક્લિક કરી શકો છો તમે હજુ સુધી આકાર દોરેલા હોય, તો તમે ખાલી textarea દેખાશે, પણ જો તમે તેને કેટલાક HTML કોડ ભૂતકાળ શકે છે અને તે ભાર.
  • (જો તમે "નકશો" બટન પર ક્લિક કર્યા પછી જોઈ શકે છે) "ભાર" બટન પર ક્લિક કરીને, textarea માં HTML કોડ હાજર છબી પર આકાર અનુવાદિત કરવામાં આવશે.

તમે નીચેની લિંક પર ટૂલ ના સંપૂર્ણ માર્ગદર્શિકા સંપર્ક કરી શકો છો: ઓનલાઇન મેન્યુઅલ

જો તમે કોઇ પ્રશ્નો હોય, તો માત્ર એક ટિપ્પણી મૂકો અથવા મને ઇમેઇલ મૂકવા!


ડાઉનલોડ કરો
આ શ્રેણી માં અન્ય ઘટકોઆ લેખક બધા ઘટકો
ટિપ્પણીઓવારંવાર પૂછાતા પ્રશ્નો અને જવાબો પૂછવામાં

ગુણધર્મો

બનાવનાર:
10 ઓક્ટોબર 12

છેલ્લા સુધારાની તારીખ:
N / A

હાઇ ઠરાવ:
કોઈ

સુસંગત બ્રાઉઝર્સ:
ફાયરફોક્સ, ઓપેરા, Chrome ને

ફાઈલો:
જાવાસ્ક્રિપ્ટ જેએસ, એચટીએમએલ, સીએસએસ

સોફ્ટવેર આવૃત્તિ:
HTML5

કીવર્ડ્સ

ઈકોમર્સ, ઈકોમર્સ, તમામ વસ્તુઓ, એપ્લિકેશન, વિસ્તાર, કેનવાસ, વર્તુળ, સંકલન, HTML5, છબી, નકશો, મેપર, પોલી, RECT, આકાર, લક્ષ્ય, સાધન, ઝૂમ