আপনার ব্লগ পোস্টে Rollover Image Effect যুক্ত করুন


হ্যালো বন্ধুরা, TechRajjo.Com – Create Your Own Creativity তে আপনাকে স্বাগতম । কেমন আছেন সবাই ? নিশ্চয় ভালো আছেন । আর ভালো আছেন বলেই হয়তো আমাদের টেক রাজ্য থেকে আপনার পছন্দের এই আর্টিকেলটি পড়তে বসছেন । আমরা আমাদের টেক রাজ্যে প্রতিনিয়ত প্রযুক্তি বিষয়ক বিভিন্ন আর্টিকেল শেয়ার করে থাকি । যাতে মানুষ প্রযুক্তিকে সহজে জানতে ও বুঝতে পারে ।  তারই ধারাবাহিকতায় আজকে আপনাদের জন্য নিয়ে এসেছি প্রযুক্তি বিষয়ক আরেকটি আর্টিকেল । পোস্টের টাইটেল পড়ে এতক্ষণে নিশ্চয় বুঝে গেছেন যে, আজকে আমরা কোন বিষয় নিয়ে আলোচনা করবো ।

তার আগে আপনার কাছে আমাদের রিকুয়েস্ট, আপনি যদি আমাদের ব্লগটি সাবস্ক্রাইব না করে থাকেন, তাহলে এখনি সাবস্ক্রাইব করে নিন । তাহলে প্রযুক্তি বিষয়ক নিত্যনতুন আর্টিকেল সবার আগে পৌঁছে যাবে আপনার কাছে ।

তাহলে চলুন আর কথা না বাড়িয়ে মূল আলোচনায় ফিরে যাই ।

আমরা যারা ওয়েব ডিজাইন করি তারা অনেকেই অনেক ধরনের Image Effect জানি । সেগুলোর মধ্যে খুবই আকর্ষণীয় একটি Image Effect হচ্ছে Rollover Image Effect. এবং এটি আপনি আপনার ব্লগ বা ওয়েবসাইটের যেকোনো পোস্ট বা সাইডবারেও যুক্ত করতে পারবেন । এখন যারা এই Image Effect পারে না তাদের জন্যই আমার আজকের এই পোস্ট । কিন্তু তার আগে আমাদের জানতে হবে Rollover Image Effect জিনিসটা আসলে কি ? তাহলে চলুন জেনে নেই ।

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

Rollover Image Effect: আপনি যে খানে বা যে পোষ্টে ইফেক্টটি দিতে চান সেখানে নিচের কোডটি কপি করে পেষ্ট করুন। আপনি ইচ্ছামত এটি যে কোন পোষ্টের ভিতরে, Static Page কিংবা যে কোন Widget এ ব্যবহার করতে পারবেন।

<a href="Url Address"><img src="Url of the first image goes here" onmouseover="this.src=”Url of the second image goes here" onmouseout="this.src='Url of the first image goes here'" /></a>

Code ID No. TRCN-5190003
Download

Customization:
  • Url Addressউপরের কোডের Url Address এর জায়গায় আপনার কাঙ্খিত ঠিকানা ব্যবহার করতে পারেন। যেমন- www.techrajjo.com ইত্যাদি। তবে অবশ্যই ঠিকানার আগে https:// ব্যবহার করতে হবে।
  • Url of the first image goes here: এই অংশে আপনার কাঙ্খিত প্রথম ছবিটির Url দিতে হবে। এই ছবিটি ‍সুইয়াপ করার আগে শো করবে।
  • Url of the second image goes here: এখানে ২য় ছবিটির Url দিতে হবে। এটি মাউজ ধরার পর ছবি শো করবে বা সুয়াইপ করবে। ব্যাস হয়ে গেলো আপনার Rollover Image Effect.

এই ছিল আজকের বিস্তারিত আলোচনা । জানিনা আপনাদের কতটুকু বুঝাতে পেরেছি । তবুও যদি ভালো লেগে থাকে আপনার বন্ধুর সাথে শেয়ার করে তাকেও জানার সুযোগ করে দিন । তবেই আমাদের লিখা সার্থক হবে । আর আমরা আরও ভালো ভালো আর্টিকেল লিখতে উৎসাহ পাবো ।

শেষ কথাঃ আপনার মূল্যবান সময় ব্যয় করে আলোচ্য আর্টিকেলটি পড়ার জন্য আপনাকে অসংখ্য ধন্যবাদ । আমি আশা করবো উক্ত আর্টিকেলটির মাধ্যমে আপনি সামান্য কিছু হলেও জানতে, বুঝতে ও শিখতে পেরেছেন । তারপরও যদি কারও বুঝতে অসুবিধা হয় কিংবা কোন প্রকার সমস্যা হয় তাহলে কমেন্ট করে আমাদের জানাতে পারেন। আমরা আপনার সমস্যা সমাধানের জন্য চেষ্টা করবো, ইনশাআল্লাহ।

আজ এ পর্যন্তই । আবার আপনাদের সামনে হাজির হবো অন্য কোন প্রযুক্তি বিষয়ক আর্টিকেল নিয়ে । ততদিন সবাই ভালো থাকুন, সুস্থ্য থাকুন আর টেক রাজ্যের সাথেই থাকুন । ধন্যবাদ...

আপনার ব্লগ পোস্টে Rollover Image Effect যুক্ত করুন আপনার ব্লগ পোস্টে  Rollover Image Effect যুক্ত করুন Reviewed by CEO on Wednesday, June 12, 2019 Rating: 5

No comments:

It can be commented that the post was good. You can also comment on any problem. We will try to solve as much as possible.

Powered by Blogger.