Tutorial :Change image of a button whithout going into the server with Jquery



Question:

I have a button that has a image and uses a MVC Ajax Form(Not Jquery) but I want change the button image to a loading element via Jquery, how can I do this using a element img that is already loaded in the page (if load from server it lost the purpose of immediatly show a loading element).


Solution:1

If you use a tiled button image and careful position, then changing the class will change the apparent image without loading anything new.

e.g. say your button image is 2*50px wide (ie 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'a good article on the technique here: http://www.alistapart.com/articles/sprites2/


Solution:2

Try jQuery:

<img id="my_image" src="button_image.jpg"></img>    $("#my_image").attr("src","loading.jpg");  

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


Note:If u also have question or solution just comment us below or mail us on toontricks1994@gmail.com
Previous
Next Post »