કેવી રીતે લિંક સાથે ચિત્રમાં ચિત્ર બનાવવા માટે? ચિત્રમાં લિંક કેવી રીતે દાખલ કરવી

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

ચાલો આપણે આ સાહસને વાસ્તવમાં ફેરવી શકીએ તે શોધી કાઢો. આ લેખમાં આપણે સમસ્યાનું નિરાકરણ માટે બે વિકલ્પો ઑફર કરીશું. એકનો ભાગ્યે જ ઉપયોગ કરવામાં આવે છે, કારણ કે તે ઘણો સમય અને પ્રયત્ન લે છે, બીજાને જાણીતા માનવામાં આવે છે. અમે બંને રીતે ચર્ચા કરીશું.

જ્યાં ચિત્ર-લિંકનો ઉપયોગ થાય છે

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

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

ચિત્રમાં લિંક શામેલ કરો

સરળ વસ્તુ ચિત્ર-લિંક છે અમે તે વિશે પ્રથમ વાત કરીશું. આ ઉદાહરણ તૈયાર સંદર્ભ છે. એટલે કે, આવી છબી પર ક્લિક કરીને, તમને નવા પૃષ્ઠ પર રીડાયરેક્ટ કરવામાં આવશે.

જો તમે જાણો છો કે એચટીએમએલ માર્કઅપ દ્વારા કેવી રીતે સામાન્ય લિન્ક સેટ કરી છે, તો તમારે સમસ્યા ન હોવી જોઈએ. માત્ર એટલો જ તફાવત એ છે કે લિંક ટેક્સ્ટની જગ્યાએ, એક છબી સ્પષ્ટ થયેલ છે.

તેથી, યોજના અમલમાં મૂકવા માટે, તમને ચિત્રની જરૂર પડશે, ઈન્ટરનેટ પર ડાઉનલોડ કરી હશે અથવા તમારા કમ્પ્યુટર પર સ્થિત થશે (તમે ઑનલાઇન મોડમાં કામ કરશો કે નહીં, ખરેખર સાઇટ પર અથવા સંપાદકોનો ઉપયોગ કરો છો).

અમે છબીના સરનામાં માટે જોઈ રહ્યા છીએ, અમે તેને લખી લો જેથી તે ભૂલી ન જાય લિંકને ઠીક કરો કે જે આ ફોટો ખોલશે.

પછી અમે નીચે લખીએ છીએ: ચિત્ર - વિશિષ્ટ કોડ . એક ચિત્ર-લિંક તેની સાથે સુયોજિત છે.

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

ચિત્રમાંથી એક મેનૂ બનાવો

વેબ પેજની માર્કઅપ લેંગ્વેજનો અભ્યાસ કરવા દરમિયાન પ્રથમ પદ્ધતિ સ્વતંત્ર રીતે વિકસાવવામાં આવી હતી. આવી મેનૂ બનાવવાથી થોડાક કલાક લાગી શકે છે.

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

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

કેવી રીતે બનાવવા માટે

ચાલો પ્રથમ પદ્ધતિ પર નજીકથી નજર કરીએ.

શરૂઆતમાં, તમને ગ્રાફિક એડિટર્સ અને HTML ના જ્ઞાનની જરૂર પડશે. એક લિંક બનાવવા માટે એક ચિત્ર તરીકે, આ પ્રકારની પૃષ્ઠ લેઆઉટ તમને પૂછશે

તેથી, જો તમે તે રીતે જવાનું નક્કી કરો છો, તો તમારે એક છબી અને એક સરળ ગ્રાફિક એડિટરની જરૂર પડશે જે તમને ચિત્રો કાપી અને તેના પર શિલાલેખ મૂકશે, સાથે સાથે તે સ્થાન જ્યાં તમે તેમને ભરી શકો છો.

જો આ તમારી પોતાની સાઇટ છે - એક સામાન્ય ગેલેરી અથવા ફાઇલોની લાઇબ્રેરી યોગ્ય છે, "VKontakte" માટે તે એક જૂથ અથવા સમુદાય આલ્બમ (પ્રાધાન્ય બંધ) હોઈ શકે છે.

ભાગો આવે તે ક્રમમાં યાદ રાખો, પછી, તમે ભાગોમાં ભાગ કાપી જોઈએ. અમે તેમને શિલાલેખ આપી અને તેને સર્વર સાથે ભરો, અમે દરેક ઉદાહરણ માટે લિંક્સ લખીએ છીએ.

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

સાઇટ મેપ બનાવવો

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

સૌ પ્રથમ, યાદ રાખો કે સાઇટ મેપ એ usemap = "# map1" આદેશનો ઉપયોગ કરીને છબી સાથે જોડાય છે, જે img ટૅગમાં સૂચવવામાં આવે છે. તેથી, સાઇટ પર છબીને ભરવાથી, ટેગ - usemap = "# નકશો નામ" માં બીજા ભાગને ઉમેરવાની ખાતરી કરો.

જોડીનો નકશો જે જોડે જોડાયેલ છે તેની આગળના ગુણને જોડી

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

લિંક વિકલ્પો

તેથી, તમારી આંખો પહેલાં તમારી પાસે તૈયાર કરેલી ચિત્ર-લિંક છે HTML તમને આ છબીની કાર્યક્ષમતામાં નોંધપાત્ર રીતે સુધારિત કરવાની પરવાનગી આપે છે - સંદર્ભ માટે તે તેના પર વિશિષ્ટ ક્ષેત્ર પ્રકાશિત કરે છે. આ તમામ વિશેષ પરિમાણો દ્વારા સેટ કરવામાં આવે છે, જે હવે ચર્ચા કરવામાં આવશે.

ચાલો જોડની મૂળભૂત પરિમાણો વિશે થોડું વાત કરીએ

આગળ જોડી ટૅગ <નકશો> અંદર એક વધુ ટેગ સોંપાયેલ છે - <વિસ્તાર>, જે સંદર્ભ વિસ્તારો વર્ણવે છે. તે એક જોડ નથી, અને, સ્વાભાવિક રીતે, તેના પોતાના પરિમાણો છે.

ખૂબ જ પ્રથમ આકાર છે. તેની સાથે, વેબમાસ્ટર વિસ્તારના દૃશ્યને સુયોજિત કરે છે. તે હોઈ શકે છે:

• વર્તુળ - વર્તુળ;
• લંબચોરસ લંબચોરસ;
• બહુકોણ - પોલી;
• ચિત્ર બાકીના મૂળભૂત છે.

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

અમે એ જગ્યાએ જાણીતા href નો ઉલ્લેખ પણ કરીએ છીએ, જે લિંકનું સરનામું સેટ કરે છે.

અને ઉલ્લેખિત છેલ્લો પરિમાણ નોહરેફ છે. તે દર્શાવે છે કે સ્પષ્ટ થયેલ અવકાશ એક લિંક નથી.

અલબત્ત, આ પેરામીટરની સંપૂર્ણ સૂચિ નથી કે જે ચિત્ર-લિંક અથવા નકશા પર સેટ કરી શકાય. પરંતુ તે જ સમયે તે તેજસ્વી અને રંગીન કડી અથવા તેમાંથી એક સંપૂર્ણ સિસ્ટમ બનાવવા માટે પૂરતા છે.

ટિપ્સ

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

સાઇટનો નકશો બનાવતી વખતે, નરમ, બિન-બળતરાના પેટર્નવાળી છબીઓ પસંદ કરવા ભલામણ કરવામાં આવે છે. મને વિશ્વાસ છે કે હંમેશાં સફળતા માટે કી એક તેજસ્વી ચિત્ર છે-એક લિંક. "VKontakte", જો કે, ઘણી વખત નવા મુલાકાતીઓને આકર્ષવા માટે તેજ અને તેજસ્વીતા પર ધ્યાન કેન્દ્રિત કરે છે.

તારણો

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