ایچ ٹی ایم ایل میں تصویر کے مختلف حصوں کو لنکس میں تبدیل کریں

HTML میں امیج میپ بنانے کی سہولت دی گئی ہے کہ آپ کسی بھی تصویر کے مختلف حصوں پر لنکس بنا سکتے ہیں۔ مثلاً‌ کسی میڈیکل پراجیکٹ میں انسانی جسم کی تصویر کے اوپر مختلف لنکس بنائے جا سکتے ہیں، یعنی جسم کے اعضاء پر کلک کرنے سے الگ الگ ویب پیجز کھولے جا سکتے ہیں۔ یا مثال کے طور پر کسی ملک کے نقشے کی تصویر کے اوپر مختلف شہروں کے لیے الگ الگ لنکس بنا کر انہیں مختلف ویب پیجز وغیرہ کے ساتھ منسلک کیا جا سکتا ہے۔ یا بالفرض آپ نے کسی موضوع پر ایک انفوگرافک تیار کی ہے اور آپ چاہتے ہیں کہ اس کے مختلف حصوں پر کلک کرنے سے کسی ویڈیو پر مشتمل ویب پیج کھل جائے، کوئی ڈاکومنٹ ڈاؤن لوڈ ہو جائے، یا کوئی ویب سائیٹ کھل جائے وغیرہ۔ آئیں اس کا طریقہ دیکھتے ہیں:


مثال کے طور پر درج ذیل تصویر کے لیے تین مختلف لنکس پر مشتمل امیج میپ تیار کیا گیا ہے۔ تصویر پر نیلے نشانوں والے حصوں پر کلک کر کے دیکھیں:

تصویر کے مختلف حصے جنہیں لنکس میں تبدیل کیا گیا ہے
Chand SitaraPolygonMazar e Iqbal, Lahore

تصویر کے کسی حصے کے کورڈینیٹس معلوم کرنے کے لیے اسے ونڈوز کے Paint پروگرام میں کھولیں۔ پھر ماؤس کے پوائنٹر کو تصویر کے مطلوبہ حصے پر لائیں، پینٹ پروگرام کی اسٹیٹس بار پر نیچے یہ کورڈینیٹس دیکھے جا سکتے ہیں۔

ونڈوز کے پینٹ پروگرام میں تصویر کے مطلوبہ حصے کے کورڈینیٹس حاصل کریں


درج ذیل تصویر میں آپ دیکھ رہے ہیں کہ دائرے، پولی گان، اور مستطیل کے کوارڈینیٹس پر نشانات لگائے گئے ہیں۔ مزید وضاحت کے لیے ان کورڈنیٹس کا نیچے دیے گئے کوڈ کے ساتھ موازنہ کریں۔

Circle کے لیے تین نمبرز درکار ہوتے ہیں- (x, y, radius)
Polygon کی مدد سے پیچیدہ شکلوں کے لیے لنکس تیار کیے جا سکتے ہیں- (.... x1,y1, x2,y2, x3,y3, x4,y4)
Rectangle کے لیے چار نمبرز درکار ہوتے ہیں- (Left-x, Left-y, Right-x, Right-y)

تصویر پر امیج میپ کی مختلف شکلوں کے لیے کورڈینیٹس


کوڈ کی وضاحت

  1. درج ذیل کوڈ میں آپ img ٹیگ کے اندر usemap ایٹری بیوٹ دیکھ رہے ہیں، اس کی مدد سے اس میپ کا نام بتایا گیا ہے جو اس تصویر کے لیے استعمال کیا گیا ہے۔
  2. اس کے بعد آپ یہ map ٹیگ دیکھ رہے ہیں جس کے اندر تین area ٹیگز ہیں۔ تصویر پر آپ کو جتنے لنکس کی ضرورت ہو اتنے area ٹیگز بنانا ہوں گے۔ area ٹیگ کے shapeایٹری بیوٹ کی مدد سے وہ شکل بتائی جا سکتی ہے جس کے مطابق تصویر پر لنک تیار ہوگا،اور coords ایٹری بیوٹ کی مدد سے تصویر پر اس شکل کی جگہ اور سائز مقرر کیے جا سکتے ہیں، جبکہ href ایٹری بیوٹ کی مدد سے اس ویب پیج یا فائل کا لنک مہیا کیا جائے گا جو تصویر کے اس حصے پر کلک کرنے سے کھلے گی۔
  3. <!DOCTYPE html>
    <html>
    <head><title>HTML Image Map</title></head>
    <body>
    	<img src ="pakistani-rupee.jpg" alt="One Rupee" usemap="#one-rupee">
     
    	<map name="one-rupee">
    		<area 
    		shape="circle" 
    		coords="382,150, 68"  
    		href="https://www.google.com/search?q=pakistani+flag&tbm=isch" 
    		target="_blank"
    		alt="Chand Sitara">
     
    		<area 
    		shape="poly" 
    		coords="123,63,189,93,215,156,189,224,122,252,59,226,32,158,59,92" 
    		href="https://www.google.com/search?q=define+polygon" 
    		target="_blank"
    		alt="Polygon">
     
    		<area 
    		shape="rect" 
    		coords="67,393, 277,528" 
    		href="https://www.google.com/search?q=mazar+e+iqbal+lahore&tbm=isch" 
    		target="_blank" 
    		alt="Mazar e Iqbal, Lahore">
    	</map> 
    </body>

Categories: