changing background image when onmouseover

Question

function change(ele) {
  document.getElementById('info').innerHTML = ele.alt;
  document.getElementById('info').style.backgroundImage = "url(ele.src)";
}

<div id='info'>
  This will tell you more about the below image
</div>
<div id='container'>
  <div>
    <img alt="The mini Barbarian" src="img\barbarian-thumb.jpg" class="pics" onmouseover="change(this)">
  </div>
</div>

how do i change the background image of div with id info with the image on which the mouse hover that image is in div tag with id conatiner

score 3 · Answer 1 · answered Jan 29 '18 at 05:39

please see this. Basically you can bind function inline with html. Or you can bind it dynamically. This is very simple solution. If your image path is fixed.

<script type="text/javascript">
function mouseaway(my_image) {
    my_image.src = "someimage.jpg";
}

function rollover(my_image) {
    my_image.src = "someimage2.jpg";
}
</script>

<img src="someimage3.jpg" onmouseover="rollover(this)" onmouseout="mouseaway(this)" />

score 0 · Answer 2 · answered Jan 29 '18 at 05:34

0

Just assign an id to your image tag and change the image src like this.

function mouseOverImage() {
  document.getElementById("img").src = "images/foo.png";
}

<img  
  id="img" 
  alt="some description/info"
  src="images/blue.png" 
  onmouseover = "mouseOverImage()"
/>

answered Jan 29 '18 at 05:34

Adeel Imran

13,166
8
62
77

OP is getting the element. That is not the issue – Rajesh Jan 29 '18 at 05:37

score 0 · Answer 3 · answered Jan 29 '18 at 05:41

0

Hope this will help

 $(document).ready(function(){
       $("img").hover(function(){
            $(this).attr('src', 'images/alt/imagename.jpg');
       });
    });

answered Jan 29 '18 at 05:41

Lokesh thakur

219
2
11

Diana Ysabel · Answer 4 · 2018-01-29T05:51:47.853

Try this:

function change(e){
  document.getElementById("info").style.backgroundImage = "url('"+e.src+"')";
  document.getElementById("info").style.backgroundRepeat="no-repeat";
}
function change2(e){
  document.getElementById("info").style.backgroundImage = "";
}

#info{
height:100px;
}

<div id='info'>
     This will tell you more about the below image
     </div>
 <div id='container'>
     <div>
      <img alt="The mini Barbarian" src = "data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%2264%22%20height%3D%2264%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2064%2064%22%20preserveAspectRatio%3D%22none%22%3E%3Cdefs%3E%3Cstyle%20type%3D%22text%2Fcss%22%3E%23holder_1614068cdea%20text%20%7B%20fill%3Argba(255%2C255%2C255%2C.75)%3Bfont-weight%3Anormal%3Bfont-family%3AHelvetica%2C%20monospace%3Bfont-size%3A10pt%20%7D%20%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cg%20id%3D%22holder_1614068cdea%22%3E%3Crect%20width%3D%2264%22%20height%3D%2264%22%20fill%3D%22%23777%22%3E%3C%2Frect%3E%3Cg%3E%3Ctext%20x%3D%2213.84375%22%20y%3D%2236.5%22%3E64x64%3C%2Ftext%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E" class="pics" onmouseover="change(this)" onmouseout="change2(this)">
     </div>
 </div>

Normally it is sufficient to use ele.src instead of ele.getAttribute('src') — D. Braun, Jan 29 '18 at 05:48

changing background image when onmouseover

4 Answers4