یہ پوسٹ جاوا اسکرپٹ میں ہوور پر تصویر کو تبدیل کرنے کے طریقہ کار کو ظاہر کرے گی۔
جاوا اسکرپٹ میں ہوور پر تصویر کو کیسے تبدیل کیا جائے؟
ہوور پر تصویر کو تبدیل کرنے کے لیے، استعمال کریں ' onmouseover ' تقریب. جب ماؤس/کرسر کو ایچ ٹی ایم ایل عنصر یا اس کے بچوں میں سے کسی کے ذریعے منتقل کیا جاتا ہے تو آن ماؤس اوور ایونٹ کو متحرک کیا جاتا ہے۔
مثال 1: JavaScript میں Hover پر تصویر تبدیل کریں۔
HTML فائل میں، ویب صفحہ پر تصویر دکھانے کے لیے ٹیگ استعمال کریں۔ منسلک کریں ' onmouseover ” ایونٹ جو جاوا اسکرپٹ فنکشن کو کال کرے گا جب تصویر پر ماؤس گھومتا ہے:
< img آئی ڈی = 'menuImg' src = '1.jpg' onmouseover = 'ہوور (یہ)؛' />
جاوا اسکرپٹ فائل میں، ایک فنکشن کی وضاحت کریں ' ہوور 'پیرامیٹر کے ساتھ' img ' متعین فنکشن میں، تصویر سیٹ کریں جو ہوور پر دکھائی جائے گی:
فنکشن ہوور ( img )
{
img src = '2.jpg'
}
جیسا کہ آپ دیکھ سکتے ہیں، آؤٹ پٹ میں، جب ہم موجودہ تصویر پر گھومتے ہیں، تو یہ اچانک بدل جاتا ہے:
مثال 2: ہوور پر تصویر کو ٹوگل کریں۔
مندرجہ بالا مثال میں، تصویر بدل جاتی ہے جب ماؤس تصویر پر منڈلاتا ہے، اور وہی تصویر باقی رہتی ہے۔ اب، اس مثال میں، پہلی تصویر دوبارہ ظاہر ہوگی جب ماؤس تصویر سے باہر نکل جائے گا۔ اس اثر کو ٹوگلنگ اثر کہا جاتا ہے۔ اس مقصد کے لیے، ہم استعمال کریں گے ' onmouseover 'اور' آن ماؤس آؤٹ HTML خصوصیات:
< img آئی ڈی = 'menuImg' src = '1.jpg' onmouseover = 'ہوور (یہ)؛' آن ماؤس آؤٹ = 'ہور آؤٹ (یہ)' />
' onmouseover 'بلاتی ہے' ہوور() فنکشن جبکہ، آن ماؤس آؤٹ 'ایونٹ فنکشن کو کال کرتا ہے' hoverOut() ”:
فنکشن hoverOut ( img ) {img src = '1.jpg'
}
آؤٹ پٹ سے پتہ چلتا ہے کہ جب ماؤس امیج پر ہوتا ہے تو امیج کامیابی کے ساتھ تبدیل ہو جاتی ہے اور جب ماؤس امیج سے باہر ہوتا ہے تو اسے تبدیل کیا جاتا ہے:
یہ سب ہور پر بدلتی ہوئی تصویر کے بارے میں تھا۔
نتیجہ
ہوور پر تصویر کو تبدیل کرنے کے لیے، استعمال کریں ' onmouseover ' تقریب. ٹوگلنگ اثر کے لیے، استعمال کریں ' onmouseover 'کے ساتھ وصف' آن ماؤس آؤٹ ' تقریب. جب ماؤس/کرسر کو کسی عنصر یا اس کے بچوں میں سے کسی ایک کے ذریعے منتقل کیا جاتا ہے تو آن ماؤس اوور ایونٹ کو متحرک کیا جاتا ہے، جب کہ جب ماؤس/پوائنٹر کو کسی عنصر سے باہر منتقل کیا جاتا ہے تو آن ماؤس آؤٹ ایونٹ ہوتا ہے۔ اس پوسٹ میں، ہم نے JavaScript میں ہوور پر تصویر کو تبدیل کرنے کے طریقہ کار کا مظاہرہ کیا۔