Useful Topic 

Share this website 

વેબસાઇટ[Website] માં, પોસ્ટ[Post] માં તેમજ HTML Series માં કોઈ મુદા[Point] માં, વિષય [Topic] માં કશાય માં કશુય ન ખબર પડી હોય તો નીચે Comment કરી શંકા[Doubt] ઉકેલી[Solve] શકો છો.     

  • ઘણી વેબ સાઇટના હોમ પેજમાં આકૃતિ બતાવવામાં આવેલી હોય છે. આ આકૃતિના જુદા જુદા ભાગો પર ક્લિક કરવાથી વેબ સાઇટના જુદા જુદા વિભાગો જોઈ શકાય છે. ઉદાહરણ તરીકે, આકૃતિના એક ભાગ તરીકે સમાચારને લગતો આઇકોન (કે ચિત્ર) હોય, બીજા ભાગ તરીકે chatને લગતો આઇકોન (કે ચિત્ર) હોય અને ત્રીજા ભાગ તરીકે ફાઈલને ડાઉનલોડ કરવા માટેનો આઇકોન (કે ચિત્ર) હોય. હવે જો વેબ સાઇટના મુલાકાતીને હોમ પેજ પરથી સમાચાર જોવા જવું હોય, તો તે સમાચારના આઇકોન (ચિત્ર) પર ક્લિક કરીને જઈ શકે છે. આમ, આઇકોન(ચિત્રો)ને અથવા હૉટ સ્પૉટને ભેગા કરવાથી મળતી આકૃતિને આકૃતિ નકશો (Image map) કહે છે.
  • આકૃતિ નકશા(Image map)ના કુલ બે પ્રકારો છે: (1) સર્વર બાજુ અને (2) ક્લાયન્ટ બાજુ. અહીં આપણે ક્લાયન્ટ (વપરાશકર્તા) બાજુ વિશે શીખીશું.
  • Image map માં એક મુખ્ય છબીનાં વિવિધ ચિત્રો કે ભાગને માટે હૉટ સ્પૉટ બનાવવાની જરૂર રહે છે. હૉટ સ્પૉટના સ્થાન છબીની ઉપરની બાજુના ડાબા ખૂણેથી x અને y પ્રતિષ્ઠાપકો (co-ordinates) માપીને દર્શાવવામાં આવે છે. આ પ્રતિષ્ઠાપકો બે રીતે ઉપયોગમાં લેવામાં આવે છેઃ
  • (1) હૉટ સ્પૉટ ક્યાં આવેલા છે તે દર્શાવવા.
  • (2) ક્લિક મારફતે ઉપયોગકર્તા દ્વારા પૂરા પાડવામાં આવેલા પ્રતિષ્ઠાપકોને સરખાવવા.
  • નોંધ : ઉપયોગકર્તા બાજુ બ્રાઉઝર ઉપયોગકર્તાની ક્લિકના પ્રતિષ્ઠાપકોને ઓળખી કાઢે છે અને ઉપયોગકર્તાને દર્શાવેલ વેબ પેજ પર લઈ જાય છે.
  • આકૃતિ નકશો વેબ પેજમાં દર્શાવવા માટેનાં જરૂરી પગલાં, ટૅગ તથા નિયમોની સમજઃ 
( 1 ) સૌપ્રથમ યોગ્ય ‘ઇમેજ ક્રિએશન ટૂલ’(Paint જેવા)નો ઉપયોગ કરી વિવિધ છબી ધરાવતો આકૃતિ નકશો તૈયાર કરો અને તેનો સંગ્રહ કરો.

(2) આકૃતિ નકશો દર્શાવવા Image ટંગના src, height, width, alt, usemap વગેરે ગુણધર્મોનો ઉપયોગ કરો. <img> ટંગના usemap ગુજ઼ધર્મની મદદથી નકશાને નામ આપો.

(3) <map> ટંગ: <map> ટંગનો ઉપયોગ મૅપનું નામ આપવા માટે થાય છે. અહીં <map> ટંગના name ગુણધર્મને તે જ કિંમત આપો કે જે <img> ટંગના usemap ગુણધર્મને આપવામાં આવેલ હોય.

(4) <Area> ટૅગ : <Area> ટંગનો ઉપયોગ <map> ટંગની અંદર જ કરવામાં આવે છે.

નોંધ : <map>ટંગનો ઉપયોગ <img> ટંગની અંદર જ કરવો જરૂરી છે. દરેક <Area> ટૅગ હૉટ સ્પૉટના ચોક્કસ વિસ્તારને દર્શાવવા માટે વપરાય છે અને તે વિસ્તાર પર ક્લિક કરતાં URL ફાઈલને જોડવાનું કાર્ય થાય છે.

(5) <Area> ટંગના shape ગુણધર્મનો ઉપયોગ વિસ્તારનો પ્રકાર દર્શાવવા થાય છે. shapeની કિંમતો નીચે પ્રમાણે આપી શકાય છે :
( 1 ) react – સમચતુષ્કોણ પ્રકારનો વિસ્તાર બતાવવા માટે 
(2) circle વર્તુળ પ્રકારનો વિસ્તાર બતાવવા માટે
(3) poly - બહુભુજ આકૃતિ પ્રકારનો વિસ્તાર બતાવવા માટે
(6) <Area> ટંગના coords ગુણધર્મનો ઉપયોગ જે-તે shapeનું કદ (વિસ્તાર) દર્શાવવા માટે થાય છે. 
(1) react માટેનું કદ ડાબી બાજુના ઉપરના ખૂણાથી ચાલુ કરીને જમણી બાજુના નીચેના ખુણાઓનું દર્શાવવાનું રહે છે. 
(2) circle માટેનું કદ દર્શાવવા વર્તુળની મધ્યબિંદુના (x, y) અક્ષાંક અને તેની પાછળ વર્તુળની ત્રિજ્યા લખવામાં આવે છે.
(3) poly માટેનું કદ દર્શાવવા x, y અક્ષાંકો કે જે બહુભુજ આકૃતિની જુદી જુદી બાજુઓનાં પ્રારંભિક બિંદુઓ છે. તેમને દર્શાવવામાં આવે છે.

(7) <area> ટૅગ સાથે alt ગુણધર્મનો ઉપયોગ છબીનું વર્ણન દર્શાવવા માટે કરવામાં આવે છે. 
(8) અંતમાં <area> ટૅગ સાથે href ગુણધર્મનો ઉપયોગ અન્ય વેબ પેજ સાથે જોડાણ કરવા માટેની ફાઈલ દર્શાવવા માટે કરવામાં આવે છે.
(9) <area> ટૅગ અયુગ્મ ટૅગ હોવાથી તેનો અંત ટૅગ નથી. 
(10) </map>થી <map> ટંગનો અંત દર્શાવો.
Dev Gajjar 
Gujju Technology