[FIXED] Probleme beim Verschwinden eines Bildes bei Verwendung des onmouseover-Ereignisses auf einer Schaltfläche

Ausgabe

Ich habe Probleme, ein Bild verschwinden zu lassen, während ich ein onmouseover-Ereignis nicht darauf, sondern auf einem Schaltflächenelement verwende. Ich brauche es, um während onmouseover zu erscheinen und zu verschwinden, während nicht onmouseover. Hier ist mein 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>

Dies ist das Javascript, damit es beim Mouseover erscheint, und das HTML ist

  <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>

Das onmouseout für all diese macht nur den Hintergrund orange, aber ich möchte, dass es das entsprechende Bild verschwindet, womit ich Probleme habe, da Sie einem Element nicht mehrere IDs zuweisen können. Eine Jquery-Lösung würde auch funktionieren, ebenso eine in Angular.
https://plnkr.co/edit/WwpzOkipsiCrbgbpXbd4?p=preview
Hier ist der pnlkr-Link, strecken Sie den HTML-Teil aus, um auch das Ganze zu sehen.

Lösung

Hier ist ein einfaches Beispiel mit 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();
    });
});

Beantwortet von – Mladen P

Antwort geprüft von – Pedro (FixError Volunteer)