চিত্রের সরঞ্জামদণ্ড

132

আমি টুলটিপ ব্যবহার করছি। তবে আমি এটি চাই যে ইমেজ ট্যাগে, যখন আমি চিত্রটি মাউসওভার করি তখন টুলটিপটি কাজ করা উচিত। আমি চেষ্টা করেছি কিন্তু আমার জন্য ইমেজ ট্যাগে কাজ করছি না।

html image tooltip

— user1528786
সূত্র

কী ভাষা? এইচটিএমএল, সি #, জাভা, ...?

— ম্যাথিয়াস

4

ব্যবহার document.getElementById('theImage').title='tooltip text'।

— জয়

stackoverflow.com/questions/36275678/how-to-create-a-tooltip

— পূজা কেদার

সমস্যাটি হ'ল <img> ট্যাগটি স্বয়ং বন্ধ হয়ে যায়, সুতরাং আপনি এর ভিতরে অন্য উপাদান যুক্ত করতে পারবেন না।

— জাস্টিন

351

আপনি এর জন্য চিত্রের স্ট্যান্ডার্ড এইচটিএমএল শিরোনামের বৈশিষ্ট্যটি ব্যবহার করতে পারেন:

<img src="source of image" alt="alternative text" title="this will be displayed as a tooltip"/>

— ম্যাথিয়াস
সূত্র

3

আমি আমার ওয়ার্কিং প্রজেক্টে টুলটিপস সেট করেছি যা 100% কাজ করছে

<!DOCTYPE html>
<html>
<style>
.tooltip {
  position: relative;
  display: inline-block;
  border-bottom: 1px dotted black;
}

.tooltip .tooltiptext {
  visibility: hidden;
  width: 120px;
  background-color: black;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;

  /* Position the tooltip */
  position: absolute;
  z-index: 1;
}

.tooltip:hover .tooltiptext {
  visibility: visible;
}
.size_of_img{
width:90px}
</style>

<body style="text-align:center;">

<p>Move the mouse over the text below:</p>

<div class="tooltip"><img class="size_of_img" src="https://babeltechreviews.com/wp-content/uploads/2018/07/rendition1.img_.jpg" alt="Image 1" /><span class="tooltiptext">grewon.pdf</span></div>

<p>Note that the position of the tooltip text isn't very good. Check More Position <a href="https://www.w3schools.com/css/css_tooltip.asp">GO</a></p>

</body>
</html>

স্নিপেট প্রসারিত করুন

— পরেশ শিয়াল
সূত্র

0

জাভাস্ক্রিপ্ট ব্যবহার করে, আপনি পৃষ্ঠার সমস্ত চিত্রের জন্য সরঞ্জামদ্বয় সেট করতে পারেন।

<!DOCTYPE html>
<html>
    <body>
    <img src="http://sushmareddy.byethost7.com/dist/img/buffet.png" alt="Food">
    <img src="http://sushmareddy.byethost7.com/dist/img/uthappizza.png" alt="Pizza">
     <script>
     //image objects
     var imageEls = document.getElementsByTagName("img");
     //Iterating
     for(var i=0;i<imageEls.length;i++){
        imageEls[i].title=imageEls[i].alt;
        //OR
        //imageEls[i].title="Title of your choice";
     }
        </script>
    </body>
</html>

স্নিপেট প্রসারিত করুন

— সুষমা রেড্ডি
সূত্র

-6

কোনও চিত্রের সরঞ্জামদণ্ড তৈরি করতে আপনি নিম্নলিখিত ফর্ম্যাটটি ব্যবহার করতে পারেন।

<div class="tooltip"><img src="joe.jpg" />
  <span class="tooltiptext">Tooltip text</span>
</div>

— হাসি সুদলার
সূত্র

3

এটি আসলে কাজ করতে আপনি কিছু সিএসএস মিস করছেন। আপনি যদি টুলেটটিপ: হোভার। টোলটিপেক্সটেক্সট এবং অবস্থান সঠিকভাবে কোনও ক্লাস যোগ করেন তবে এটির উপস্থাপনাটির উপর আপনার আরও নিয়ন্ত্রণ রয়েছে এমন কোনও সরঞ্জামদণ্ড দেখানোর এটি একটি দুর্দান্ত উপায় হতে পারে।

— LKM

তারা সম্ভবত ডাব্লু 3 স্কুল বন্ধ করে দিচ্ছে: w3schools.com/css/css_tooltip.asp আমি একমত যে এটি একটি অসম্পূর্ণ সমাধান, যারা কেবল এই পথে যেতে চান তাদের জন্য লিঙ্ক সরবরাহ করে।

— জাস্টিন