如何在单击时更改图像并在使用HTML / CSS / JS发布后恢复图像

Question

I have an issue with Styling an object to make it look like a button and act as a functional link.

The effect i'm trying to achieve is to represent a button, so when clicked, it will begin to load the target page, but animate the object to visually represent a button being pressed.

Here is a (non-working) JS Fiddle as an example of the desired effect.

The first fiddle has no JavaScript in it for now, as i am currently a novice when it comes to manually typing it.

I have tried using pseudo classes, such as :hover as a temporary solution, but it doesn't work as desired, and from what i've tried, every possible solution i have seen on other questions don't seem to resolve my problem

This JS Fiddle i found in another question provides some coverage of the topic, but i can't seem to make it work for images, it only works for text and any changes i try just seem to break it or make the object not work or even appear.

Any help with this would be greatly appreciated as i have been trying different methods for a few weeks.

Thanks in Advance

Answer 1

You can use :hover in css.

https://jsfiddle.net/pmy74ox5/6/

In your case (without js), use background-url in img and change its url in img:hover

Answer 2

you could wrap the button in an empty anchor tag and then use the :active selector on the a tag.

a:active{
  //some styling
}

check out the selectors for a tags here:

http://www.w3.org/TR/selectors/#the-user-action-pseudo-classes-hover-act

the other way of doing it may be to use the checkbox hack: https://css-tricks.com/the-checkbox-hack/

or in js, something like:

var my_button = getElementById('button')
var clicked = false;
var buttonClicked = function(e){
  if(!clicked){
    my_button.classList.add("downClass");
  }else{
    my_button.classList.remove("downClass");
  }
}

my_button.addEventListener('click',buttonClicked);

Answer 3

You can define the img in css and use a little jquery to have the desired effect :

.button{
    background:url(https://cdn.tutsplus.com/vector/uploads/legacy/tuts/000-2011/463-steel-buttons/35.jpg) no-repeat 0 top;
    width: 300px;
    height: 300px;
    display: inline-block;
}
.button.click{
    background:url(https://cdn.tutsplus.com/vector/uploads/legacy/tuts/000-2011/463-steel-buttons/35.jpg) no-repeat  -300px top;
}

here the js

$('.button').on("mousedown", function(){
    $(this).addClass('click');
})
$('.button').on("mouseup", function(){
    $(this).removeClass('click');
})

https://jsfiddle.net/pmy74ox5/7/

a solution with only jquery is possible too.