Struggling to remove an image while using the onmouseover event with a button?

Question

Struggling to remove an image while using the onmouseover event with a button?

I am encountering an issue with hiding an image using the onmouseover event not applied directly to it, but rather to a button element. The desired functionality is for the image to appear when the mouse hovers over and disappear when it moves away. Here's my current code:

    <script>
  function toggleImage(id) {
    var x = document.getElementById(id);
    if (x.style.display === 'none') {
        x.style.display = 'block';
    } else {
        x.style.display = 'none';
    }
}
</script>

This JavaScript function allows for dynamic toggling of images on mouseover, and in the HTML section you can find:

  
<!-- Example image elements -->
<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"/>
<!-- Add more image elements as needed -->

<!-- Using buttons to trigger image toggling -->
<button onmouseover="toggleImage('imgSWTCH1')" onmouseout="toggleImage('imgSWTCH1')">Toggle Image 1</button>
<button onmouseover="toggleImage('imgSWTCH2')" onmouseout="toggleImage('imgSWTCH2')">Toggle Image 2</button>
<!-- Add more buttons to correspond with additional images -->

The `onmouseout` event currently changes the background color to orange, but the goal is to hide the corresponding image instead. However, assigning multiple IDs to an element poses a challenge. A potential solution would be implementing this functionality using jQuery or Angular.

Here is the Plunker link, make sure to expand the HTML section to view the complete code.

javascript jquery css angularjs html

Answer 1

Answer №1

Here is a straightforward demonstration using JQuery:

View the example here

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

Answer 2

Here is a straightforward demonstration using JQuery:

View the example here

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

Answer 3

Answer №2

Consider trying a single function for mouseover and another for mouseout. Instead of using the display property, try using the visibility property of the img to avoid any jumping elements.

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

UPDATE

Here's the idea:

  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 JavaScript and in HTML:

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

...and so forth. However, implementing this with jQuery would be much more efficient :) This coding style is reminiscent of the 90s :)

Answer 4

Consider trying a single function for mouseover and another for mouseout. Instead of using the display property, try using the visibility property of the img to avoid any jumping elements.

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

UPDATE

Here's the idea:

  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 JavaScript and in HTML:

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

...and so forth. However, implementing this with jQuery would be much more efficient :) This coding style is reminiscent of the 90s :)

Answer 5

Answer №3

If you have 7 functions that are all doing the same thing, consider creating one function and binding the element you want to hide to it. Check out this example on JSFiddle to see how it can be implemented:

Take a look at the JavaScript code below:

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

Additionally, I've replaced the onmouseover attributes on the html elements with a data-hide attribute. This attribute specifies which element should be hidden when the mouseover event occurs.

Answer 6

If you have 7 functions that are all doing the same thing, consider creating one function and binding the element you want to hide to it. Check out this example on JSFiddle to see how it can be implemented:

Take a look at the JavaScript code below:

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

Additionally, I've replaced the onmouseover attributes on the html elements with a data-hide attribute. This attribute specifies which element should be hidden when the mouseover event occurs.

Answer 7

Answer №4

Here is a suggested approach:

HTML:

<table >
              <tb id="tab1">C</tb> //ensure that the id is unique for each <tb>
              <br />
                (...)
          </table>

Javascript:
(*)Remember to enclose the JavaScript within document ready function.

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

});

Answer 8

Here is a suggested approach:

HTML:

<table >
              <tb id="tab1">C</tb> //ensure that the id is unique for each <tb>
              <br />
                (...)
          </table>

Javascript:
(*)Remember to enclose the JavaScript within document ready function.

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

});

Answer 9

Answer №5

function toggleImageVisibility(){
    if(document.getElementById("image").style.visibility == "visible"){
        document.getElementById("image").style.visibility = "hidden";}
    else{
        document.getElementById("image").style.visibility="visible";
    }
}

function hideImageOnEnter(){
    document.getElementById("image").style.visibility = "hidden";
}

function showImageOnLeave(){
    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="hideImageOnEnter();" onmouseout="showImageOnLeave();" id="image" src="https://publicdomainvectors.org/photos/Microscope-BW.png"/>
<button onclick="toggleImageVisibility();" >Click Me</button>
</body>
</html>

Try running the code snippet and see how it works. Good luck!

Answer 10

function toggleImageVisibility(){
    if(document.getElementById("image").style.visibility == "visible"){
        document.getElementById("image").style.visibility = "hidden";}
    else{
        document.getElementById("image").style.visibility="visible";
    }
}

function hideImageOnEnter(){
    document.getElementById("image").style.visibility = "hidden";
}

function showImageOnLeave(){
    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="hideImageOnEnter();" onmouseout="showImageOnLeave();" id="image" src="https://publicdomainvectors.org/photos/Microscope-BW.png"/>
<button onclick="toggleImageVisibility();" >Click Me</button>
</body>
</html>

Try running the code snippet and see how it works. Good luck!

Struggling to remove an image while using the onmouseover event with a button?

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Similar questions

Upon utilizing JSON.parse in Express, an unexpected token < in JSON was encountered at position 0 while attempting a client side fetch POST

Utilizing Page Objects to select dropdown list items in JavaScript for Protractor testing

Looking for some specific instances of binding attributes within custom AngularJS elements?

Can the color scheme be customized for both light and dark themes in Ant Design version 5?

Customize Material-UI Icons styles in React app

Test an express + sequelize server using chai-http ping command

Sleek transition-ready zoom functionality for THREE JS with clickable controls

JavaScript code may fail to load on initial page load

Struggling to align divs in HTML using CSS

What is the best way to calculate the total duration (hh:mm) of all TR elements using jQuery?

Determine the total width by adding together the widths of all child elements

Instructions on transferring an image to a server. The image is located on the client side within an <img> tag

What is the best way to retrieve a file using XMLHTTPRequest and Ajax?

What is the process for right-aligning components in BootStrap 5.0?

Assign a variable the source of the web subsurface A-frame setting

Some elements in the DOM appear to not be rendering even though they are present in the HTML source code

updating a div with URL redirection instead of global redirect

Tips for sending values via props to a different component and the common error message: "Consider using the defaultValue or value props instead of setting selected on the <option> element"

Feeling grateful: Enable scroll functionality for a log widget

Identify support for the :first-child pseudo-class