CODEWITHSUNDEEP
javascriptjqueryhtmldom
33528
33528

Reputation: 382

Hide image in the link when press link once

I have the following script. All I want is, when I press on link once, then the image in the link disappears. The image I want to disappear after pressing the link is enter.png.

<script>
$(document).ready(function() {
 $(".open_close_doors").click(function(){
   $("#leftdoor_inner").animate({"left": "-=395px"}, "slow");
   $("#rightdoor_inner").animate({"left": "+=395px"}, "slow");

   setTimeout("window.location.href='wall.php';",200);
 });
});
</script>

<a class="open_close_doors" href="#"><img src='img/enter.png' onmouseover=this.src='img/enter_light.png' onmouseout=this.src='img/enter.png'></a>

Upvotes: 1

Views: 111

Answers (1)

Racil Hilan
Racil Hilan

Reputation: 25351

To hide the image, you can set its src property to nothing:

this.children[0].src = "";

However, since your goal is to prevent the user from clicking the button more than once, it is better to make the entire link disappear:

this.style.visibility = 'hidden';

Here is a demo (I commented out the redirection for demo purpose):

$(document).ready(function() {
  $(".open_close_doors").click(function() {
    $("#leftdoor_inner").animate({
      "left": "-=395px"
    }, "slow");
    $("#rightdoor_inner").animate({
      "left": "+=395px"
    }, "slow");
    this.style.visibility = 'hidden';
    //setTimeout("window.location.href='wall.php';", 200);
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a class="open_close_doors" href="#"><img src='http://placehold.it/50x50' onmouseover="this.src='http://placehold.it/100x100'" onmouseout="this.src='http://placehold.it/50x50'"></a>

Upvotes: 2

Related Questions