CSS – tool-tip, acronym-এর দৃষ্টিনন্দন বিকল্প

CSS-tooltip-how-it-works
জ্ঞানস্তর: মাধ্যমিক

কোনো একটা লম্বা নামকে সংক্ষিপ্ত করে লেখার দরকার হলো, এজন্য প্রত্যেকটা শব্দের প্রথম অক্ষরগুলো, মানে আদ্যক্ষর নিয়ে, আপনি সেই নামটা তৈরি করলেন, ইংরেজিতে যাকে বলে acronym। যেমন: Bangladesh Agricultural and Rural Development-কে সংক্ষেপে ডাকা হয় BARD বলে; এখানে BARD হলো পুরো নামটার সংক্ষিপ্তরূপ। ধরা যাক, একটা লেখা লিখছেন, যেখানে বারবার আপনি BARD-ই বলে যাচ্ছেন। কিন্তু একজন পাঠক BARD-এর মানে তো নাও জানতে পারেন। তাই এসব ক্ষেত্রে HTML-এর সহজ একটা কৌশল কাজে লাগানো হয়: <acronym> কোডটি।

কোডটার ব্যবহার:

<acronym title=“Bangladesh Agricultural and Rural Development”>BARD</acronym>

এই কোডটা ব্যবহার করলে যখনই আপনি BARD লেখাটার উপরে মাউস আনবেন, একটু অপেক্ষা করলেই সেখানে একটা হলদে বাক্সে দেখাবে BARD-এর মানে, যা আপনি acronym-এর title-এ দিয়েছেন। 

কিন্তু যারা HTML-এর acronym ব্যবহার করে একটু ক্লান্ত, তাদের জন্য রয়েছে সিএসএস (CSS)-এর অপূর্ব একটা কৌশল, যার নাম “tool-tip”। আসুন দেখা যাক কিভাবে ব্যবহার করা যায় এটা:

টুলটিপ ব্যবহারের জন্য দরকার আপনার HTML অংশের লেখাটুকু, আর CSS অংশে সেই লেখার জন্য স্টাইলটুকু। নিচের এই কোড-শীটে আমরা এক্সটার্নাল সিএসএস ব্যবহার করে এইচটিএমএল অংশে সেই স্টাইল ব্যবহার করেছি, যদিও এক্সটার্নাল সিএসএসের জন্য আলাদা ফাইল ব্যবহার করিনি (একসাথে দেখানোর জন্য), আপনি চাইলেই তা করতে পারেন। এখানে HTMLসহ CSS কোড দেয়া হলো:

<!-- CSS tutorial by nanodesigns. -->
<html>
<head>
 <title>Tool-Tip Practice, by nanodesigns</title>
 <!-- style sheet starts here...you can cut-paste these to the external CSS file -->
 <style type="text/css">
  .tooltip{
    border-bottom: 1px dotted #333;
    position: relative;
    cursor: pointer;
  }
  .tooltip:hover:after {
    content: attr(data-tooltip);
    position: absolute;
    white-space: nowrap;
    background: #666;
    padding: 3px 7px;
    color: #FFF;
    border-radius: 3px;
     -moz-border-radius: 3px; /* for mozilla */
     -webkit-border-radius: 3px; /* for safari and chrome */
     -o-border-radius: 3px; /* for opera */
    top:20px;
    margin-top:7px;
    }
 </style>
</head>
<body>
 <!--the body text that will be displayed on the website-->
 <p><span class="tooltip" data-tooltip="Cascade Style Sheet">CSS</span> lesson by nanodesigns.</p>
</body>
</html>

<!-- CSS tutorial by nanodesigns. -->

 

কোডগুলো আপনার HTML কিংবা PHP ফাইলে বসালেই দেখতে পাবেন এই লেখাটি:

CSS lesson by nanodesigns

যেখানে CSS লেখাটির উপরে মাউস রাখলেই বেশ দৃষ্টিনন্দন একটি টুলটিপ-এ সিএসএস-এর মানে দেখা যাবে। আলাদা ফাইলে এক্সটার্নাল স্টাইল শীট ব্যবহার করে একই সিএসএস কোড দিয়েই আপনি বহুবার বিভিন্ন জায়গায় আলাদা আলাদা টুলটিপ দেখাতে পারেন।

Localhost-এ মযিলা ফায়ারফক্স ১২.০, অপেরা ১০.১০, গুগল ক্রোম ২০.০.১১২৩.৪, এবং সাফারি ৩.১.২-তে পরীক্ষিত।

কেমন লাগলো, আর কাজে লাগলো কিনা অবশ্যই জানাতে ভুলবেন না। আর, আরো আরো সিএসএস প্রোপার্টি যোগ করে নতুন নতুন কিছু পরীক্ষা-নিরীক্ষা চালান, একটু opacity প্রয়োগ করে দেখুন… নতুন কিছু বের করতে পারলেও আমাদের সাথে শেয়ার করুন।

 

-মঈনুল ইসলাম
গ্রাফিক্স ডিযাইনার ও ওয়েব ডেভলপার
wz.islam@gmail.com

 _______________________________________________________________

মূলসূত্র:

পোস্টটা লিখতে এর মূল তথ্য গ্রহণ করা হয়েছে এই টিউটোরিয়াল^ থেকে। তবে সেখানকার কোডগুলো ঝামেলা করে বলে তা সংশোধন ও পরিমার্জন করতে সহায়তা নেয়া হয়েছে সফ্‌টওয়্যার ইঞ্জিনিয়ার অমিত চৌধুরীর। কৃতজ্ঞতা তাই এঁদের প্রতি।

আপনার মন্তব্য জানান...