Hello!
Have you ever found programming. And do you want the image to enter or hidden when you press a button? But you do not? If you want to know how to do it, this is your post!
First of all you have to make a button with the class .button in html. With CSS you can change the color of the button the with the hight…
<button class=“button”> </button>
Second you have to make a div with a bakground image in html or css you can chose what you prefere. And alsow whit a class for example .image
HTML
<button class=“button”> </button>
<div class=“image”>
<img scr=“../img/(where you have the image)>
</div>
CSS
.image {
background-image: url(../img/(where you have the image).jpg/png;
}
Now is time to programate the jquery. First make sure that you have linck the jquery librery. For linkid go to HTML and in the head enter the fallowing code:
<script src=“https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js”></script>
Now enter in the javascript page of coding. Lets make the image apear when we press the button.
What we wont is that when botton has been click, for the first time, the image appere, and if its been click for a second time the image desapers. For make this we will use the toggle attribute. so we will write.
$(‘.button’).on(‘click,() => {
$(‘.image’).toggle();
});
But if we wont a button for make visible the image and an other one to hide?
We will start making a to new button in html with new classes, like hidden-button or show-button:
<button class=“hidden-button”> </button>
<button class=“show-button”> </button>
<button class=“buton”> </butto>
<div class=“image”>
<img scr=“../img/(where you have the image)>
</div>
And in javascript we will make a new functions, we will start like the last one, but insted of class .button we will put the class hidden-button (becouse is the one that interested us), and then we will change toggle for hide, becouse we only want to hide the image
$(‘.hide-button’).on(‘click’, () => {
$(‘.image’).hide();
});
For viw the image we will make the same than we make befor changinc hide-button for the class show-button, and the action hide for show. And the code it have to be somthing like this:
$(‘.show-button’).on(‘click’, () => {
$(‘.image’).show();
});
Now you know how to make appere and desapere an image with a button.