CODEWITHSUNDEEP
javascripthtml
Bobby Digital
Bobby Digital

Reputation: 71

Displaying text using onMouseover JavaScript/HTML

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";
}

Upvotes: 2

Views: 41759

Answers (4)

Andrew Hendrie
Andrew Hendrie

Reputation: 6415

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/

Upvotes: 2

Ganesh Salunkhe
Ganesh Salunkhe

Reputation: 598

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

Upvotes: 1

please delete me
please delete me

Reputation: 97

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>

Upvotes: 0

Nakul91
Nakul91

Reputation: 1245

You need a title attribute to display text on mouse hover.

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

Upvotes: 3

Related Questions