HTML Tutorial
HTML Tutorial

HTML - تصاویر کے لنکس


ہم نے دیکھا ہے کہ ٹیکسٹ کا استعمال کر کے ہائپر ٹیکسٹ لنک کیسے بنایا جاتا ہے اور ہم نے یہ بھی سیکھا ہے کہ ہم ویب پیجز میں تصاویر کا استعمال کیسے کرتے ہیں۔ اب ہم یہ سیکھیں گے کہ تصاویر کا استعمال ہائپر لنکس بنانے کے لئے کیسے ہوتا ہے۔

مثال

تصویر کو ہائپر لنک کے طور پر استعمال کرنا بہت آسان ہے۔ ہمیں صرف ٹیکسٹ کی جگہ تصویر کا استعمال کرنا ہوتا ہے جیسا کہ نیچے دکھایا گیا ہے -

<!DOCTYPE html>
        <html>
        
           <head>
              <title>تصویر ہائپر لنک مثال</title>
           </head>
        	
           <body>
              <p>نیچے دیے گئے لنک پر کلک کریں</p>
              <a href = "https://tutorialhub.in" target = "_self"> 
                 <img src = "/images/logo.png" alt = "ٹیوٹوریلس پوائنٹ" border = "0"/> 
              </a>
           </body>
        	
        </html>

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

یہ تصاویر کا استعمال کر کے ہائپر لنکس بنانے کا سب سے سادہ طریقہ تھا۔ اگلے ہم دیکھیں گے کہ ہم کس طرح ماؤس-سینسٹوٹو لنکس بنا سکتے ہیں۔

ماؤس-سینسٹوٹو تصاویر

HTML اور XHTML معیارات فیچر فراہم کرتے ہیں جو آپ کو ایک ہی تصویر میں مختلف لنکس شامل کرنے کی اجازت دیتے ہیں۔ آپ مختلف تصاویر پر مختلف کوارڈینیٹس پر مبنی ایک ہی تصویر میں مختلف لنکس بنا سکتے ہیں۔ ایسی ماؤس-سینسٹوٹو تصاویر کو تصویر میپس کہا جاتا ہے۔

تصاویر میپس بنانے کے دو طریقے ہیں -

  • سرور-سائیڈ تصویر میپس − یہ ismap ٹیگ کی خصوصیت کے ذریعے فعال ہوتا ہے اور اس کے لئے سرور اور متعلقہ تصویر میپ پروسیسنگ ایپلیکیشنز کا دسترس ہونا ضروری ہے۔

  • کلائنٹ-سائیڈ تصویر میپس − یہ usemap ٹیگ کے ساتھ مل کر <map> اور <area> ٹیگس کے ساتھ بنایا جاتا ہے۔

سرور-سائیڈ تصویر میپس

یہاں آپ بس اپنی تصویر کو ہائپر لنک کے اندر ڈالتے ہیں اور ismap خصوصیت کا استعمال کرتے ہیں جو اسے خصوصی تصویر بناتی ہے۔ جب صارف تصویر کے اندر کہیں کلک کرتا ہے، براؤزر ماؤس پوائنٹر کے کوارڈینیٹس کو ٹیگ میں مخصوص یو آر ایل کے ساتھ ویب سرور کو بھیجتا ہے۔ سرور ماؤس پوائنٹر کے کوارڈینیٹس کا استعمال کرتا ہے تاکہ براؤزر کو موصول ہونے والے ڈاکیومنٹ کا تعین کر سکے۔

ismap کا استعمال ہونے پر، محتوی <a> ٹیگ کے href خصوصیت میں ایک سرور ایپلیکیشن کا یو آر ایل ہونا لازمی ہے جیسے کہ cgi یا PHP اسکرپٹ وغیرہ۔

ماؤس کی پوزیشن کی کوارڈینیٹس تصویر کے اوپر-بائیں کونے سے انٹیگر کردہ ہوتی ہیں، جو (0,0) سے شروع ہوتی ہیں۔ یہ کوارڈینیٹس، ایک سوال کی علامت سے پہلے، یو آر ایل کے آخر میں شامل ہوتی ہیں۔

مثال کے طور پر، اگر صارف مندرجہ ذیل تصویر کے بائیں-اوپر کونے سے 20 پکسل اور نیچے کی طرف 30 پکسل کلک کرتا ہے -

جو کہ مندرجہ ذیل کوڈ سنیپٹ کی طرف سے جنریٹ ہوا ہے -

<!DOCTYPE html>
        <html>
        
           <head>
              <title>ISMAP ہائپر لنک مثال</title>
           </head>
        	
           <body>
              <p>نیچے دیے گئے لنک پر کلک کریں</p>