HTML में छवि के लिए माउसओवर पर टेक्स्ट प्रदर्शित करें

Question

जब उपयोगकर्ता छवि को प्रदर्शित करता है तो मैं पाठ प्रदर्शित करना चाहूंगा।

मैं इसे HTML / JS में कैसे कर सकता हूँ?

Answer 1

आप titleविशेषता का उपयोग कर सकते हैं ।

<img src="smiley.gif"  title="Smiley face"/>

आप अपनी इच्छानुसार छवि के स्रोत को बदल सकते हैं।

और जैसा कि @Gray ने टिप्पणी की:

तुम भी उपयोग कर सकते हैं titleजैसे अन्य बातों पर <a ...लंगर, <p>, <div>, <input>, आदि देखें: इस

Comments

तुम भी उपयोग कर सकते हैं titleजैसे अन्य बातों पर <a ...लंगर, <p>, <div>, <input>, आदि .. देखें: w3schools.com/tags/att_global_title.asp

— ग्रे

Answer 2

आप सीएसएस होवर का उपयोग कर सकते हैं
लिंक का यहां jsfiddle के लिए : http://jsfiddle.net/ANKwQ/5/

HTML:

<a><img src='https://encrypted-tbn2.google.com/images?q=tbn:ANd9GcQB3a3aouZcIPEF0di4r9uK4c0r9FlFnCasg_P8ISk8tZytippZRQ'></a>
<div>text</div>
​

सीएसएस:

div {
    display: none;
    border:1px solid #000;
    height:30px;
    width:290px;
    margin-left:10px;
}

a:hover + div {
    display: block;
}​

Answer 3

आप इस तरह भी कर सकते हैं:

HTML:

<a><img src='https://encrypted-tbn2.google.com/images?q=tbn:ANd9GcQB3a3aouZcIPEF0di4r9uK4c0r9FlFnCasg_P8ISk8tZytippZRQ' onmouseover="somefunction();"></a>

जावास्क्रिप्ट में:

function somefunction()
{
  //Do somethisg.
}

​

Answer 4

आप एक छवि पृष्ठभूमि के साथ संयोजन में CSS होवर का उपयोग कर सकते हैं।

सीएसएस

   .image
{
    background:url(images/back.png);
    height:100px;
    width:100px;
    display: block;
    float:left;
}

.image  a {
    display: none;
}

.image  a:hover {
    display: block;
}

एचटीएमएल

<div class="image"><a href="#">Text you want on mouseover</a></div>