Mar 25, 2015

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

Blogger Rollover Image 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. ধন্যবাদ সবাইকে।
Subcribe to our all updates

and Share on
পূর্ববর্তী পোষ্ট
পরবর্তী পোষ্ট

0 টি মন্তব্য: Post Yours! Read Comment Policy ▼
লক্ষ্য করুনঃ
পোষ্টের সাথে সম্পৃক্ত নয় এমন কোন কমেন্ট করা যাবে না। কোন কারণ ব্যতীত আপনার ব্লগের লিংক শেয়ার করতে যাবেন না। সবসময় গঠনমূলক মন্তব্য প্রদানের চেষ্টা করবেন। আমরা সবার মতামত সমানভাবে মূল্যায়ন করি এবং যথাসময়ে প্রতি উত্তর দেয়ার চেষ্টা করি।

Post a Comment

 
Subscribe for all Updates

Subscribe Now

কপিরাইট © 2015- প্রযুক্তি ডট কম ™, সর্বস্বত্ব সংরক্ষিত

Powered by: