Img src & jQuery?

Question

I have an image and using jQuery I turned it into a button. The so-called button has two states: regular and pressed.

Using jQuery, I detect "mousedown" and "mouseup" and replace the src attribute as follows:

$("#btn").click(function() {
   ;//DO SOMETHING HERE WHEN PRESSED
});
$("#btn").mousedown(function() {
   $(this).attr({ src: regular.png });
});
$("#btn").mouseup(function() {
   $(this).attr({ src : pushed.png });
});

When testing this offline mode it works great! But today, I noticed that when the images are stored on the server, it downloads the images again and again with each attribute change.

How to avoid this upload problem and make all images uploaded only once from the server?

Also, if you are better off doing what I'm trying to do here, please let me know.

Thanks.

Answer 1

, . mouseout/mouseover:

<style type="text/css">

 .button_normal {
   width: 50px;
   height: 50px;
   background-image: url(merged_button_bg.png);
   background-repeat: no-repeat;
   border: solid black 1px;
   cursor: pointer;
 }

 .button_over {
  background-position: -50px;
 }

</style>

<div class="button_normal"></div>

<script>

 $(document).ready(function() {
  $('.button_normal').mouseover(function() {
   $(this).addClass('button_over');
  });
  $('.button_normal').mouseout(function() {
   $(this).removeClass('button_over');
  });
 });

</script>

50 merged_button_bg.png 100 50 .

Answer 2

src span div ( ) CSS, . CSS .

Answer 3

Preload ?

: , , , . script .

By the way, I agree that CSS sprites are the best solution if they are suitable for the situation, i.e. if you are in full control of the images themselves.