ব্লগ পোষ্টের দুটি ছবিতে কিভাবে Rollover Effect দিতে হয়?

Rollover Image Effect এর অর্থ হচ্ছে দু’টি ছবি আলাদা ভাবে পোষ্ট করবেন কিন্তু দেখতে মনে হবে একটি ছবি। এর সব চাইতে আকর্ষণীয় ব্যাপার হচ্ছে যে, ছবি একটি দেখালেও ছবিটিতে মাউজ ধরা মাত্রই আপনার অপর ছবিটি অটোমেটিক বেরিয়ে আসবে অর্থাৎ সুয়াইপ করবে। অনেকে ভাবছেন হয়তো বিষয়টি বাস্তবে দেখে আসবেন, তা না হলে আপনার মনের খটকা কাঠছে না। তাহলে আমার এই পোষ্টের নিচের ছবিটতে শুধু মাউজটা ধরলেই তার প্রমান পেয়ে যাবেন। যারা ওয়েব ডেভেলপমেন্ট এর ব্যাপারে একদম নতুন তাদের কাছে ব্যাপারটি হয়তোবা আশ্চর্যকর মনে হবে। কিন্তু এটি অত্যান্ত সহজ একটি ব্যাপার। নিচের কয়েকটি ধাপ অনুসরণ করে খুব সহজেই এই Rollover Image Effect টি তৈরী করে নিতে পারবেন।


Rollover Image Effect দেয়ার জন্যঃ আপনি যে খানে বা যে পোষ্টে ইফেক্টটি দিতে চান সেখানে নিচের কোডটি কপি করে পেষ্ট করুন। আপনি ইচ্ছামত এটি যে কোন পোষ্টের ভীতরে, স্ট্যাটিক পেইজে কিংবা যে কোন উইজেট এ ব্যবহার করতে পারবেন।
<a href="Url Address"><img src="Url of the first image goes here" onmouseover="this.src='Url of the scond image goes here'" onmouseout="this.src='Url of the first image goes here'" /></a>
  • Url Address: আপনার কাঙ্খিত ঠিকানা ব্যবহার করতে পারেন। যেমন মনে করেন www.prozokti.com ইত্যাদি। তবে অবশ্যয় ঠিকানার আগে http:// ব্যবহার করতে হবে।
  • Url of the first image goes here: এ খানে অর্থাৎ লাল অংশে আপনার কাঙ্খিত প্রথম ছবিটির Url দিতে হবে। এই ছবিটি ‍সুইয়াপ করার আগে শো করবে।
  • Url of the scond image goes here: এখানে ২য় ছবিটির Url দিতে হবে। এটি মাউজ ধরার পর ছবি শো করবে বা সুয়াইপ করবে।
  • That's all. ধন্যবাদ সবাইকে।