I want to display text when I move mouse over image in JavaScript. I don't know where I am going as I am new to this.There is a table which has images I want to display its content when I move mouse over image . I want to use JavaScript here.

<script>
function show()
{
var wele = document.getElementById('sub1');
wele.style.display = 'block';
}

function hide()
{
 var wele = document.getElementById('sub1');
 wele.style.display = 'none';
}   
</script>

<div id="sub1" onmouseover="show();" onmouseout="hide();"> </div>

 //This is the image where I want to display a text.
<td><img border="0" src="images/img1.jpg"
alt="iphone 5s" width="304" height="228"></td>

I want to display text when I move mouse over image in JavaScript. I don't know where I am going as I am new to this.There is a table which has images I want to display its content when I move mouse over image . I want to use JavaScript here.

<script>
function show()
{
var wele = document.getElementById('sub1');
wele.style.display = 'block';
}

function hide()
{
 var wele = document.getElementById('sub1');
 wele.style.display = 'none';
}   
</script>

<div id="sub1" onmouseover="show();" onmouseout="hide();"> </div>

 //This is the image where I want to display a text.
<td><img border="0" src="images/img1.jpg"
alt="iphone 5s" width="304" height="228"></td>

• javascript
• jquery
• html
• css

Share Improve this question Follow edited Feb 26, 2016 at 1:58 jeny asked Feb 26, 2016 at 1:21 jenyjeny 38744 gold badges66 silver badges1818 bronze badges

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 1

You can use only css instead of using javascript: codepen: display text when I hover - css

HTML

<div class="thumb-item">
  <img class="thumb-item__image" src="http://clapat.ro/themes/legrand-wordpress/wp-content/uploads/2015/11/2.jpg" alt="">
  <div class="thumb-item__info">
    <h5>Title here</h5>
    <p>This Is a caption Line</p>
  </div>
</div>

CSS

.thumb-item {
  width: 400px;
  position: relative;
  overflow: hidden;
}
.thumb-item__image {
  width: 100%;
}
.thumb-item__info {
  position: absolute;
  bottom: -30px;
  left: 0;
  width: 100%;
  opacity: 0;
  box-sizing: border-box;
  color: #fff;
  padding: 10px 20px;
}
.thumb-item__info h5 {
  font-size: 16px;
  margin: 0;
  padding: 0;
  font-family: tahoma;
  font-weight: bold;
}
.thumb-item__info p {
  font-size: 12px;
  margin: 4px 0 14px;
}
.thumb-item:hover .thumb-item__info {
  opacity: 1;
  bottom: -5px;
}

Do you want to replace the text with image or place text somewhere else ? From my understanding , please check below code :

    <script>
function showText(text){
    document.getElementById("text").innerHTML=text;
}
function hide(){
    document.getElementById("text").innerHTML="";
}
</script>
<img src="image.jpg" id="image" onMouseOver="showText('Some Text')" onMouseOut="hide();">
<div id="text"></div>

To write any text on your image or even add icons or something like that you have to create a div before your image tag ,, Often it's called a layout div.

<td><div class="layout"></div><img id="testImg" src="Your img path"></td>

Notice : We closed the div before put the image tag. your css will be :

background:rgba(7,7,7,0.2);
position:absolute;
top:0;
bottom:0;
right:0;
left:0;
display:none

Change the background color and opacity as you like .. jQuery Code :

$("#testImg").click(function () {
    $(".layout").css("display", "block");
    $(".layout").text('Test Paragraph'); 

});

You are fairly close. I think the issue right now with your code is that your div that has the "onmouseover" and "onmouseout" is really small because it does not have anything in it. Also, some browsers won't react to this event being created inline like you have it. Also, block styling can have some style issues in some browsers. You might not want this but are instead just trying to take away the "none" on display. I would also point you to JQuery if you can, but since you haven't mentioned JQuery, the following would work. Here it is in JSFiddle as well for you to see:

https://jsfiddle/nkxjphjm/1/

<script>
function show() {
  var wele = document.getElementById('sub1');
  wele.style.display = '';
}

function hide() {
  var wele = document.getElementById('sub1');
  wele.style.display = 'none';
}
function init() {
  var surround = document.getElementById('surroundDiv');
  surround.onmouseover = show;
  surround.onmouseout=hide;  
}

window.onload = init;   
</script>

<div id="surroundDiv">
<img border="0" src="images/img1.jpg"
alt="iphone 5s" width="304" height="228">
</div>
<div id="sub1" style="display:none">Text to display</div>

Now, when they mouse over the image they will also be going over the div. That will trigger the action that will show the inner div "sub1" that has text in it. You can also modify the text inside, etc. The options are endless. I hope this gets you started. Please accept the answer if it did. If you need more help, please post a ment and I can update my answer. Thank you!