یہ پوسٹ آپ کو سکھائے گی:
- HTML تصویری نقشے کیا ہیں؟
- HTML دستاویز میں تصویری نقشے کیسے بنائیں؟
- دوسرے صفحہ سے منسلک تصویری نقشہ کیسے بنایا جائے؟
HTML تصویری نقشے کیا ہیں؟
تصویر کا نقشہ ایک ایسی تصویر ہے جس پر کلک کیا جا سکتا ہے۔ HTML میں تصویری نقشہ بنانے کے لیے، ' عنصر کا استعمال کیا جاتا ہے۔ مزید یہ کہ ایک یا زیادہ <علاقہ> علاقوں کی وضاحت کے لیے '
نحو
ایچ ٹی ایم ایل دستاویز میں تصویری نقشوں کی وضاحت کرنے کے لیے نحو کا ذکر ذیل میں کیا گیا ہے۔
< img src = 'images/img1.jpg' سب کچھ = 'لیپ ٹاپ' استعمال کا نقشہ = '#کلک اسپیس' >
< نقشہ نام = 'کلک اسپیس' >
< رقبہ شکل = 'صحیح' کوآرڈینیٹ = '224,37,422,312' href = 'laptop.html' >
< / نقشہ >
' ' عنصر کو درج ذیل صفات کے ساتھ بیان کیا گیا ہے:
- ' src ” تصویر کا راستہ بتاتا ہے۔
- ' سب کچھ ” ایک متبادل متن دکھاتا ہے جب کوئی تصویر لوڈ نہیں ہو سکتی۔
- ' استعمال کا نقشہ ” تصویر کے علاقوں کو قابل کلک بنانے کے لیے مخصوص کیا گیا ہے۔ لنک بنانے کے لیے، اس کی قدر '
' ' عنصر کو درج ذیل صفات کے ساتھ شامل کیا گیا ہے:
- ' شکل 'ایک HTML کے علاقے کا سائز بتاتا ہے' ' عنصر.
- ' کوآرڈینیٹ ” انتساب کلک کے قابل علاقے کے نقاط کی وضاحت کرتا ہے۔
- ' href ” انتساب نے ماخذ کا URL متعین کیا۔
HTML دستاویز میں تصویری نقشے کیسے بنائیں؟
HTML دستاویز میں تصویری نقشہ بنانے کے لیے دی گئی ہدایات کو چیک کریں:
- HTML میں، ایک شامل کریں ' 'عنصر، اور ایک کلاس تفویض کریں' تصویر کا نقشہ '
- اس div کے اندر، ایک شامل کریں '
مندرجہ بالا زیر بحث صفات سے وابستہ تصویر کو شامل کرنے کے لیے عنصر۔
- پھر، ایک HTML شامل کریں ' 'عنصر اور اسے تفویض کریں' کلک اسپیس 'نام.
- نوٹ کریں کہ ' استعمال کا نقشہ 'انتساب کو نام دیا گیا ہے' #کلک اسپیس 'کی طرف اشارہ کرتے ہوئے' نام '
- اس کے اندر، شامل کریں ' <علاقہ> اوپر بیان کردہ صفات کے ساتھ ٹیگ:
< div کلاس = 'تصویری نقشہ' >
< img src = 'images/img1.jpg' سب کچھ = 'لیپ ٹاپ' استعمال کا نقشہ = '#کلک اسپیس' >
< نقشہ نام = 'کلک اسپیس' >
< رقبہ شکل = 'صحیح' کوآرڈینیٹ = '224,37,422,312' href = 'laptop.html' >
< / نقشہ >
< / div >آئیے تصویر کے سائز کو ایڈجسٹ کرنے کے لیے CSS سیکشن کی طرف چلتے ہیں۔
سی ایس ایس میں انداز '
'استعمال کریں ' .image-map 'تک رسائی کے لیے کلاس'
' عنصر اور درج ذیل سی ایس ایس خصوصیات کو لاگو کریں: .image-map {
چوڑائی : 700px;
مارجن: کار؛
}سی ایس ایس کی مذکورہ خصوصیات کی تفصیل یہ ہے:
- ' چوڑائی پراپرٹی div عنصر کی چوڑائی کا تعین کرتی ہے۔
- ' مارجن ' پراپرٹی عنصر کے ارد گرد مزید جگہ کا اضافہ کرتی ہے۔
اسٹائل 'img' عنصر
.image-map img {
چوڑائی : 100 %;
}دیکھیں، علاقے کے نقاط کی وضاحت ' کوآرڈینیٹ ” وصف اب قابل کلک ہے:
اگلے حصے میں، ہم سیکھیں گے کہ تصویر کے نقشے کو کسی دوسرے ماخذ سے کیسے جوڑنا ہے۔
دوسرے صفحہ سے منسلک تصویری نقشہ کیسے بنایا جائے؟
ایکسٹینشن کے ساتھ ایک اور HTML صفحہ بنائیں ' .html ذیل میں بیان کردہ اقدامات پر عمل کرتے ہوئے:
- ہمارے معاملے میں، ہم اسے نام دیتے ہیں ' laptop.html '
- ایک div عنصر شامل کریں اور اسے ایک کلاس تفویض کریں ' laptop-img '
- پھر، 'کا استعمال کرتے ہوئے ایک تصویر رکھیں
'عنصر اور منسلک کریں' src 'اور' چوڑائی 'صفات.
- اگلا، استعمال کرتے ہوئے ایک پیراگراف کی وضاحت کریں ' عنصر:
< img src = '/images/laptop.jpg' چوڑائی = '400px' >
< ص > لیپ ٹاپ ایک پورٹیبل کمپیوٹر ہے جسے مختلف سیٹنگز میں منتقل اور استعمال کیا جا سکتا ہے۔< / ص >
< / div >سی ایس ایس میں، درج ذیل سی ایس ایس خصوصیات کو ' laptop-img کلاس:
.laptop-img {
چوڑائی : 500px;
margin: car;
}آؤٹ پٹ
اب، ہم لنک کریں گے ' laptop.html 'ایک تصویر کا صفحہ' <علاقہ> 'پہلے صفحے کا عنصر۔ ایسا کرنے کے لیے، صفحہ کے URL کی وضاحت کریں ' href ذیل میں دکھایا گیا ہے جیسا کہ ' ' عنصر کی خصوصیت:
< رقبہ شکل = 'صحیح' کوآرڈینیٹ = '310,57,590,470' href = 'laptop.html' >آؤٹ پٹ
ہم نے کامیابی سے سیکھ لیا ہے کہ تصویری نقشے کیا ہیں اور وہ دوسرے ذرائع سے کیسے منسلک ہیں۔
نتیجہ
ایچ ٹی ایم ایل ' ' عنصر کو ایک تصویری نقشہ یا کلک کے قابل علاقوں کے ساتھ ایک تصویر بنانے کے لیے استعمال کیا جاتا ہے۔ تصویر کے قابل کلک علاقوں کی وضاحت کرنے کے لیے، ایک یا زیادہ ' <علاقہ> ٹیگز کو '
- اس div کے اندر، ایک شامل کریں '