Dreamweaver સાથે એક છબી નકશો બનાવવા માટે ટિપ્સ

ઇમેજ નકશાનો ઉપયોગ કરવા માટે લાભો અને ખામીઓ

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

ઉદાહરણો - યુનાઈટેડ સ્ટેટ્સની છબી સાથે ગ્રાફિક ફાઇલ ધરાવતી કલ્પના કરો. જો તમે ઇચ્છતા હોવ કે દરેક રાજ્ય "ક્લિક કરી શકાય તેવું છે" જેથી તેઓ તે ચોક્કસ રાજ્યના પૃષ્ઠો પર જાય, તો તમે એક છબી નકશો સાથે કરી શકો છો. એ જ રીતે, જો તમારી પાસે મ્યુઝિક બેન્ડની છબી હોય, તો તમે દરેક વ્યક્તિને બેન્ડ મેમ્બરના અનુગામી પેજ પર ક્લિક કરવા માટે ઇમેજ મેપનો ઉપયોગ કરી શકો છો.

શું છબી નકશા ઉપયોગી છે? તેઓ ચોક્કસપણે હતા, પરંતુ તેઓ આજે વેબ પર તરફેણમાં ના પડી ગયા છે આ ઓછામાં ઓછું એક ભાગ છે, કારણ કે છબી નકશાને કામ કરવા માટે ચોક્કસ કોઓર્ડિનેટ્સની જરૂર છે. સાઇટ્સ આજે પ્રતિનિધિત્વ કરવા માટે બનાવવામાં આવે છે અને સ્ક્રીન અથવા ડિવાઇસના કદના આધારે છબીઓ સ્કેલ . આનો અર્થ એ છે કે પ્રી-સેટ કોઓર્ડિનેટ્સ, જે છબીઓ નકશા કાર્ય કરે છે, જ્યારે કોઈ સાઇટ ભીંગડા અને છબીઓનો કદ બદલાય ત્યારે અલગ પડે છે. આ જ કારણ છે કે છબી નકશા આજે પ્રોડક્શનની સાઇટ્સ પર ભાગ્યે જ ઉપયોગમાં લેવામાં આવે છે, પરંતુ તેઓ હજુ પણ જનતા અથવા એવા ઉદાહરણો માટે લાભ ધરાવે છે જ્યાં તમે પૃષ્ઠના કદને ફરજ પાડતા હોવ.

કેવી રીતે ઇમેજ મેપ બનાવવું તે જાણવા માગો, ખાસ કરીને ડ્રીવવેવર સાથે કેવી રીતે કરવું? . આ પ્રક્રિયા ખાસ કરીને મુશ્કેલ નથી, પણ તે સરળ નથી, તેથી તમારે શરુ થવું તે પહેલાં તમારે થોડો અનુભવ કરવો જોઈએ.

શરૂ કરી રહ્યા છીએ

ચાલો, શરુ કરીએ. તમારે પ્રથમ પગલાં લેવાની જરૂર છે તે તમારા વેબ પૃષ્ઠ પર એક છબી ઉમેરવાની છે. પછી તમે તેને પ્રકાશિત કરવા માટે છબી પર ક્લિક કરશો. ત્યાંથી, તમારે પ્રોપર્ટીઝ મેનૂમાં જવાની જરૂર છે (અને ત્રણ હોટસ્પોટ રેખાંકન ટૂલ્સમાંથી એક પર ક્લિક કરો: લંબચોરસ, વર્તુળ અથવા બહુકોણ. તમારી છબીને નામ આપવાનું ભૂલશો નહીં, જે તમે પ્રોપર્ટી બારમાં કરી શકો છો. તે તમને જે કંઇપણ ઇચ્છે છે. ઉદાહરણ તરીકે "નકશો" નો ઉપયોગ કરો.

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

હોટસ્પોટ માટેની પ્રોપર્ટીઝ વિંડોમાં, હોટસ્પોટને લિંક કરવા માટે પૃષ્ઠમાં ટાઇપ કરો અથવા બ્રાઉઝ કરો આ તે લિંકબલ વિસ્તાર બનાવવાનું છે. જ્યાં સુધી તમારો નકશો પૂર્ણ ન થાય ત્યાં સુધી હોટસ્પોટ્સ ઉમેરીને ચાલુ રાખો અને તમે ઍડ કરવા માગતા હોય તે તમામ લિંક્સ ઉમેરવામાં આવ્યા છે.

એકવાર તમે પૂર્ણ કરી લો તે પછી, એક બ્રાઉઝરમાં તમારા ઇમેજ મેપને પુનઃપ્રદર્શન કરો જેથી કરીને ખાતરી થાય કે તે યોગ્ય રીતે કાર્ય કરે છે. તે યોગ્ય સ્રોત અથવા વેબ પૃષ્ઠ પર જાય છે તેની ખાતરી કરવા દરેક લિંકને ક્લિક કરો

છબી નકશા ગેરલાભો

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

છબી નકશા પણ ધીમેથી લોડ થઈ શકે છે તેઓ વેબસાઇટ પર ઘણી વખત ઉપયોગ ન થવો જોઈએ કારણ કે તેઓ વેબ સાઇટનાં દરેક પૃષ્ઠ પર ઉપયોગમાં લેવા માટે ખૂબ જ જગ્યા ધરાવે છે. એક જ પૃષ્ઠ પર ઘણાં બધાં છબી નકશા ગંભીર વિક્ષેપની બનાવશે અને સાઇટ પ્રદર્શન પર ભારે અસર કરશે.

છેલ્લે, દૃશ્ય સમસ્યાઓવાળા વપરાશકારો માટે એક્સેસ કરવા માટે છબી નકશા સરળ નથી. જો તમે ઇમેજ નકશાનો ઉપયોગ કર્યો હોય, તો તમારે વૈકલ્પિક તરીકે આ વપરાશકારો માટે બીજી નેવિગેશન સિસ્ટમ બનાવવી જોઈએ.

નીચે લીટી

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

જેનિફર કિનાન દ્વારા મૂળ લેખ. 9/7/17 ના રોજ જેરેમી ગીરર્ડ દ્વારા સંપાદિત