Have Geek Brain

Change the image of a button without logging into the server using jquery

I have a button with an image and using an Ajax MVC form (not JQuery), but I want to change the button image to an upload element via Jquery, how can I do this using an img element that is already loaded in (when uploading from the server, it lost the target show loading item immediately).

+2


a source to share


2 answers


If you are using a tiled button image and careful positioning then changing the class will change the apparent image without loading anything new.

eg. let's say your button image is 2 * 50px wide (i.e. 100px wide)

CSS



button {
  background: url('path/button.png') 0px 0px no-repeat;
  width: 50px;
}

button.pic{
  background: url('path/button.png') 50px 0 no-repeat;//offset the image to show 2nd half
}

There is a good article on the technique here: http://www.alistapart.com/articles/sprites2/

+1


a source


Try jQuery:

<img id="my_image" src="button_image.jpg"></img>

$("#my_image").attr("src","loading.jpg");


... attr () is used to set the attribute of the html element. In this case, we will change the src property.

0


a source






More articles:


All Articles