এই পোস্টটি জাভাস্ক্রিপ্টে হোভারে ইমেজ পরিবর্তন করার পদ্ধতি প্রদর্শন করবে।
জাভাস্ক্রিপ্টে হোভারে একটি চিত্র কীভাবে পরিবর্তন করবেন?
হোভারে চিত্র পরিবর্তন করার জন্য, ' মাউসওভার ' ঘটনা। যখন মাউস/কার্সার একটি HTML এলিমেন্ট বা এর একটি বাচ্চার মাধ্যমে সরানো হয়, তখন অনমাউসওভার ইভেন্টটি ট্রিগার হয়।
উদাহরণ 1: জাভাস্ক্রিপ্টে হোভারে চিত্র পরিবর্তন করুন
একটি HTML ফাইলে, একটি ওয়েব পৃষ্ঠায় ছবি দেখানোর জন্য ট্যাগ ব্যবহার করুন। সংযুক্ত করুন ' মাউসওভার ” ইভেন্ট যা জাভাস্ক্রিপ্ট ফাংশনকে কল করবে যখন ইমেজের উপর মাউস ঘুরবে:
< img আইডি = 'মেনুআইএমজি' src = '1.jpg' মাউসওভার = 'হোভার (এটি);' />
একটি জাভাস্ক্রিপ্ট ফাইলে, একটি ফাংশন সংজ্ঞায়িত করুন ' হোভার 'পরামিটার সহ' img ” সংজ্ঞায়িত ফাংশনে, হোভারে প্রদর্শিত চিত্রটি সেট করুন:
ফাংশন হোভার ( img )
{
img src = '2.jpg'
}
আপনি দেখতে পাচ্ছেন, আউটপুটে, যখন আমরা বর্তমান চিত্রের উপর হভার করি, এটি হঠাৎ পরিবর্তন হয়:
উদাহরণ 2: হোভারে চিত্রটি টগল করুন
উপরের উদাহরণে, যখন ইমেজটির উপর মাউস ঘোরাফেরা করে তখন ইমেজটি পরিবর্তিত হয় এবং একই ইমেজ থেকে যায়। এখন, এই উদাহরণে, মাউসটি ইমেজ থেকে সরে গেলে প্রথম চিত্রটি আবার প্রদর্শিত হবে। এই প্রভাবটিকে টগলিং প্রভাব বলা হয়। এই উদ্দেশ্যে, আমরা ব্যবহার করব ' মাউসওভার ' এবং ' onmouseout HTML বৈশিষ্ট্য:
< img আইডি = 'মেনুআইএমজি' src = '1.jpg' মাউসওভার = 'হোভার (এটি);' onmouseout = 'হোভারআউট(এই)' />
' মাউসওভার 'কে ডাকে' হোভার() ' ফাংশন যখন, ' onmouseout 'ইভেন্ট ফাংশনকে কল করে' hoverOut() ”:
ফাংশন hoverOut ( img ) {img src = '1.jpg'
}
আউটপুট দেখায় যে চিত্রটি সফলভাবে পরিবর্তিত হয় যখন মাউসটি চিত্রের উপর থাকে এবং যখন মাউসটি চিত্রের বাইরে চলে যায় তখন এটি পরিবর্তন হয়:
এটি হোভারে পরিবর্তনশীল চিত্র সম্পর্কে ছিল।
উপসংহার
হোভারে চিত্র পরিবর্তন করার জন্য, ' মাউসওভার ' ঘটনা। টগল করার প্রভাবের জন্য, ' মাউসওভার 'সহ বৈশিষ্ট্য' onmouseout ' ঘটনা। যখন মাউস/কার্সারকে কোনো এলিমেন্ট বা তার বাচ্চাদের মধ্যে দিয়ে সরানো হয়, তখন অনমাউসওভার ইভেন্টটি ট্রিগার হয়, যখন মাউস/পয়েন্টার একটি এলিমেন্টের বাইরে সরানো হয়, অনমাউসআউট ইভেন্টটি ঘটে। এই পোস্টে, আমরা জাভাস্ক্রিপ্টে হোভারে ইমেজ পরিবর্তন করার পদ্ধতি প্রদর্শন করেছি।