คำแนะนำเกี่ยวกับรูปภาพ

133

ฉันกำลังใช้คำแนะนำเครื่องมือ แต่ฉันต้องการสิ่งนั้นบนแท็กรูปภาพเช่นเมื่อฉันวางเมาส์เหนือรูปภาพคำแนะนำเครื่องมือควรใช้งานได้ ฉันได้ลองแล้ว แต่ไม่ได้ผลกับแท็กรูปภาพ

html image tooltip

— user1528786
แหล่งที่มา

ภาษาอะไร? HTML, C #, Java, ... ?

— Matthias

4

ใช้document.getElementById('theImage').title='tooltip text'.

— เจ

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

— Pooja Kedar

ปัญหาคือแท็ก <img> ปิดตัวเองดังนั้นคุณจึงไม่สามารถเพิ่มองค์ประกอบอื่นเข้าไปข้างในได้

— จัสติน

353

คุณสามารถใช้แอตทริบิวต์หัวเรื่อง HTML มาตรฐานของรูปภาพสำหรับสิ่งนี้:

<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>

ขยายข้อมูลโค้ด

— Paresh Shiyal
แหล่งที่มา

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>

ขยายข้อมูลโค้ด

— Sushma Reddy
แหล่งที่มา

-6

คุณสามารถใช้รูปแบบต่อไปนี้เพื่อสร้างคำแนะนำเครื่องมือสำหรับรูปภาพ

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

— Hasshi Sudler
แหล่งที่มา

3

คุณไม่มี CSS ที่จะทำให้ใช้งานได้จริง หากคุณเพิ่มคลาสสำหรับ. tooltip: hover .tooltiptext และวางตำแหน่ง. tooltiptext อย่างถูกต้องนี่อาจเป็นวิธีที่ดีในการแสดงคำแนะนำเครื่องมือที่คุณสามารถควบคุมการนำเสนอได้มากขึ้น

— LKM

พวกเขาอาจจะมาจากโรงเรียน w3: w3schools.com/css/css_tooltip.asp ฉันยอมรับว่ามันเป็นวิธีแก้ปัญหาที่ไม่สมบูรณ์เพียงแค่ให้ลิงค์สำหรับผู้ที่ต้องการไปเส้นทางนี้

— จัสติน