0

Problem fixed, no information necessary.

Aero
  • 19
  • 6

5 Answers5

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

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

szegheo
  • 3,675
  • 3
  • 26
  • 35
0

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.

jas7457
  • 1,592
  • 11
  • 17
0

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

});

Red Devil
  • 176
  • 1
  • 9
0

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

NewToPi
  • 148
  • 1
  • 8
  • 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