How to make the background image of a button disappear when we click it, and make it appear on another button when we click it in Visual Studio
It’s fairly simple to do so.
I wrote a some to give you a working example:
Here is the working example on JSFiddle: Button bg-image toggle Example for Quora
I’ve outlined the steps for you:
Add html:
- Button 1
- Button 2
Use css to assign background image to both the buttons.
- .bg-img{
- background-image: url("img.png")
- }
Add another CSS definition to hide background image:
- .hide-bg-img{
- background-image: none;
- }
Add your jquery
- if($('#bt1').click){
- $('#bt1').click(function(){
- $('#bt2').toggleClass('bg-img');
- $(this).removeClass('bg-img');
- });
- }
- if($('#bt2').click){
- $('#bt2').click(function(){
- $('#bt1').toggleClass('bg-img');
- $(this).removeClass('bg-img');
- });
- }
This jQuery code can be improved. Read it and try to understand what I did.
When you understand what is happening you can use if/else if/else statement and write for brevity.
Hope this helps.
Here is the JSFiddle working example: Button bg-image toggle Example for Quora
Articoli simili
- Why does Android button shape changes but not color after applying background drawable (Android, button, Android drawable, development)?
- How to detect an object from static image and crop it from the image using openCV
- To set an image to fill 50% of the screen on all Android devices, what size of image should I keep in a resource folder?
- How to launch a fragment from an activity on button click in Android