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

Question

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.

FYI IDs are meant to be unique as in two elements should not have the same ID. — Mikey, Apr 29 '17 at 21:48
can you create a plnkr/jsfiddle instead to reproduce your problem. — MrNew, Apr 29 '17 at 21:52

Mladen P · Accepted Answer · 2017-04-29T22:45:27.503

1

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();
    });
});

edited Apr 29 '17 at 22:45

answered Apr 29 '17 at 22:30

Mladen P

176
5

Thanks, that makes way more sense! But I want it to do the opposite, as in start invisible and on mouse over become visible. – Aero Apr 29 '17 at 22:35

szegheo · Answer 2 · 2017-04-29T22:51:08.640

Try doing it with one function for mouseover and one for mouseout. Also use the visibility property of the img instead of display to prevent the elements jumping.

See it here:
https://plnkr.co/edit/YeOgtFeEmNhRCgdQ0Mlp?p=preview

EDIT

So the point is:

  function sfuncOver(imgId) {
    var x = document.getElementById(imgId);
    if (x.style.visibility === 'hidden') {
        x.style.visibility = 'visible';
    } else {
        x.style.visibility = 'hidden';
    }
  }

  function sfuncOut(imgId) {
    var x = document.getElementById(imgId);
    x.style.visibility = 'visible';
  }

...in js and in html:

 <td id="tab1" onmouseover="sfuncOver('imgSWTCH1')" onmouseout="sfuncOut('imgSWTCH1')">C</td>

...and so on. BUT doing this with jQuery would be 10 thousands better :) This is the coding style of the 90s :)

score 0 · Answer 3 · answered Apr 29 '17 at 22:15

You have 7 functions doing the same exact thing. A better approach may be to create one function and bind what element you want to hide to it. Here is a fiddle with an example: https://jsfiddle.net/83drj2rs/1/

Here is the corresponding JavaScript:

function toggleVisibility(element){
    if(element.style.display === "none") {
    element.style.display = "inline-block";
  } else {
    element.style.display = "none";
  }
}

Array.prototype.slice.call(document.getElementsByClassName('tab')).forEach(function(element){
    element.onmouseover = toggleVisibility.bind(this, document.getElementById(element.getAttribute('data-hide')));
});

Also note that I removed all of your onmouseover attributes on the html elements themselves and replaced them with a data-hide attribute instead. This tells the function which element to hide on the mouseover event.

score 0 · Answer 4 · answered Apr 29 '17 at 22:46

Try something like this:

HMTL:

<table >
              <tb id="tab1">C</tb> //make sure id is unique for each <tb>
              <br />
                (...)
          </table>

Javascript:
(*)make sure you wrap javascript on document ready.

$(function() {
  $('#imgSWTCH1').hide();  
  $('#tab1').mouseover(function (e) {
     //e.stopPropagation();
      $('#imgSWTCH1').show();      
  });
  $('#tab1').mouseout(function (e) {
    //e.stopPropagation();
      $('#imgSWTCH1').hide();      
});

});

score 0 · Answer 5 · answered Apr 29 '17 at 22:52

var change=function(){
    if(document.getElementById("image").style.visibility == "visible"){
        document.getElementById("image").style.visibility = "hidden";}else{document.getElementById("image").style.visibility="visible";}
    }
function enter(){
    document.getElementById("image").style.visibility = "hidden";
    }
function leave(){
    document.getElementById("image").style.visibility="visible";
    }

<!DOCTYPE html>
<html>
<head>
 <link rel='stylesheet' href='style.css'/>
 <script src='script.js'></script>
</head>
<body>
<img onmouseover="enter();" onmouseout="leave();" id="image" src="https://publicdomainvectors.org/photos/Microscope-BW.png"/>
<button onclick="change();" >ClicMe</button>
</body>
</html>

Run the code snnipet Hope it does it...Good Luck

References...[Changing Visibility Property](https://stackoverflow.com/questions/9456289/how-to-make-a-div-visible-and-invisible-with-javascript#9456325) and [onmouseover w3schools](https://www.w3schools.com/tags/ev_onmouseover.asp) — NewToPi, Apr 29 '17 at 22:58

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

5 Answers5