Displaying text using onMouseover JavaScript/HTML

Question

I have a task that calls for an image of a famous person and the goal here is that once the user moves the mouse onto the image, a text displaying a quote made by that person will be visible. Once the user moves off the image, the text will disappear. This sounds relatively simple and I know this can be done using CSS however I wish to broaden my HTML skills and will ignore CSS for now and focus on HTML and JS. Now I know that the onMouseover is the key event handler for this, however I feel as if my code has errors that I'm not aware. Everything is enclosed within the script tags. Thanks.

<img src="julius_caesar.jpg" id="jCaes" onMouseover="displayQuote();">
function displayQuote() {
document.getElementById("jCaes").value = "I came, I saw, I conquered";
}

Answer 1

您需要一个title属性才能在鼠标悬停时显示文本。

<img src="julius_caesar.jpg" id="jCaes" title="your text"/>

Answer 2

Like this Demo ?

 body { padding:30px; font:normal 12px/1.5 Arial, sans-serif; } /* Hover tooltips */ .field-tip { position:relative; cursor:help; } .field-tip .tip-content { position:absolute; top:-22px; /* - top padding */ right:9999px; width:200px; margin-right:-220px; /* width + left/right padding */ padding:10px; color:#fff; background:#333; -webkit-box-shadow:2px 2px 5px #aaa; -moz-box-shadow:2px 2px 5px #aaa; box-shadow:2px 2px 5px #aaa; opacity:0; -webkit-transition:opacity 250ms ease-out; -moz-transition:opacity 250ms ease-out; -ms-transition:opacity 250ms ease-out; -o-transition:opacity 250ms ease-out; transition:opacity 250ms ease-out; } /* <http://css-tricks.com/snippets/css/css-triangle/> */ .field-tip .tip-content:before { content:' '; /* Must have content to display */ position:absolute; top:50%; left:-16px; /* 2 x border width */ width:0; height:0; margin-top:-8px; /* - border width */ border:8px solid transparent; border-right-color:#333; } .field-tip:hover .tip-content { right:-20px; opacity:1; } 

 <span class="field-tip"> <img src = "https://www.gravatar.com/avatar/41bd91a4e61ab446e69a72e54dade869?s=32&d=identicon&r=PG&f=1"> <span class="tip-content">This Is my Quote.</span> </span> 

If this what you want then Bootstrap Tooltip also help you.

See Here

Answer 3

Solution One: You can add a title attribute to your HTML tag:

<img src="julius_caesar.jpg" id="jCaes" title="your text" />

Solution Two: You could use css for this too (if you want to style the quote that is displayed):

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

img#jCaes:hover + div.quote {
    display: block;
}

Solution Three: There's really no need to use JavaScript for this; however, here's a JS solution as well:

Additional HTML:

<div id="popup">Your quote here</div>

CSS:

#popup {
  display:none;
}

JS

var e = document.getElementById('jCaes');

e.onmouseover = function() {
  document.getElementById('popup').style.display = 'block';
}

e.onmouseout = function() {
  document.getElementById('popup').style.display = 'none';
}   

Solution Four: Here's another solution if you can use jQuery: http://jsfiddle.net/9RxLM/

Answer 4

Tag img not have attribute "value"

<script>
    function displayQuote() {
        document.getElementById("jCaes").textContent = "I came, I saw, I conquered";
    }
</script>

<img src="http://www.tivix.com/uploads/blog_pics/Android-logo.png"  onMouseover="displayQuote();" height="150" width="150">
<p id="jCaes"></p>