Having trouble making an image disappear when using onmouseover event on a button

I’m having trouble making an image disappear while using an onmouseover event not on it, but on a button element. I need it to appear while onmouseover and disappear while not onmouseover. Heres my code:

    <script>
  function sfunc1() {
    var x = document.getElementById('imgSWTCH1');
    if (x.style.display === 'none') {
        x.style.display = 'block';
    } else {
        x.style.display = 'none';
    }
}
function sfunc2() {
  var x = document.getElementById('imgSWTCH2');
  if (x.style.display === 'none') {
      x.style.display = 'block';
  } else {
      x.style.display = 'none';
  }
}
function sfunc3() {
  var x = document.getElementById('imgSWTCH3');
  if (x.style.display === 'none') {
      x.style.display = 'block';
  } else {
      x.style.display = 'none';
  }
}
function sfunc4() {
  var x = document.getElementById('imgSWTCH4');
  if (x.style.display === 'none') {
      x.style.display = 'block';
  } else {
      x.style.display = 'none';
  }
}
function sfunc5() {
  var x = document.getElementById('imgSWTCH5');
  if (x.style.display === 'none') {
      x.style.display = 'block';
  } else {
      x.style.display = 'none';
  }
}
function sfunc6() {
  var x = document.getElementById('imgSWTCH6');
  if (x.style.display === 'none') {
      x.style.display = 'block';
  } else {
      x.style.display = 'none';
  }
}
function sfunc7() {
  var x = document.getElementById('imgSWTCH7');
  if (x.style.display === 'none') {
      x.style.display = 'block';
  } else {
      x.style.display = 'none';
  }
}
</script>

This is the javascript to make it appear on mouseover, and the html is

  <img id="imgSWTCH1"src="https://www.shareicon.net/data/128x128/2016/10/20/846459_blue_512x512.png" width="100" height="100"/>
        <img id="imgSWTCH2"src="https://www.writeraccess.com/wp-content/uploads/2014/08/blog-html-5.png" width="100" height="100"/>
        <img id="imgSWTCH3"src="https://www.shareicon.net/data/128x128/2016/06/25/619190_java_256x256.png" width="100" height="100"/>
        <img id="imgSWTCH4"src="https://www.shareicon.net/data/128x128/2016/05/06/760855_css_512x512.png" width="100" height="100"/>
        <img id="imgSWTCH5"src="http://poiemaweb.com/img/socketio-logo.png" width="100" height="100"/>
        <img id="imgSWTCH6"src="https://www.shareicon.net/data/128x128/2016/07/08/116973_development_512x512.png" width="100" height="100"/>
        <img id="imgSWTCH7"src="https://www.shareicon.net/data/128x128/2015/08/30/93000_javascript_512x512.png" width="100" height="100"/>
        <center>


          <br />
          <br />
          <table >
              <tb id="tab" onmouseover="sfunc1()" onmouseout="this.className='BO';">C</tb>

              <br />
                <tb id="tab" onmouseover=" sfunc3()" onmouseout="this.className='BO';">Java</tb>
                  <tb id="tab" onmouseover=" sfunc2()" onmouseout="this.className='BO';">HTML</tb>
                    <tb id="tab" onmouseover="sfunc4()" onmouseout="this.className='BO';">CSS</tb>

                      <tb id="tab" onmouseover="sfunc5()" onmouseout="this.className='BO';">Socket.io/Node</tb>
                        <tb id="tab" onmouseover="sfunc6()" onmouseout="this.className='BO';">Angular.js</tb>
                        <br />
                           <tb id="tab" onmouseover="sfunc7()" onmouseout="this.className='BO';">Javascript</tb>

                            <tb id="tab" onmouseover=" this.className='BC';" onmouseout="this.className='BO';">and much more!</tb>
          </table>
          </center>

The onmouseout for all of these just makes the background orange but I want it to make the image corresponding to it disappear, which I’m having trouble with since you cant assign multiple ID’s to an element. A jquery solution would work too, and so would one in angular. https://plnkr.co/edit/WwpzOkipsiCrbgbpXbd4?p=preview heres the pnlkr link, stetch the html portion out to see the whole thing too.

Answer

Here is a simple example using JQuery:

https://jsfiddle.net/ztuf96dg/4/

$(document).ready(function() {
  $('li').hover(function(e) {
      var imageID = $(e.currentTarget).attr('data-img-id');
      var $image = $('img[data-img-id="' + imageID + '"]');
      $image.show();
    },
    function(e) {
      var imageID = $(e.currentTarget).attr('data-img-id');
      var $image = $('img[data-img-id="' + imageID + '"]');
      $image.hide();
    });
});

Advertisement

Answer